_{Переклад українською - Арсеній Чеботарьов - Київ 2018}

Sass Basics

Перед використанням Sass вам треба встановити ваш проект, Якщо ви бажаєте, можете просто передивитись текст нижче, але ми рекомендуємо вам спочатку встановити Sass. Перейдіть сюди якщо ви бажаєте вивчити, як встановити все потрібним чином.

• Передобробка

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

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

  Найбільш прямий спосіб зробити це - через ваш термінал. Коли Sass вже встановлений, ви можете компілювати ваш Sass до CSS використовуючи команду sass. Вам буде треба вказати Sas, який файл будувати та з якого, та куди виводити CSS. Наприклад, виконання sass input.scss output.css з вашого терміналу буде приймати одни файл Sass, input.scss, та компілює цей файл до output.css.

  Також ви можете доглядати окремі файли та каталоги за допомогою флага --watch. Флаг watch каже Sass дивитись на первинні файли щодо змін, та рекомпілювати CSS кожного разу, коли ви зберігаєте ваш  Sass. Якщо ви бажаєте доглядати (замість ручної побудови) ваш файл input.scss, ви зпочатку додаєте флаг watch до вашої команди, таким чином:

  sass --watch input.scss output.css

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

  sass --watch app/sass:public/stylesheets
  

  Sass буде наглядати за файлами в папці app/sass щодо змін, та компілює в CSS до папки public/stylesheets.

  ---

• Змінні

  Думайте про змінні як про спосіб зберігати інформацію, яку ви бажаєте повторно використовувати в листі стилів. Ви можете зберігати такі речі, як кольори, стеки шрифтів, або любе значення CSS, яке ви вважаєте можливо використати повторно. Sass використовує символ  $ щоб зробити з чогось змінну. Ось приклад:

  
  

  $font-stack:    Helvetica, sans-serif;
  $primary-color: #333;
  
  body {
    font: 100% $font-stack;
    color: $primary-color;
  }
  

  Коли це обробляється Sass, береться змінна, яку ми визначили для $font-stack та $primary-color, та виводить звичайний CSS, де зміст наших змінних підставлений в CSS. Це може бути вкрай потужним, коли робите з кольорами бренду, та підтримуєте їх узгодженими по всьому сайту.

  ---

• Вкладення

  Коли ви пишете HTML, ви, можливо, помітили, що він має виражену вкладену та візуальну ієрархію. CSS, з іншого боку, не має.

  Sass дозволяє вам вкладати CSS селектори в спосіб, що слідує тій же візуальній ієрархії вашого HTML. Будьте попереджені, що дуже вкладені привила будуть давати над-квалифікований CSS, що буде складно підтримувати, і загалом вважається поганою практикою.

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

  
  

  nav {
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
  
    li { display: inline-block; }
  
    a {
      display: block;
      padding: 6px 12px;
      text-decoration: none;
    }
  }
  

  Ви зауважите, що селектори ul, liта  a вкладені в селектор nav. Це гарний спосіб організувати ваш CSS, та зробити його більш читаємим.

  ---

• Частки

  Ви можете створити часткові файли Sass, що містять мали сніпети CSS, які потім ви можете вставити в інші файли Sass. Це гарний спосіб поділити на модулі ваш CSS, та допомагає утримувати речі простішими для підтримки. Частки просто є Sass файл, з підкресленням в якості першого символа імені. Ви можете назвати його, наприклад, _partial.scss. Підкреслення дозволяє Sass знати, що цей файл тільки файл-частка, що не треба обробляти для генерації в файл CSS. Частки Sass використовуються з директивою @import.

  ---

• Імпорт

  CSS має опцію імпорту, що дозволяє вам поділити ваш CSS на меньші, більш кервоані порції. Єдиний недолік в тому, що кожного разу, коли ви використовуєте @import в CSS, він створює новий HTTP запит. Sass будується зверху поточного CSS @import, але замість потребувати HTTP запит, Sass буде брати файл, який ви бажаєте імпортувати, та комбінує його з файлом, в який ви імпортуєте, так що ви будете мати один CSS файл, завантажений в веб переглядач.

  Давайте скажімо, ми маємо пару Sass файлів, _reset.scss та base.scss. Ми бажаємо імпортувати _reset.scss до base.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 'reset'; в файлі base.scss. Коли мі імпорутємо файл, нам не треба включати файл розширення .scss. Sass є досить розумним щоб додумати це за вас.

  ---

