Стиль сайту за допомогою SASS

Ви можете багато чого зробити з CSS - можливо, більше, ніж ви можете подумати, - але шановна мова шанувальника має свої обмеження. У сучасному веб-проекті з модулями NPM, рамки JavaScript, ES6 і більше, це може відчувати себе дещо анахронічним, щоб повернутися до написання ванільної CSS.

На щастя, є варіанти, що дозволяють використовувати інші мови, які складають CSS. Звернуті до "Preprocessors", ці інструменти інтегруються у процес створення веб-побудови та створюють доступні аркуші стилів з будь-якої вищої мови розширення.

SASS (синтаксично чудові листи стилю) - це один з найпопулярніших з цих варіантів - Читати далі з нашим керівництвом Що таке сас? SASS додає багато цінних нових функцій мови, які не є (наразі), доступними в CSS, щоб зробити ваші сайти та додатки більш підтримувати. До них відносяться такі речі, такі як директиви, які звучать, що звучить, але насправді є досить простими, і ми подивимося на них у цьому підручнику. Якщо ви хочете зберегти речі навіть простіше, ви можете користувачеві a Веб-будівельник .

• Прохолодні анімації CSS для відтворення

Насправді є два різних синтаксис для SASS, який використовує розширення файлу .SSSS, і той, який використовує .SASS. Перший виглядає більше як CSS (насправді, всі файли .css є дійсними .scss файлів), тоді як останнє усуває кронштейни CSS та комолови на користь відступу та нових ліній. Ми зосередимося на .SCSS, але вибір просто до особистого уподобання. Оновлення вашого сайту? Переконайтеся, що ваш веб хостинг Сервіс робить те, що вам потрібно, і отримати ваш хмара зберігання Право.

Завантажте файли для цього навчального посібника (випуск 282)

01. Налаштуйте компілятор

Використання SASS істотно потребує компілятора. Найпростіший спосіб зробити це буде в командному рядку. Ви можете зробити це використання HomeBrew. Компілятор SASS реалізується на кількох різних мовах, а HomeBrew встановить версію DART, яка швидко.

brew install sass/sass/sass

02. Створіть файл SASS

Давайте спробуємо створити простий файл SASS, щоб побачити компілятор у дії. Одним з найпростіших концепцій в SASS є змінні, які можна вказати один раз з a $ Префікс, а потім використовуються у вашому коді. Ми створимо sass-input.scss .

 $ Текст-колір: #CCCCCC;
тіло {
    Колір: $ text-color;
} 

03. Компіляція командного рядка

Тепер ми можемо запустити компілятор SASS у командному рядку, щоб перетворити файл .SCSS у вихід CSS. Ви помітите у вихідному файлі, що змінні зникнуть, і ми просто залишилися з стандартним синтаксисом CSS, який можна використовувати браузер.

 SASS-SASS-invent.sssSS CSS-Output.css 

04. Автоматизувати свою збірку

Це чудово, але ви не хочете запускати компілятор SASS вручну кожного разу, коли ви внесли зміни. Одним з варіантів - це, щоб він міг слухати зміни файлів у каталозі та автоматично перекомпілюйте виведення до іншого каталогу (збереження імен файлів). Це також ефективно дозволяє вам відокремити файл вашого джерела .SCSS з вашого Вбудованого CSS.

 mkdir src
mkdir src / sass
Мкдір громадськість
Mkdir Public / CSS
Sass --Watch SRC / SASS /: Public / CSS /

05. Грайте з SASS Styleing

Тепер давайте подивимося на простий майданчик стартера, який ми можемо використовувати, щоб грати з SASS Style. Ми можемо розпочати роботу, клонування нестрильованого прикладу сайту. Ключовим, щоб відзначити, що наша HTML-сторінка нічого не знає про SASS. Він має єдиний пункт входу CSS, який ми створимо далі.

 CD Public
curl -o index.html https: // сировина.
githubusercontent.com/simon-a-j/sass-
Підручник /
master / public / index.html 

06. Основний таблиця стилів

Ми використовуємо Styles.css як наш основний пункт входу CSS, який пізніше ми будемо використовувати для імпорту інших модулів. Це означає, що нам потрібно сказати SASS, щоб генерувати цей файл, тому нам також потрібно створити файл styles.sks у нашій папці SRC / SASS. Якщо ви працюєте sass --watch Як і раніше, це автоматично складеться в CSS в Публічні / CSS Папка та освіжаючий ваш сайт покаже свої зміни. Спробуйте зробити деякі модифікації та освіжаючи сторінку HTML у браузері, коли ви йдете.

 // Styles.scs
тіло {
  Шрифт-Сім'я: SANS-Serif;
  Текст-вирівнювання: Центр;
}

07. Керування кольоровою схемою

