Sass за 15 минут

Конечно, 15 минут - слишком короткое время для освоения практически чего угодно, в том числе и Sass, однако для ознакомления этого вполне может хватить.

Если вы пишете очень много кода на CSS, препроцессор может значительно сократить объём вашей работы и ваш уровень стресса. Использование таких инструментов, как Sass, Less, Stylus или PostCSS делает ваши CSS-файлы более читабельными и облегчает последующую их поддержку. Благодаря переменным и функциям код становится более организованным и позволяет разработчикам быстрее работать и совершать меньше ошибок.

В этой статье мы разберём, как он работает и как что-то сделать с его помощью.

Начало

Браузер не распознает файлы Sass, так что сначала их нужно скомпилировать в обычный CSS. Поэтому вам необходимо иметь что-нибудь для конвертации .scss файлов в .css. На этот счёт есть несколько возможных решений:

  • Самое простое решение - браузерный конвертер для компиляции Sass на месте - SassMeister.
  • Использование приложений: существуют как платные, так и бесплатные приложения. Можете узнать больше, перейдя по этой ссылке.
  • Если вы любитель командной строки, как мы, то можете установить Sass на ваш компьютер и скомпилировать файлы вручную.

Если вы решите использовать командную строку, то можете установить Sass в его оригинальной обёртке, написанной на Ruby, или можете попробовать Node.js порт (наш выбор). Инструмент предоставляется в разном виде, но так как мы - истинные любители Node.js, мы предпочтём порт.

Вот так можно скомпилировать .scss файлы, используя командную строку:

node-sass input.scss output.css

Также пришло время упомянуть тот факт, что Sass предлагает нам два различных синтаксиса: Sass и SCSS. Оба выполняют одно и то же, просто по-разному написаны. SCSS новее и обычно считается лучше, чем предшественник, так что использовать будем его. Если хотите узнать про разницу двух подробнее, гляньте на эту статью.

Переменные

Переменные работают по такому же принципу, как и в любом языке программирования. Объявляя переменную, мы храним в ней какое-либо значение, которое обычно встречается в CSS в виде цвета, шрифта или целого набора свойств, например для box-shadow.

Ниже приведены примеры переменных как в SCSS, так и в CSS.

$title-font: normal 24px/1.5 'Open Sans', sans-serif;
$cool-red: #F44336;
$box-shadow-bottom-only: 0 2px 1px 0 rgba(0, 0, 0, 0.2);

h1.title {
font: $title-font;
color: $cool-red;
}

div.container {
color: $cool-red;
background: #fff;
width: 100%;
box-shadow: $box-shadow-bottom-only;
}
h1.title {
font: normal 24px/1.5 "Open Sans", sans-serif;
color: #F44336;
}

div.container {
color: #F44336;
background: #fff;
width: 100%;
box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.2);
}

Идея в том, что данный подход упрощает процесс повторного использования переменных, а также мы можем быстро изменить значение конкретной переменной там, где мы её объявляем, вместо повсеместного перепечатывания кода.

Mixin

Mixin можно также представить как класс-конструктор в языке программирования: вы используете ряд свойств из CSS, создавая отдельный объект, который потом используете где хотите, задавая разные значения его свойствам.

Ниже приведён пример использования Mixin в коде:

@mixin square($size, $color) {
width: $size;
height: $size;
background-color: $color;
}

.small-blue-square {
@include square(20px, rgb(0,0,255));
}

.big-red-square {
@include square(300px, rgb(255,0,0));
}
.small-blue-square {
width: 20px;
height: 20px;
background-color: blue;
}

.big-red-square {
width: 300px;
height: 300px;
background-color: red;
}

Ещё один способ упростить себе работу с помощью Mixin - использование его в местах, где требуются префиксы для адаптации под разные браузеры.

