Первое это рассмотрим отличие SASS и SCSS.
SASS
$font-stack: Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-color
SCSS
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
Для работы с препроцессорами я рекомендую поставить специальную программу, которая позволит легко преобразовывать SCSS код в CSS - Prepros. Так же эта программа позволит работать с препроцессорами LESS, STYLUS и прочими.
Перед тем как писать код SCSS в SublimeText, установим синтаксис SCSS для него. Для этого нажимаем CTRL+SHIFT+P, пишем "instal" и кликаем по "Package Control: Install Package". Далее пишем "SCSS" и его же выбираем. Все, синтаксис SCSS для SublimeText установлен.
Теперь для того что бы писать код в SCSS нам нужно в нашем проекте верстки создать еще одну папку с именем "scss", внутри этой папки создаем файлик styles.scss, причем если мы хотим писать синтаксисом SASS, то создаем файлик styles.sass.
Далее в Prepros добавляем наш проект. Рекомендую проверить настройки конвертирования файла styles.scss, он должен конвертировать код в файл styles.css.
После этого мы можем писать код в нашем редакторе SiblimeTetx, а Prepros будет автоматически конвертировать наш код SCSS в правильный для браузера код CSS.
В SCSS и SASS можно использовать переменные, вложенности, фрагментирование, миксины, различные расширения и наследования. Все примеры хорошо представленные в документации по SCSS на сайте.
Пример использования SCSS
body {
background-color: green;
}
a {
color: #000000;
&:hover {
color: #ffffff
}
}
а так скомпилируется в CSS
body {
background-color: green;
}
a {
color: #000000;
}
a:hover {
color: #ffffff;
}
Пример создание сетки для сайта с использованием математических вычислений в SCSS.
HTML
<div id="grid">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
SCSS
#grid {
float: left;
width: 100%;
div {
@include grid(5, 2%);
}
}
MIXIN
@mixin grid($cols, $margin) {
float: left;
background-color: red;
margin-right: $margin;
margin-bottom: $margin;
height: 150px;
width: (((100% - ($cols - 1) * $margin)) / $cols);
&:nth-child(#{$cols}n) {
margin-right: 0;
}
}
Mixin в SCSS
@mixin grid($cols, $margin) {
float: left;
background-color: red;
margin-bottom: $margin;
height: 150px;
@if($cols >=5) {
width: 100%;
margin-right: 0;
}
@else {
width: (((100% - ($cols - 1) * $margin)) / $cols);
margin-right: $margin;
}
/* width: (((100% - ($cols - 1) * $margin)) / $cols); */
&:nth-child(#{$cols}n) {
margin-right: 0;
}
}
SCSS
$someVar: some_class;
@for $i from 24 to 29 {
.#{$someVar}-#{$i} {
width: 50px +$i;
height: 50px +$i;
}
}
Компиляция CSS при этом получится
.some_class-24 {
width: 74px;
height: 74px;
}
.some_class-25 {
width: 75px;
height: 75px;
}
.some_class-26 {
width: 76px;
height: 76px;
}
.some_class-27 {
width: 77px;
height: 77px;
}
.some_class-28 {
width: 78px;
height: 78px;
}