Давайте подивимося, як SASS може допомогти нам управляти кольоровою схемою для сайту. Загальне мати палітру з п'яти або шести кольорів для веб-сторінки. Ми можемо це зробити _colours.scss . Префікс підкреслення повідомляє SASS не компілювати це в новий HTML-файл (a "частковий"). Але ми можемо використовувати його трохи по-різному.

 // _colours.scss
$ color-bearch: # 231651;
$ color-instate: # 2374AB;
$ Color-Light: # D6FFF6;
$ color-highlight1: # 4DCCBD;
$ Color-Highlight2: # FF8484;

08. Використовуйте змінні кольору

Щоб використовувати ці кольорові змінні, які ми тільки що налаштували, ми можемо сказати SASS, щоб імпортувати вміст _colours.scss в наш основний аркуш стилю. Ми робимо це за допомогою @import заява. Як тільки ви це зробили, зверніть увагу, як змінні будуть вирішені в рамках вихідного файлу CSS.

 // Styles.scs
@import "_colours.scs";
тіло {
  Шрифт-Сім'я: SANS-Serif;
  Текст-вирівнювання: Центр;
  Фон: лінійний градієнт (155deg,
$ кольорово-початковий 70%, $ кольоровий
70%);
  Колір: $ Color-Light;
  Мін-висота: 100Вх;
}
h1 {
    Колір: $ Color-Highlight1;
}
h2 {
  Колір: $ color-highlight2;
}

09. Стилі гнізда

Ще однією корисною особливістю SASS є здатність гніздити стилі. Тобто, ви можете вказати стиль для елемента, який застосовується лише, якщо цей елемент виникає в межах батьківського елемента. Давайте використовувати це, щоб диференціювати наш стиль зв'язків залежно від того, чи вони з'являються у заголовку або тілі.

 А {
  Колір: $ кольорово-вторинне;
}
.Profile-заголовок {
  a {
    шрифт: 16px;
    маржа-ліворуч: 10px;
    маржа-праворуч: 10px;
    Прокладка: 10px;
    Прикордонний радіус: 5px;
    Колір: $ Color-Light;
    Колір фону: $ кольоровий;
  }
}

10. Зробіть чутну сітку

Тепер давайте влаштовуємо наш вміст у формат чуйності. SASS має пару функцій, щоб зробити це значно легше керувати. А також використання змінних, щоб вказати наші точки зупинки, ми можемо гніздити @media Запити в межах інших стилів, що робить поведінку, специфічну для розміру екрана набагато читабельними.

 $ Creampoint: 800px;
.profile-тіло {
  Дисплей: Flex;
  Вирівнювання-елементи: розтягування;
  Обґрунтування - вміст: пробіл;
  Маржа-вершина: 32px;
  маржа-ліворуч: 10vw;
  маржа-праворуч: 10vw;
  Екран @media і (Max-ширина:
$ treampoint) {
      Напрямок Flex: колонка;
  }
}
.Profile-розділ {
  Колір фону: $ color-highlight1;
  Колір: $ color-bearch;
  маржа: 16px;
  Прикордонний радіус: 10px;
  Ширина: 340px;
  .profile-вміст {
    Прокладка: 20px;
  }
  Екран @media і (Max-ширина:
$ treampoint) {
    Ширина: 100%;
  }
}

11. Впровадити мікс

Mixins є ще однією потужною функцією SASS, яку ви можете придумати як спосіб визначення функцій багаторазової таблиці. Mixin визначається один раз, може приймати параметри, і потім може бути викликане будь-де у вашому SASS-коду. Один випадок для цього полягає в тому, щоб обробляти префіксування постачальника. Якщо ми хочемо, щоб CSS перетворюється на роботу старших браузерів, це може вимагати -Вип Наприклад, префікс для Chrome та Safari. Давайте визначимо мікс, який піклується про це для нас.

12. Mixins і змінні

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

 $ style1: (передній план: $ color-light,
фон: $ кольоровий вторинний);
$ style2: (передній план: $ color-bearch,
Фон: $ color-highlight1);
$ style3: (передній план: $ color-bearch,
Фон: $ color-highlight2);
@Mixin Content-Style ($ Foreger,
$ background) {
  Колір: $ передній план;
  Колір фону: $ background;
} 

13. Використовуйте новий мікс

 .Profile-заголовок {
  a {
    @ include content-style ($ style1 ...);
    // ...
  }
}
.Profile-розділ {
    @Vlude Content-Style ($ Style2 ...);
  // ...
}

14. Зрозумійте спадщину

Ще одна дуже потужна особливість SASS - успадкування. Зараз у нас є два різних стилі для посилань на нашій сторінці. Якщо ми хочемо використовувати спільні стилі як на обох випадках, а не копіювання та вставлення CSS, чому ми не використовуємо клас заповнювача, позначений "%", який може бути продовжений обома, дозволяючи їм успадкувати свої стилі?

