Sass vs LESS vs Stylus: Вибір препроцесора

15 хв. читання

Напевно багато з вас чули про CSS препроцесор. Писати код, використовуючи його потужні можливості - справді чудово і захоплююче. Та що ж таке той препроцесор? Який препроцесор обрати? Сьогодні ми в цьому розберемося. В цій статті ми розглянемо деякі можливості та переваги використання трьох різних препроцесорів – Sass, LESS, та Stylus.

Вступ

Препроцесор компілює код в CSS, що працює однаково у всіх браузерах.

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

Давайте почнемо!

Синтаксис

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

Sass & LESS

Як Sass, так і LESS використовують стандартний CSS синтаксис. Це робить їх надзвичайно простими для розуміння. Sass використовує розширення .scss, LESS – .less. Простий Sass чи LESS файл виглядає так:

/* style.scss or style.less */
h1 {
  color: #0982C1;
} 

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

/* style.sass */
h1
  color: #0982c1

Stylus

Синтаксис Stylus є більш різноманітним. Використовуючи розширення файлу .styl, Stylus допускає стандартний CSS синтаксис, але також пропонує інші варіанти, де дужки, двокрапки та крапки з комою є необов'язковими. Наприклад:

/* style.styl */
h1 {
  color: #0982C1;
}
 
/* без дужок */
h1
  color: #0982C1;
 
/* без крапок та двокрапок */
h1
  color #0982C1

Також можна використовувати декілька варіантів в одному стилі, тобто наступний код буде скомпільований без помилок:

h1 {
  color #0982c1
}
h2
  font-size: 1.2em

Змінні

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

Sass

Sass змінні оголошуються з символом $ перед ім'ям, команда присвоювання – двокрапка(:). Наприклад:

$mainColor: #0982c1;
$siteWidth: 1024px;
$borderStyle: dotted;
 
body {
  color: $mainColor;
  border: 1px $borderStyle $mainColor;
  max-width: $siteWidth;
}

LESS

LESS змінні точно такі ж, як і Sass, але назва змінної починається з символу «@» :

@mainColor: #0982c1;
@siteWidth: 1024px;
@borderStyle: dotted;
 
body {
  color: @mainColor;
  border: 1px @borderStyle @mainColor;
  max-width: @siteWidth;
}

Stylus

Оголошуються Stylus змінні без всяких символів перед ім'ям, хоча дозволяється використання символу $. Не вимагається наявність крапки з комою в кінці, знак присвоювання – дорівнює (=). Важливо зауважити, що змінні з символом @ Stylus компілює, але вони не є дійсні.Такого краще уникати.

mainColor = #0982c1
siteWidth = 1024px
$borderStyle = dotted
 
body
  color mainColor
  border 1px $borderStyle mainColor
  max-width siteWidth

Компільований CSS

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

body {
  color: #0982c1;
  border: 1px dotted #0982c1;
  max-width: 1024px;
}

Вкладеність

При використанні вкладеності в звичайному CSS, доводиться багато разів переписувати ім'я батьківського елемента. Це доволі важко.

section { 
  margin: 10px;
}
section nav { 
  height: 25px;
}
section nav a { 
  color: #0982C1;
}
section nav a:hover {
  text-decoration: underline;
}

Препроцесор вирішує цю проблему: ми можемо писати стиль дочірнього елемента всередині дужок батьківського компонента.

Sass, LESS, & Stylus

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

section {
  margin: 10px;
 
  nav {
    height: 25px;
 
    a {
      color: #0982C1;
   
      &:hover {
        text-decoration: underline;
      }
    }
  }
}

Компільований CSS

Скомпільований CSS код з прикладу вище:

section {
  margin: 10px;
}
section nav {
  height: 25px;
}
section nav a {
  color: #0982C1;
}
section nav a:hover {
  text-decoration: underline;
}

Домішки

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

Sass


@mixin error($borderWidth: 2px) {
  border: $borderWidth solid #F00;
  color: #F00;
}
 
.generic-error {
  padding: 20px;
  margin: 4px;
  @include error();
}
.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  @include error(5px);
}

LESS

.error(@borderWidth: 2px) {
  border: @borderWidth solid #F00;
  color: #F00;
}
 
.generic-error {
  padding: 20px;
  margin: 4px;
  .error();
}
.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  .error(5px);
}

Stylus

error(borderWidth= 2px) {
  border: borderWidth solid #F00;
  color: #F00;
}
 
.generic-error {
  padding: 20px;
  margin: 4px;
  error(); 
}
.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  error(5px);
}

Компільований CSS

