Знайомимось з 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%

Математика

На відміну від 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, на мій погляд - це вбудовані функції. Ви можете побачити повний список тут. ВІН ВЕЛИКИЙ.

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

Скористайтесь функцією darken(). Ви можете встановити колір та процент затемнення.

Вкладання

Корисною особливістю 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; }
        }
    }

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

Імпорт

Імпорт дозволяє розбити стилі в окремі файли і з легкістю імпортувати їх. Ми можемо імпортувати .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.

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

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

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

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%;
        }
    }

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

Директивні функції у 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;
    }