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