Всі три препроцесори скомпілюють вищенаведений код в однаковий CSS файл.

.generic-error {
  padding: 20px;
  margin: 4px;
  border: 2px solid #f00;
  color: #f00;
}
.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  border: 5px solid #f00;
  color: #f00;
}

Спадкування

При написанні звичного CSS коду, ми могли б використовувати наступний код, щоб застосувати один і той же стиль до кількох елементів відразу:

p,
ul,
ol {
}

Це працює чудово, але якщо окремо потрібно буде додати стиль до деяких елементів, необхідно буде створити ще по одному селектори для кожного. Погодьтеся, це складніше підтримувати і код є доволі незрозумілим. Щоб уникнути цього, можна використовувати наслідування. Спадкування - це здатність одних CSS селекторів наслідувати властивості інших.

Sass & Stylus

.block {
  margin: 10px 5px;
  padding: 2px;
}
 
p {
  @extend .block; /* Успадкує стиль з '.block' */
  border: 1px solid #EEE;
}
ul, ol {
  @extend .block; /* Успадкує стиль з '.block' */
  color: #333;
  text-transform: uppercase;
}

Компільований CSS (Sass & Stylus)

.block, p, ul, ol {
  margin: 10px 5px;
  padding: 2px;
}
p {
  border: 1px solid #EEE;
}
ul, ol {
  color: #333;
  text-transform: uppercase;
}

LESS

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

.block {
  margin: 10px 5px;
  padding: 2px;
}
 
p {
  .block;
  border: 1px solid #EEE;
}
ul, ol {
  .block;
  color: #333;
  text-transform: uppercase;
}

Компільований CSS (LESS)

.block {
  margin: 10px 5px;
  padding: 2px;
}
p {
  margin: 10px 5px;
  padding: 2px;
  border: 1px solid #EEE;
}
ul,
ol {
  margin: 10px 5px;
  padding: 2px;
  color: #333;
  text-transform: uppercase;
}

Як бачимо, стиль з .block був вставлений в селектори, яким ми хотіли надати наслідування.

Імпорт

У CSS спільноті, імпортування є несхвальним, тому що воно вимагає кількох HTTP запитів. Проте, імпорт, використовуючи препроцесори, працює зовсім інакше. Якщо ви імпортуєте файл, використовуючи будь-який з трьох препроцесорів, вони включать імпортований файл в CSS код протягом компіляції, створюючи при цьому лише один CSS файл. Майте на увазі, що імпортування звичайного .css файлу виконується так: @import 'file.css';. Домішки і змінні також можна імпортувати і використовувати в основному коді. Імпортування надає можливість створювати структури файлів.

Sass, LESS, & Stylus

body {
  background: #EEE;
}
@import "reset.css";
@import "file.{type}";
 
p {
  background: #0982C1;
}

Компільований CSS

@import "reset.css";
body {
  background: #EEE;
}
p {
  background: #0982C1;
}

Color функції

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

Sass

lighten($color, 10%);
darken($color, 10%);
 
saturate($color, 10%);
desaturate($color, 10%);
 
grayscale($color);
complement($color);
invert($color);
 
mix($color1, $color2, 50%);

Це лише маленький список наявних color функцій в Sass, повний список доступних Sass color функцій можна знайти в документації

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

$color: #0982C1;
 
h1 {
  background: $color;
  border: 3px solid darken($color, 50%);
}

LESS

lighten(@color, 10%);
darken(@color, 10%); 
saturate(@color, 10%);
desaturate(@color, 10%);
spin(@color, 10);
spin(@color, -10);
mix(@color1, @color2);

Повний список LESS функцій можна знайти в документації. Приклад, як можна використовувати color функції в LESS:

@color: #0982C1;
 
h1 {
  background: @color;
  border: 3px solid darken(@color, 50%);
}

Stylus

lighten(color, 10%);
darken(color, 10%);
saturate(color, 10%);
desaturate(color, 10%);

Повний список Stylus функцій можна знайти в документації. Приклад використання Stylus color функцій:

color = #0982C1
 
h1
  background color
  border 3px solid darken(color, 50%)

Операції

Препроцесор надає можливість використання математичних розрахунків в CSS коді.

Sass, LESS, & Stylus

body {
  margin: (14px/2);
  top: 50px + 100px;
  right: 100px - 50px;
  left: 10 * 10;
}

Практичне застосування

Ми розглянули багато особливостей і функції препроцесорів, але ми не показали практичних прикладів використання препроцесора. Наприклад:

Vendor Prefixes

Особливо необхідно використовувати препроцесор при створенні Vendor Prefixes – це економить багато часу і зусиль. Приклад реалізації:

