Это будет краткая шпаргалка по препроцессору Scss без которого сегодня жить можно, но сложно. Хотя, если вы еще не попробовали, то ничего страшного.
1. Создание переменных
<style>
$fontsz:25px; // теперь мы можем это значение подставлять в наши стили
.main {
font-size:$fontsz;
color:#ff0000;
}
</style>
2. Вложенность стилей
<style>
$fontsz:25px; // теперь мы можем это значение подставлять в наши стили
.main {
font-size:$fontsz;
color:#ff0000;
.paragraf{
color:#0000ff;
}
@media(max-width:320px){
font-size:14px;
}
}
</style>
3. Еще одна замечательная фича в SCSS это миксин.
<style>
@mixin fontStyle($fsz,$color,$weight){
font-size:$fsz;
color:$color;
font-weight:$weight;
}
.main {
@include fontStyle('24px','red','600');
}
</style>