Псевдо классы в Sass - Ko2doo/Corp-study-mokup GitHub Wiki

//Description Учимся писать псевдо-классы =)

И так имеем такую конструкцию:

.header{

text-align: center; margin: 0 auto; display: block; background: #1c1c1c;

h1.headline{

font-size: 14px; color: #dfdfdf;

&:hover{

//сюда пишем правила для ховер эффектов

}

&:first-of-type{

//сюда пишем правила для first-of-type

}

}

} //end .header

Амперсант играет огромную роль, если вы хотите добавить какой то псевдо-класс к элементу, то после описания (или до описания не важно) основных правил для этого элемента ставите амперсант открываете кавычки и пишет все необходимое=)

На выходе вы получите вот такую конструкцию:

.header{

text-align: center; margin: 0 auto; display: block; background: #1c1c1c;

}

.header h1.headline{

font-size: 14px; color: #dfdfdf;

}

.header h1.headline:hover{

//Ваши свойства записаные в Sass

}

.header h1.headline:first-of-type{

//Ваши свойства записаные в Sass

}