Знайомимось з SASS

Хочете вивчити Sass, але ніяк не складається? Тоді читайте далі, тому що сьогодні ми збираємося розглянути особливості Sass і деякі цікаві речі, які ви можете робити з його допомогою.
 

Що таке Sass?

Sass (Syntactically Awesome Style Sheets) - це CSS-препроцесор, Він надає додатковий набір функцій, що робить процес написання стилів більш простим та швидким.
 

Як він працює?

Цікаве питання. Є кілька способів компілювання Sass:

• Оригінальний бінарний файл Ruby Sass. Встановіть його з gem install sass і скомпілюйте, запустивши sassc myfile.scss myfile.css

• GUI-додатки, такі як Hammer, CodeKit, або Compass;

• Мій особистий фаворит libsass - швидкий компілятор Sass, написаний на C. Ви можете встановити libsass через NPM з node-sass (npm install node-sass).

Який з них слід використовувати? Залежить від того, чим ви займаєтесь. Якщо Ви не людина “командного рядка”, то GUI для вас.

Якщо вам просто потрібно попрактикуватися або поділитися прикладами, ідеальний вибір - Sassmeister. Це веб-Sass майданчик, який ми будемо використовувати в цій статті.
 

SASS або SCSS?

Коли вийшла перша версія Sass, основний синтаксис відрізнявся від CSS. Замість фігурних дужок були відступи, використання крапки з комою було необов'язковим, застосовувались стенографічні (скорочені) оператори.

Деякі люди не могли швидко освоїти синтаксис, тому у 3 версії Sass змінив основний синтаксис до .scss. SCSS вигладає як CSS, але має всі можливості Sass.

Ви можете застосовувати оригінальний синтаксис, якщо хочете. В статті ми розглядатимемо .scss.

 

Навіщо використовувати Sass?

Як я вже наголошував, Sass робить написання CSS простішим і швидшим. Ви можете отримати більше, написавши менше коду, і зберегти свій час.

 

Налаштування

• Встановити компілятор на вибір і створити style.scss файл;

Або

• Використовувати Sassmeister.

 

Змінні

Sass приносить змінні в CSS.

Допустимі значення змінних: числа, рядки, кольори, null, списки і карти.

Змінні в Sass поширюються за допомогою символу $. Давайте створимо нашу першу змінну:

$primaryColor: #eeffcc;

 

При компіляції ми просто встановлюємо змінну в межах області видимості, змін в CSS не відбувається. Надалі, ви можете використовувати її:

$primaryColor: #eeffcc;
body {
    background: $primaryColor;
}

 

Sass має область видимості змінної, якщо ви оголошуєте змінну всередині селектора, її область дії буде обмежена цим селектором.

$primaryColor: #eeccff;
body {
  $primaryColor: #ccc;
  background: $primaryColor;
}
p {
  color: $primaryColor;
}
// Після компіляції, селектор нашого параграфа матиме колір #eeccff

Але що, якщо ми хочемо встановити глобальну змінну в декларації? Для цього слід використовувати !global:

$primaryColor: #eeccff;
body {
  $primaryColor: #ccc !global;
  background: $primaryColor;
}
p {
  color: $primaryColor;
}
// При компіляції,колір параграфа буде #ccc

 

Ще один дуже корисний інструмент, зокрема, при написанні mixins - !default. Це дозволяє нам переконатися, що існує значення за замовчуванням для змінної, якщо значення вказано - воно буде перезаписане:

$firstValue: 62.5%;
$firstValue: 24px !default;
body {
    font-size: $firstValue;
}
// розмір шрифта для body = 62.5%

 

Спробуйте позмінювати щось, щоб побачити, як все працює:

 

Play with this gist on SassMeister.

 

Математика

На відміну від CSS, Sass дозволяє нам використовувати математичні вирази! Це супер корисно в mixins, і дозволяє нам робити деякі дійсно класні речі.

Підтримуються оператори:

• + Додавання;

• - Віднімання;

• / Ділення;

• * Множення;

• % Залишок від ділення;

• == Рівність;

• != Нерівність.

Перед тим, як рухатися далі, я хочу відзначити два потенційних "підводних камені".

По-перше, при діленні, знак (/) потрібно обернути в дужки, так як цей символ також використовується в стенографічних CSS властивостях шрифту (наприклад, font: 14px/16px).

$fontDiff: (14px/16px);

 

