Sass – это css препроцессор, развязывающий вам руки в работе с css. Он позволяет вам писать масштабируемый и легко поддерживаемый css, а так же привносит много полезных фишек, таких как: переменные, функции, вложенность, наследование и многое другое. Compass – это css фреймворк, добавляющий еще больше жирного соуса к удобной работе с вашими css файлами.
В этом видеокасте мы научимся устанавливать Sass и Compass. Разберемся с переменными, встроенными в Sass функциями, а также с вложенностью и наследованием.
Все подробности в видео, а вот итоговый код:
@import "compass/reset";
$color: red;
$link_color: #d2d2d2;
$btn_color: #f4dd29;
h1 {
color: $color;
}
ul {
font-size: 14px;
a {
color: $link_color;
&:hover {
color: blue;
}
}
div & + a {
color: orange;
}
}
.btn {
border-radius: 5px;
color: $btn_color;
border: 1px darken($btn_color, 25%) solid;
background-color: transparentize($btn_color, 0.9) ;
}
.warning {
@extend .btn;
color: green;
background-color: transparentize(green, 0.9) ;
}
.success {
@extend .btn;
color: red;
background-color: transparentize(red, 0.9) ;
}Источник:
