Intro

  • Надстройка над CSS, позволяющая использовать расширенный синтаксис для написания CSS
  • SASS / SCSS не может исполняться браузером, браузер его не понимает, поэтому перед тем как увидеть стили их нужно скомпилировать в CSS
  • Удобнейшим (скорее всего) способом для компиляции на лету является Gulp
  • В SASS / SCSS можно писать и чистый CSS, никаких проблем с совместимостью не будет, так как это надстройка над CSS, а не полностью отдельный язык

Syntax

В первую очередь стоит сказать, что SASS / SCSS это не два различных языка, это различные способы написания на одном и том же языке. Далее будут примеры, по которым будет понятно различие между SCSS и SASS, но в дальнейшем все примеры будут на SCSS

  • SCSS
    	body {
    		font: 100% $font-stack;
    		color: $primary-color;
    	}
    
  • SASS
    	body
    		font: 100% $font-stack
    		color: $primary-color
    

Собственно, всё

Features

Variables

Переменные позволяют записывать значение (какое-угодно) и использовать в дальнейшем это значение уже по названию. Это может понадобиться, например, чтобы изменять значение в одном месте, и это изменение применялось по всему коду. Переменные начинаются со знака $. Декларация и использование показаны в примере ниже.

  • До
    	$font-stack: Helvetica, sans-serif;
    	$primary-color: #333;
    	body {
    		font: 100% $font-stack;
    		color: $primary-color;
    	}
    
  • После
    	body {
    		font: 100% Helvetica, sans-serif;
    		color: #333;
    	}
    

Nesting

Nesting (вложенность) позволяет не прописывать сложные длинные селекторы для каждого элемента, заменяя их на древовидные структуры. Это позволяет, например, при изменение одного класса на каком-нибудь блоке, переписать его в одном месте вместо того, чтобы переписывать его в каждом селекторе

  • До
    	nav {
    		ul {
    			margin: 0;
    			padding: 0;
    			list-style: none;
    		}
    		li {
    			display: inline-block;
    		}
    		a {
    			display: block;
    			padding: 6px 12px;
    			text-decoration: none;
    		}
    	}
    
  • После
    	nav ul {
    		margin: 0;
    		padding: 0;
    		list-style: none;
    	}
    	nav li {
    		display: inline-block;
    	}
    	nav a {
    		display: block;
    		padding: 6px 12px;
    		text-decoration: none;
    	}
    

У nesting есть и более веселое применение. Можно создавать вложенности для свойств, которые имеют общую часть в названии

	.funky {
		font: {
			family: fantasy;
			size: 30em;
			weight: bold;
		}
	}

Import

@import позволяет вставлять целые SASS / SCSS файлы в другие, что позволяет иметь кучу мелких файлов, отвечающих за отдельные части сайта, которые при компиляции будут объединены в один

  • Файл _reset.scss
    	html,
    	body,
    	ul,
    	ol {
    		margin: 0;
    		padding: 0;
    	}
    
  • Файл base.scss
    	@import 'reset';
    	body {
    		font: 100% Helvetica, sans-serif;
    		background-color: #efefef;
    	}
    
  • Импорту достаточно знать название без пути и расширения файла, если он начинается с _ и лежит в той же папке, что и файл с @import. Если структура более сложная, то нужно указывать полный путь до файла с расширением. Результат после компиляции:
    	html, body, ul, ol {
    		margin: 0;
    		padding: 0;
    	}
    	body {
    		font: 100% Helvetica, sans-serif;
    		background-color: #efefef;
    	}
    

Mixins

Mixins (микшены) позволяют писать собственные шаблоны для подстановки. Вы сами пишите, что микшен принимает на вход и что он должен в итоге вернуть. Для подключения микшенов используется спец-слово @include

  • До
    	@mixin border-radius($radius) {
    		-webkit-border-radius: $radius;
    		-moz-border-radius: $radius;
    		-ms-border-radius: $radius;
    		border-radius: $radius;
    	}
    	.box { @include border-radius(10px); }
    
  • После
    	.box {
    		-webkit-border-radius: 10px;
    		-moz-border-radius: 10px;
    		-ms-border-radius: 10px;
    		border-radius: 10px;
    	}
    

Extend

@extend позволяет расширять, дополнять уже написанные стили какими-либо новыми свойствами

  • До
    	.message {
    		border: 1px solid #ccc;
    		padding: 10px;
    		color: #333;
    	}
    	.success {
    		@extend .message;
    		border-color: green;
    	}
    	.error {
    		@extend .message;
    		border-color: red;
    	}
    	.warning {
    		@extend .message;
    		border-color: yellow;
    	}
    
  • После
    	.message, .success, .error, .warning {
    		border: 1px solid #cccccc;
    		padding: 10px;
    		color: #333;
    	}
    	.success {
    		border-color: green;
    	}
    	.error {
    		border-color: red;
    	}
    	.warning {
    		border-color: yellow;
    	}
    

Operators

Операторы позволяют писать формулы, а не точные значения. Операторы это +, -, *, / и %

  • До
    	.container { width: 100%; }
    	article[role="main"] {
    		float: left;
    		width: 600px / 960px * 100%;
    	}
    	aside[role="complementary"] {
    		float: right;
    		width: 300px / 960px * 100%;
    	}
    
  • После
    	.container {
    		width: 100%;
    	}
    	article[role="main"] {
    		float: left;
    		width: 62.5%;
    	}
    	aside[role="complementary"] {
    		float: right;
    		width: 31.25%;
    	}
    

Можно складывать цвета, как не странно

Comments

Комментарии могут быть двух видов: многострочный /* комментарий тут */, который будет в конечном CSS, и однострочный // комментарий, которого не будет в конечном CSS

Color Operations

Есть специальные команды, которые позволяют влиять на цвет

  • Сделать цвет более непрозрачным на 0.3
    	color: opacify($translucent-red, 0.3);
    
  • Сделать цвет более прозрачным
    	background-color: transparentize($translucent-red, 0.25);
    
  • Сделать цвет светлее: lighten($color, 10%);
  • Сделать цвет темнее: darken($color, 10%);

По факту, SASS / SCSS может много чего. Но так как мне не совсем понятно нахуя, я не использую все его суперкрутые фичи и юзаю только вышеописанное (и то не всегда)