По-друге, ви не можете змішувати значення:

$container-width: 100% - 20px;

 

Наведений вище приклад не буде працювати. Для цього конкретного прикладу ви могли б використовувати CSS функцію calc, так як вона повинна бути інтерпретована під час рендеринга.

Повертаючись до математики, давайте створимо динамічну декларацію стовпця, виходячи з базової ширини контейнера:

$container-width: 100%;
.container {
  width: $container-width;
}
.col-4 {
  width: $container-width / 4;
}
//  Компілюється в:
//  .container {
//   width: 100%;
//  }
//
//  .col-4 {
//      width: 25%;
//  }

 

Круто? Перевірте у наведеному нижче прикладі, як ми можемо більш ефективно використовувати Sass математику для додавання полів. Пограйте зі значеннями.

Play with this gist on SassMeister.

 

Функції

Краща частина Sass, на мій погляд - це вбудовані функції. Ви можете побачити повний список тут. ВІН ВЕЛИКИЙ.

Чи було у вас таке, що ви хотіли створити гарну на вигляд кнопку і витрачали години, щоб підібрати для неї потрібні ефекти та тіні?

Скористайтесь функцією darken(). Ви можете встановити колір та процент затемнення. Прогляньте демо, щоб побачити, як це круто:
 

Play with this gist on SassMeister.

 

Вкладання

Корисною особливістю Sass є можливість вкладання декларацій. Це означає, що ви здатні мати декларації всередині декларації. У звичайному CSS ми робимо так:

.container {
    width: 100%;
}
.container h1 {
    color: red;
}

Але в Sass ми можемо отримати такий же результат, написавши:

.container {
    width: 100%;
    h1 {
        color: red;
    }
}

 

Що, якщо ми хочемо посилатися на батьківський елемент? Це досягається за допомогою символа &(amp);.Погляньте, як ми можемо використовувати це, щоб додати псевдо-селектори для анкерних елементів:

a.myAnchor {
    color: blue;
    &;:hover {
        text-decoration: underline;
    }
    &;:visited {
        color: purple;
    }
}

 

Тепер ми знаємо, що таке вкладання.

Якщо ми хочемо виконати протилежну дію, нам потрібно використовувати @at-root директиви. Нехай ми маємо таку структуру вкладеності:

.first-component {
    .text { font-size: 1.4rem; }
    .button { font-size: 1.7rem; }
    .second-component {
        .text { font-size: 1.2rem; }
        .button { font-size: 1.4rem; }
    }
}

Play with this gist on SassMeister.

 

Вкладення - дійсно відмінний спосіб заощадити час і зробити ваші стилі більш читабельними, але пам'ятайтеся правило: не більше, ніж чотири рівня вкладеності.
 

 

Імпорт

Імпорт дозволяє розбити стилі в окремі файли і з легкістю імпортувати їх. Ми можемо імпортувати .scss файли за допомогою директиви @import:

@import "grids.scss";

 

Вказувати розширення необов'язково:

@import "grids";

 

Sass компілятори також включають в себе концепцію "частин". Якщо .sass або .scss файл має підкреслення (наприклад, _partial.scss), він не компілюється в CSS. Це корисно, якщо файл існує тільки для того, щоб імпортувати його в головний файл style.scss.
 

Extend і Заповнювачі

@extend директива є відмінним способом, щоб успадкувати вже існуючі стилі.

.input {
  border-radius: 3px;
  border: 4px solid #ddd;
  color: #555;
  font-size: 17px;
  padding: 10px 20px;
  display: inline-block;
  outline: 0;
}
.error-input {
  @extend .input;
  border:4px solid #e74c3c;
}

 

Зверніть увагу, що це не копіювання стилів з .input в .error-input. Погляньте на CSS в цьому прикладі, щоб побачити результат компіляції:

Play with this gist on SassMeister.

 

Але що робити, якщо ми хочемо продовжити декларацію з набором стилів, які вже не існують? Нам потрібен заповнювач.

%input-style {
    font-size: 14px;
}
input {
    @extend %input-style;
    color: black;
}

 

Заповнювач працює з префіксом ім'я класу, додаючи символ %.В результаті, елементи опиняються в одному блоці.

Приклад нижче працює з заповнювачем:

Play with this gist on SassMeister.

 

Mixins