• Міксіни

  Деякі речі в CSS трохі нуднувато писати, особливо з CSS3 та багатьма вендорними префіксами, що існують. Міксіни дозволяють вам робити групи з CSS, які ви будете постійно використовувати на сайті. Ви можете навіть передавати значення, щоб зробити міксін більш гнучким.  Гарне використання міксіна для вендорних префіксів. Ось приклад для transform.

  • CSS
  • SCSS
  • Sass

  SCSS SYNTAX

  @mixin transform($property) {
    -webkit-transform: $property;
    -ms-transform: $property;
    transform: $property;
  }
  
  .box { @include transform(rotate(30deg)); }
  

  Для створення міксіну використовується деректива @mixin та ім'я. Ми назвали міксін transform. Ми також використовуємо змінну $property в дужках, так що ми можемо передати трансформацію, яку бажаємо застосувати. Після того, як ви створили міксін, потім ви можете використовувати його як CSS декларацію, починаючи з @include, за яким слідує ім'я міксіну.

  ---

• Розширення/наслідування

  Це одна з найбільш корисних можливостей Sass. Використання @extend дозволяє вам встановити властивості CSS з одного селектора для іншого. Це допомагає вашому Sass дуже DRY. В нашому прикладі ми збираємось створити просту послідовність повідоилень для помилок, попереджень та успішних операцій, використовуючи іншу можливість, що іде рука в руку разом з розширенням, класи заміщення. Клас заміщення є особливим різновидом класів, що тільки друкує коли він розширений, та може допомогти утримувати ваш компільований CSS чистим та акуратним.

  /* Цей CSS буде друкувати, оскільки %message-shared розширений. */
  %message-shared {
    border: 1px solid #ccc;
    padding: 10px;
    color: #333;
  }
  
  // Цей CSS не буде друкувати, оскільки %equal-heights не розширюється.
  %equal-heights {
    display: flex;
    flex-wrap: wrap;
  }
  
  .message {
    @extend %message-shared;
  }
  
  .success {
    @extend %message-shared;
    border-color: green;
  }
  
  .error {
    @extend %message-shared;
    border-color: red;
  }
  
  .warning {
    @extend %message-shared;
    border-color: yellow;
  }
  

  Цей код каже, що .message, .success, .error та .warning буде поводитись як %message-shared. Це означає що %message-shared буде відображуватись там, де відображуться.message, .success, .error та .warning. Магія відбувається в згенерованому CSS, уоли кожний з ціх класів буде отримувати ті самі властивості CSS, що і %message-shared. Це допомагає вам уникнути написання багатьох імен класів для HTML елементів.

  Ви можете розширювати більш прості CSS селектори, ніж класи заміщення в Sass, але використання заміщень є простішим способом переконатись, що ви не розширюєте клас, що вкладений будь-де в ваших стилях, що може призвести до небажаних селекторів в вашому CSS.

  Зауважте, що CSS в %equal-heights не був згенерований, оскільки %equal-heights ніде не був розширений.

  ---

• Оператори

  Виконання обчислень в вашому CSS є дуже корисним. Sass має декілька стандадртних операцій, як +, -, *, /, та  %. В нашому прикладі ми збираємось виконати деякі прості обчислення, для пошуку ширини для aside & article.

  .container {
    width: 100%;
  }
  
  article[role="main"] {
    float: left;
    width: 600px / 960px * 100%;
  }
  
  aside[role="complementary"] {
    float: right;
    width: 300px / 960px * 100%;
  }
  

  Ми створили дуже просту гнучку решітку, базовані на 960px. Операції в Sass дозволяють нам робити дещо, як брати значення піксулів, та конвертувати їх на відсотки, без  багатого шуму.