Хотя существуют другие препроцессоры CSS, Sass уже давно является самым популярным вариантом в веб-сообществе. Он многофункциональный, стабильный и мощный. Более того, большое сообщество пользователей означает, что поддержка и советы со стороны сообщества помогут решить любую проблему. В этой статье мы предлагаем 10 лучших советов для большей эффективности от использования Sass.

01. Вложенность

Возможность отражать вложенность иерархии стиля HTML в CSS, возможно, является самым большим преимуществом, которое Sass как препроцессорв в сравнении с регулярным CSS. Это избавляет вас от постоянных повторений кода, упрощает поддержку проекта в будущем и код гораздо удобнее читается, поскольку вы можете точно видеть, какое правило относится к какому селектору:

// Обычный CSS
    .foo { .. }
    .foo ul { .. }
    .foo ul li { .. }

// Sass
    .foo {
     	..
     	ul {
     	..
     	li { ..}
     	}
    }

02. Reference symbol

При вложенности вы можете использовать символ & для ссылки на родительский элемент. Это здорово помогает при написании стилей CSS. Во-первых, вы можете аккуратно вставлять псевдо-состояния или элементы:

.foo {
 	background-color: red;
 	&:hover { background-color: blue; }
 	&:after { content: 'bar'; }
    }

... ну, и во-вторых, избавииться от надоедливого переписывания селекторов и классов:

.foo {
 	background-color: red;
 	&.bar { background-color: green; }
	.ie &.bar { background-color: yellow; }
}

// =>
.foo { background-color: red;}
.foo.bar { background-color: green; }
.ie .foo.bar { background-color: yellow; }

03. Переменные

Все переменныев Sass начинаются с символа $ за которым следует наименование переменной без пробела:

$breakpoint-sm: 576px;

Такой подход делает работу с глобальными значениями такими как цвета, шрифты и Which makes handling global values such as colours, fonts and контрольные точки (breakpoint) невероятно легко.

04. Переменные объектов

В Sass, переменные также могут быть записаны как объект. Например объект с записанными в него переменными для breakpoint'а:

$grid-breakpoints: (
 sm: 576px,
 md: 768px,
 lg: 992px
);

Для получения (извлечения) переменных, записанных в объект можно импользовать функцию Sass map-get которая возвращает переменные по ключу, передаваемого в функцию в качестве аргумента. В примере ниже будем использовать эту функцию для определения значения max-width для медиа запроса:

@function breakpoint-var($breakpoint) {
   @return map-get($grid-breakpoints, $breakpoint);
}

@media (max-width: breakpoint-var(lg)) {
}

// => @media (max-width: 992px) {
//
// }

И, хотя, сейчас CSS имеет функцию var(), которая позволяет создавать простые переменные с префиксом --, но препроцессор Sass намного эффективнее.

05.Миксины

Миксины предоставляют мощь переиспользования кода в CSS. С миксинами вместо того, чтобы в таблице стилей переписывать один ии тот же код несколько раз вы можете просто включить миксину в стиль элемента:

@mixin foo() {
	border: 1px solid red;
}

.bar {
	@include foo();
}

// =>
// .bar { border: 1px solid red; }

Вы можете также настроить параметры для миксин так что можно будет использовать одни и те же стили, но с необходимыми изменениями аргументов, передаваемых в миксины. Вы также можете настроить значения параметров по умолчанию для таких аргументов:

@mixin foo($width: 1px, $color: red) {
	border: 1px solid red;
}

.bar {
	@include foo();
}

.bax {
	 @include foo(5px, blue);
}

// =>
// .bar { border: 1px solid red; }
// .baz { border: 5px solid blue; }

06. Функции

Функции и миксины часто могут быть взаимозаменяемыми и достигать одного и того же результата, но смысл их применения несколько отличаются. Как и во многих вопросах программирования, главным здесь является логика использования: миксины используются преимущественно для включений, а функции - больше для получения возвращаемых значений. Например, функция breakpoint-var(), которую мы использовали ранее, возвращает значение, чего не делают миксины.

07. Расширения (@extends)

Это, если так можно выразится, бриллиант, для сокращения дублирования кода в CSS, и позволяя классам совместно использовать один набор свойств.

.foo {
 	color: black;
 	border: 1px solid black;
}

.bar {
 	@extend .foo;
 	background-color: red;
}


// =>
.foo, .bar {
 	color: black;
 	border: 1px solid black;
}
.bar { background-color: red; }

Вы можете даже передать через расширение стили нескольких селекторов:

@extend .foo, .bar;

Кроме того, использование расширений отчасти помогает оптимизировать использование классов в HTML-коде:

// Без @extend
.foo {
	 background-color: red;
 		border: 1px solid blue;
 color: black;
}

.bar { background-color: green; }
<div class="foo bar">...</div>

// С @extend
.foo {
 background-color: red;
 border: 1px solid blue;
 color: black;
}

.bar {
 @extend .foo;
 background-color: green;
}
<div class="bar">...</div>

Единственный недостаток - это резкое увеличение размера таблицы стилей.

08. Иморт (@import)

Нет ничего более неприятного или вызывающего головную боль, чем слишком большая таблица стилей, особенно если вы работаете только с одной ее частью. К счастью, Sass позволяет вам разделить файл таблицы стилей на несколько файлов, а затем использовать @import, чтобы импортировать стили тогда, когда они понадобятся.

Например, если вы хотите импортировать отдельные стили для кнопок, мы можемназвать файл _buttons.scss и затем просто добавить @import buttons в основной файл с таблицами стилей Sass. Точно также, как и с директивой @extend вы можете импортировать множество файлов, заделеяя их названия запятой:

@import 'buttons', 'forms';

Вы можете импортировать внутрь селектора:

.foo {
 	@import 'bar';
}

И можно сделать даже так:

@import 'utils/mixins';

.foo {
	 @import 'components/buttons';
}

Это предоставляет вам полную свободу при построении архитектуры стилей вашего проекта.

09. Циклы

Вы можете выполнять циклы в Sass, используя три основных правила:

@for - цикл для заданного количества итераций с доступом
к индексу на каждой итерации цикла

@while - повторение цикла до тех пор, пока
верно условие

@each - проверка каждого элемента в списке

Если у вас есть опыт работы с JavaScript (или большинством языков программирования), вы должны быть ознакомлены с принципами работы циклов. Например, вся система Flex-grid от Bootstrap встроена в Sass, используя циклы. Более простой пример показывает как с помощью цикла можно быстро создать ступенчатую анимацию затухания для элементов, использующих тэг nth-child:

.foo {
 	@for $i from 1 through 5 {
 	&:nth-child( #{i} ) {
 	opacity: 1;
 	transition: opacity .5s;
 	transition-delay: #{($i * .05) + .05}s;
 	}
 }
}

10. Интерполяция

Цикл @each отлично работает с мощной функцией, называемой интерполяцией - способ использования содержимого значений, которые вы зацикливаете (синтаксис # {VALUE}). Итак, если мы хотим настроить стиль для заголовка, используя переменную объекта с ключами и значениями, мы могли бы сделать следующее:

$fonts: (
 	h1: 24px,
 	h2: 20px,
 	h3: 16px
);

@each $element, $size in $fonts {
 	#{$element} {
 	font-size: $size;
 	line-height: ($size * 1.5);
 	}
}

Источник