Mixin директива є неймовірно корисною особливістю Sass, вона дозволяє включати стилі так само як і @extend, але з можливістю підтримки й інтерпретації аргументів.

Sass використовує @mixin директиви для визначення mixins і директиви @include, щоб їх використовувати. Побудуємо простий mixin, який ми зможемо використовувати для медіа-запитів!

Перший крок - це визначення нашого mixin:

@mixin media($queryString){
}

 

Ми викликаємо наш mixin і додаємо $queryString аргумент. Після додавання mixin, ми можемо додати рядковий аргумент, який буде динамічно рендиритись.

@mixin media($queryString){
    @media #{$queryString} {
      @content;
    }
}

Ми хочемо, щоб наш рядковий аргумент з'являвся там де нам потрібно, ми використовуємо Sass синтаксис інтерполяції, #{}. Коли ви додаєте змінну у фігурні дужки, вона не рахується, а виводиться.

Ще один шматок нашої головоломки - @content директиви. Коли ви обертаєте mixin навколо вмісту за допомогою фігурних дужок, обгорнутий контент стає доступним через @content директиву.

І, нарешті, давайте використаймо mixin з @include:

.container {
    width: 900px;
    @include media("(max-width: 767px)"){
        width: 100%;
    }
}

 

Прогляньте демо, щоб побачити, як наш новий mixin виконує рендер:

Play with this gist on SassMeister.

 

Директивні функції

Директивні функції у Sass схожі на mixins, але замість повернення розмітки, вони повертають значення через @return. Вони можуть бути використані для DRY (don't repeat yourself) вашого коду, і зробити його більш зручним для читання.

Давайте підемо далі і створимо директивну функцію, щоб прибрати наші grid-розрахунки з grid-демо:

@function getColumnWidth($width, $columns,$margin){
    @return ($width / $columns) - ($margin * 2);
}

Тепер ми можемо використовувати цю функцію в коді нижче:

$container-width: 100%;
$column-count: 4;
$margin: 1%;
.container {
  width: $container-width;
}
.column {
  background: #1abc9c;
  height: 200px;
  display: block;
  float: left;
  width: getColumnWidth($container-width,$column-count,$margin);
  margin: 0 $margin;
}

 

Демо

Тепер в нашому розпорядженні є всі вищезгадані інструменти. Давайте створимо наш власний grid-фреймворк.

Почнемо з створення карти налаштуваннь:

$settings: (
    maxWidth: 800px,
    columns: 12,
    margin: 15px,
    breakpoints: (
        xs: "(max-width : 480px)",
        sm: "(max-width : 768px) and (min-width: 481px)",
        md: "(max-width : 1024px)  and (min-width: 769px)",
        lg: "(min-width : 1025px)"
    )   
);

 

Далі давайте напишемо mixin, який буде рендерити наш фреймворк:

@mixin renderGridStyles($settings){
}

 

Нам потрібно візуалізувати розмітку для кожної точки зупину, тож давайте перебиремо їх і викличемо наш медіа-mixin. Використаймо map-get метод, щоб отримати значення точок, і нашу @each директиву, щоб виконати ітерації через отримані значення:

@mixin renderGridStyles($settings){
  $breakpoints: map-get($settings, "breakpoints");
  @each $key, $breakpoint in $breakpoints {
    @include media($breakpoint) {
    }
  }
}

 

Ми повинні отримати фактичну сітку розмітки з ітерації, тому давайте створимо renderGrid mixin. Скористаємось map-get методом, щоб отримати карту значень і @while директиву для перебору стовпців з $i в якості індексу. Ми рендеримо ім'я класу за допомогою інтерполяції.

@mixin renderGrid($key, $settings) {
  $i: 1;
  @while $i <;= map-get($settings, "columns") {
    .col-#{$key}-#{$i} {
      float: left;
      width: 100% * $i / map-get($settings,"columns");
    }
    $i: $i+1;
  }
}

Додаємо контейнер та стилі:

.container {
    padding-right: map-get($settings, "margin");
    padding-left: map-get($settings, "margin");
    margin-right: auto;
    margin-left: auto;
}
.row {
    margin-right: map-get($settings, "margin") * -1;
    margin-left: map-get($settings, "margin") * -1;
}

 

Готово! Перевірте фрейморк, який ми отримали:

Play with this gist on SassMeister.

 

Sass - це надзвичайно потужний інструмент, який допомагає робити деякі дійсно неймовірні речі.