% link-shared {
  шрифт: 16px;
  маржа-ліворуч: 10px;
  маржа-праворуч: 10px;
  Прокладка: 10px;
  Прикордонний радіус: 10px;
}

15. Розширюйте класи

Тепер ми можемо розширити клас зі спільного зв'язку, щоб визначити стиль посилання на нашому сайті. Це починає виглядати досить елегантним. Ми визначаємо, яка посилання взагалі виглядає як тільки один раз, повторно використовувати його у всьому, і вкажіть кольори з палітри для кожної посилання за допомогою Mixin.

 .Profile-заголовок {
  a {
    @ inquend% link-shared;
    @ include content-style ($ style1 ...);
  }
}
a {
  @ inquend% link-shared;
  @ include content-style ($ style3 ...);
}

16. Змінити тему

Тепер давайте подивимося на те, наскільки легка Sass робить його, щоб змінити тему нашого сайту. Поточні кольори можуть бути недосконалими. Ми не можемо тільки змінювати змінні кольорів, але ми також можемо використовувати деякі функції SASS для процедурно генерування кольорів, які відповідають первинним вибором.

 // _colours.scss
$ color-bearch: # 2E1F27;
$ Color-Secondary: Lighten ($ Color-Priender,
25%);
$ color-light: освітлення ($ color-bearch,
75%);
$ Color-Highlight1:
полегшення (доповнення ($ color-primar), 50%);
$ color-highlight2:
освітлення (доповнення ($ кольорово-вторинне), 50%);

17. Виберіть новий набір кольорів

Тепер ми можемо змінити всю колірну схему для сайту просто, вказавши нове значення первинного кольору в _colours.scss файл. Дайте спробувати, експериментуючи з альтернативними кольорами. Ми також можемо мати Sass Rangeomise (але пам'ятайте, що це стосується точки, на якому створюється ваш сайт, а не виконується). Ви також можете спробувати налаштувати логіку, яку ми використовуємо, щоб вивести інші кольори в темі від первинного.

 $ червоний: випадковий (255);
$ зелений: випадковий (255);
$ синій: випадковий (255);
$ color-bearch: rgb ($ red, $ green, $ blue); 

18. Використовуйте бібліотеки

Модульна система SASS також робить її дуже простою для використання сторонніх бібліотек з мінімальними зусиллями, а також без доставки великих файлів виконання до кінцевих користувачів. Давайте спробуємо бібліотеку кутів країн, яку ми можемо використовувати для створення похилих країв для об'єктів на нашій сторінці.

 Git Clone https://github.com/josephfusco/
angled-edges.git src / sass / кутові краю

19. Кутальні краю змішують

Ми можемо імпортувати кутові краю так само, як ми зробили для нашої кольорової схеми часткового. Потім він використовує через мікс, який судно з бібліотекою. Давайте спробуємо це в нашому класі профілю.

 @import "кутові краю / _angled-edges.scs";
.Profile-розділ {
  @ blude кутовий край ("зовнішня нижня",
"Нижнє право", $ Color-Highlight1);
  @ thrude angled-beed ("зовнішній вершини",
"Верхній праворуч", $ color-highlight1);
  Маржа: 120px 16px 120px 16px;
  // ...
}

20. Форматування виведення

Давайте закінчимо, дивлячись на вихідний SASS генерує. Якщо ви відстежуєте свої файли CSS, як ми внесли зміни, ви помітите, що вони залишаються цілком читаними. Однак ви також можете мати SASS build Condensed CSS, що є менш читаним людським, але все ще готовий до відправки. Ви можете зробити це за допомогою » Прапор командного рядка.

 SASS SRC / SASS /: Public / CSS / --Style
стиснутий 

21. Більше SASS

Ми зараз вивчили досить багато особливостей SASS, і наш сайт не виглядає занадто поганим. Сподіваємось, ви починаєте бачити, як SASS допомагає нам розвивати більш підтримувані листи стилів. Ми не охопили будь-яку особливість мови - з ним є ще багато корисних функцій, а також сучасні функції, такі як директиви контролю (такі як @IF , @for і @While ), які часто використовуються для створення складних функцій бібліотеки. В цілому, пам'ятайте, що SASS є цілком стилістичним перевагою. Ви можете зробити все, що ми бачили з чистим CSS, якщо вам подобається, але ви обов'язково повинні думати про попередню обробку, оскільки ваша робота стає більш складною.

Ця стаття була опублікована у випуску 282 Веб-дизайнер . Купувати випуск 282 або Підписатися тут .

Читати далі:

• 10 Дивовижні нові технології CSS
• 3 блискучі нові властивості CSS, щоб спробувати сьогодні
• Великі веб-сайти прокрутки паралакс