@mixin transform-tilt() {
$tilt: rotate(15deg);
-webkit-transform: $tilt; /* Ch <36, Saf 5.1+, iOS, An =<4.4.4 */
-ms-transform: $tilt; /* IE 9 */
transform: $tilt; /* IE 10, Fx 16+, Op 12.1+ */
}

.frame:hover {
@include transform-tilt;
}
.frame:hover {
-webkit-transform: rotate(15deg); /* Ch <36, Saf 5.1+, iOS, An =<4.4.4 */
-ms-transform: rotate(15deg); /* IE 9 */
transform: rotate(15deg); /* IE 10, Fx 16+, Op 12.1+ */
}

Extend

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

Extend используется, когда нам, к примеру, нужно два похожих элемента, которые имеют некоторые отличия. Например, давайте возьмём две кнопки: согласие и отмена.

.dialog-button {
box-sizing: border-box;
color: #ffffff;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
padding: 12px 40px;
cursor: pointer;
}

.confirm {
@extend .dialog-button;
background-color: #87bae1;
float: left;
}

.cancel {
@extend .dialog-button;
background-color: #e4749e;
float: right;
}
.dialog-button, .confirm, .cancel {
box-sizing: border-box;
color: #ffffff;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
padding: 12px 40px;
cursor: pointer;
}

.confirm {
background-color: #87bae1;
float: left;
}

.cancel {
background-color: #e4749e;
float: right;
}

Если вы взгляните на CSS код, то заметите, что Sass скомбинировал селекторы вместо повторения одних и тех же строк несколько раз в коде.

Вложенные конструкции

Как известно, в HTML, как правило, программист пишет код по принципу "гнездования". Иными словами, блоки кода находятся в других блоках кода и содержат вложенные блоки кода. CSS же в этом плане представляет собой полнейший хаос. Если для вас это проблема, Sass может помочь вам в организации кода.

Вот пример кода на SCSS:

ul {
list-style: none;

   li {
   padding: 15px;
   display: inline-block;

      a {
      text-decoration: none;
      font-size: 16px;
      color: #444;
     }
   }
}

И он же на CSS:

ul {
list-style: none;
}

ul li {
padding: 15px;
display: inline-block;
}

ul li a {
text-decoration: none;
font-size: 16px;
color: #444;
}

Операции

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

$width: 800px;

.container {
width: $width;
}

.column-half {
width: $width / 2;
}

.column-fifth {
width: $width / 5;
}
.container {
width: 800px;
}

.column-half {
width: 400px;
}

.column-fifth {
width: 160px;
}

Хоть сейчас и обычный CSS предлагает те же возможности, правда в форме calc(), альтернативный вариант на Sass быстрее в написании, имеет операцию mod (%) и применяется на более широком спектре типов данных (цвета, строки).

Функции

В Sass имеется целый ряд встроенных функций разного рода. К примеру, функции для операций со строками, цветами или выполняющие различные математические операции вроде random() или round().

Чтобы было нагляднее, представим функцию darken($color, $amount), которая, как понятно из названия, затемняет или применяет hover.

Фрагмент кода на SCSS

$awesome-blue: #2196F3;

a {
padding: 10px 15px;
background-color: $awesome-blue;
}

a:hover {
background-color: darken($awesome-blue,10%);
}

И он же на CSS

a {
padding: 10px 15px;
background-color: #2196F3;
}

a:hover {
background-color: #0c7cd5;
}

Вдобавок к огромному списку встроенных функций, вы также можете объявлять свои собственные.

Материалы по Sass

Заключение

Часть из приведённого выше, к слову, рано или поздно дойдёт и до обычного CSS, но пока препроцессоры - отличный способ облегчить процесс написания кода, и Sass - неплохой вариант для выбора.

Другие статьи по теме

Пишем небольшой проект на Bootstrap 4

Объяснение современного JavaScript для динозавров

МЕРОПРИЯТИЯ

Комментарии

ВАКАНСИИ

Добавить вакансию

ЛУЧШИЕ СТАТЬИ ПО ТЕМЕ