Sass

@mixin border-radius($values) {
  -webkit-border-radius: $values;
     -moz-border-radius: $values;
          border-radius: $values;
}
 
div {
  @include border-radius(10px);
}
```	

_LESS_

.border-radius(@values) { -webkit-border-radius: @values; -moz-border-radius: @values; border-radius: @values; }

div { .border-radius(10px); }


_Stylus_

border-radius(values) { -webkit-border-radius: values; -moz-border-radius: values; border-radius: values; }

div { border-radius(10px); }


_Компільований CSS_

div { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }

	
**3D текст**

Створення 3D тексту, використовуючи кілька ```text-shadows``` – хороша ідея, але є одна проблема. Вона полягає в тому, що після створення тексту, його важко редагувати. Використовуючи домішки та color функції, можна з легкістю створити 3D текст і при бажанні змінити колір!

_Sass_

@mixin text3d($color) { color: $color; text-shadow: 1px 1px 0px darken($color, 5%), 2px 2px 0px darken($color, 10%), 3px 3px 0px darken($color, 15%), 4px 4px 0px darken($color, 20%), 4px 4px 2px #000; }

h1 { font-size: 32pt; @include text3d(#0982c1); }


_Less_

.text3d(@color) { color: @color; text-shadow: 1px 1px 0px darken(@color, 5%), 2px 2px 0px darken(@color, 10%), 3px 3px 0px darken(@color, 15%), 4px 4px 0px darken(@color, 20%), 4px 4px 2px #000; }

span { font-size: 32pt; .text3d(#0982c1); }


_Stylus_

text3d(color) color: color text-shadow: 1px 1px 0px darken(color, 5%), 2px 2px 0px darken(color, 10%), 3px 3px 0px darken(color, 15%), 4px 4px 0px darken(color, 20%), 4px 4px 2px #000 span font-size: 32pt text3d(#0982c1)


_Компільований CSS_

span { font-size: 32pt; color: #0982c1; text-shadow: 1px 1px 0px #097bb7, 2px 2px 0px #0875ae, 3px 3px 0px #086fa4, 4px 4px 0px #07689a, 4px 4px 2px #000; }


_Результат_

![Результат](https://cdn.tutsplus.com/net/uploads/legacy/1144_preprocshootout/text3d.png "enter image title here")

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

_Sass_

$siteWidth: 1024px; $gutterWidth: 20px; $sidebarWidth: 300px;

body { margin: 0 auto; width: $siteWidth; } .content { float: left; width: $siteWidth - ($sidebarWidth+$gutterWidth); } .sidebar { float: left; margin-left: $gutterWidth; width: $sidebarWidth; }


_LESS_ 

@siteWidth: 1024px; @gutterWidth: 20px; @sidebarWidth: 300px;

body { margin: 0 auto; width: @siteWidth; } .content { float: left; width: @siteWidth - (@sidebarWidth+@gutterWidth); } .sidebar { float: left; margin-left: @gutterWidth; width: @sidebarWidth; }


_Stylus_


siteWidth = 1024px; gutterWidth = 20px; sidebarWidth = 300px;

body { margin: 0 auto; width: siteWidth; } .content { float: left; width: siteWidth - (sidebarWidth+gutterWidth); } .sidebar { float: left; margin-left: gutterWidth; width: sidebarWidth; }


_Компільований CSS_

body { margin: 0 auto; width: 1024px; } .content { float: left; width: 704px; } .sidebar { float: left; margin-left: 20px; width: 300px; }


### **Відомі особливості**


CSS препроцесор має деякі свої особливості використання. Ось деякі найбільш поширені:
 
_Повідомлення про помилки _

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

_Коментарі_

При компіляції CSS, будь-який коментар, оголошений подвійним слешем, буде видалений(напр. ```//comment```), а кожен коментар «слеш-зірочка» (напр. ```/* comment */```) залишається. Тож, використовуйте подвійний слеш для коментарів, які необхідні при роботі з кодом до компіляції, а слеш з зірочкою для коментарів, які хочете бачити в коді CSS.


### **Підсумок**


Кожен CSS препроцесор, що ми розглянули (Sass, LESS і Stylus), має свій унікальний спосіб досягнення однієї і тієї ж мети – використання корисних, непідтримуваних функцій CSS, зберігаючи сумісність браузера і чистоту коду.

Якщо ви ще досі не спробували препроцесор для написання CSS, я рекомендую вам зробити це. Закликаю кожного спробувати якомога більше препроцесорів, щоб вибрати найбільш ефективний для себе.
Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 5.9K
Приєднався: 8 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація