CSS ссылка на вложенные стили

Question

Мне нужно создать множество стилей ссылок:

  a:link {color: one;}
  a:visited {color: two;}
  a:hover {color: three;}
  a:active {color: four;}

, но для a.1 - a.10

Есть ли способ сократить код до более компактного варианта?

Спасибо.

Answer 1

Вы не можете сделать это с помощью простого CSS, вы можете использовать SASS, чтобы делать то, что вы хотите.

Вот документация SASS о вложении !

Вы сможете создать что-то вроде этого:

.my-class-1 a, .my-class-2 a {
  :link {
    color: one;        
  }
  :visited {
    color: two;
  } 
  [...]     
}

И если вам нужно несколько стиль для вашего класса, вы все еще можете вкладывать свой a так, его легче читать и быстрее писать:

 .my-class-1 a {
  :link {
    color: one;        
  }
  :visited {
    color: two;
  } 
  [...]     
}
.my-class-2 a {
  :link {
    color: three;        
  }
  :visited {
    color: four;
  } 
  [...]     
}