[WIP] SCSS/SASS

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 может много чего. Но так как мне не совсем понятно нахуя, я не использую все его суперкрутые фичи и юзаю только вышеописанное (и то не всегда)