Препроцессор SASS и SCSS

Первое это рассмотрим отличие 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;
}

Сайт sass-scss

Для работы с препроцессорами я рекомендую поставить специальную программу, которая позволит легко преобразовывать SCSS код в CSS - Prepros. Так же эта программа позволит работать с препроцессорами LESS, STYLUS и прочими.

Скачать Prepros

Перед тем как писать код 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 на сайте.

Документация sass-scss

Используем псевдоклассы в 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 

Пример создание сетки для сайта с использованием математических вычислений в 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;
	}
}

Все функции доступные в SCSS

Условия, циклы и опреаторы в SCSS 

Пример использования условия if  в SCSS

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;
	}
}

Пример цикла for в SCSS

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;
}