Препроцесори. Відео презентація курсу «Препроцесори Sass та Less. Автоматизація та спрощення Front-end розробки»

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

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

CSS препроцесори роблять код, написаний з використанням препроцесорної мови, чистим та валідним.

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

Серед найпопулярніших препроцесорів виділяють Less, Sass (Scss), Stylus. Також більш-менш помітними інструментами в даній області є Closure Stylesheets, CSS Crush, вони менш популярні на НаразіАле все ж ними користуються деякі розробники. Спробуємо розібратися в можливостях та особливостях Less, Sass (Scss), Stylus.

Стандартне використання CSS є досить складним. Синтаксис без вкладеності безпосередньо складний для зорового сприйняття. Відсутність нормальних змінних та функцій робить CSS-код вузькоспрямованим і з багатьма зайвими та непотрібними деталями.

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

Для більш розвинених користувачів є спеціальні збирачі проектів.

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

LESS надає для CSS динамічні можливості: змінні, домішки (Mixins), операції та функції. Документація дуже доброзичлива для розробника, а синтаксис дуже схожий на чистий CSS. Популярні фреймворки, наприклад Twitter Bootstrap, активно використовують динамічні функції LESS. Однак LESS дає можливість повторно використовувати класи як домішки в будь-якому місці таблиці стилів.

Інший потужний і популярний препроцесор - Sass. Навколо цього інструменту утворилося величезне співтовариство розробників. Він заснований в 2007 році як модуль для HAML і написаний на Ruby (надає порт C++). Має широкий асортимент функцій, якщо порівнювати із Less. Препроцесор розширює свою функціональність рахунок бібліотеки Compass, яка дає можливість вийти за рамки CSSта працювати більш масштабно. Надає два види синтаксису: Sass (Syntactically Awesome Style Sheets) простіший синтаксис CSS, в основі якого іденція. Його вважають більше застарілою версією. Scss (Sassy CSS), в основі якого стандартний для CSS синтаксис.

- Досить молодий, але вже перспективний CSS-препроцесор. Розроблено ще 2010 року. Багато хто вважає його зручним і розширюваним препроцесором, і більш гнучким ніж Sass. Розроблено на JavaScript. Є підтримка багатьох варіантів синтаксису від подібного до CSS до більш простого і легкого.

Корисні інструменти для розробника:

• CodeKit : робить компіляцію Sass, LESS та Stylus файлів, а потім автоматично перевантажує ваш веб-браузер після оновлення файлів. У тому числі оптимізує зображення проекту для підвищення продуктивності системи. Технологія платна, але є й тріальна версія для роботи.
• LiveReload : робить перевірку змін у файлах, потім обробляє їх та автоматично перезавантажує веб-браузер. Версія працює для Mac та Windows.
• Scout: Працює з Sass та Compass у середовищі Ruby. Працює для Mac та Windows.
• SimpLESS: звичайний і простий LESS CSS компілятор для Mac та Windows.

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

2545 раз(и) 1 Сьогодні переглянуто раз(и)

І коли ж нарешті ці розробники заспокояться і перестануть знущатися з новачків!? Не встиг я ще до кінця розібратися з CSS, а мені кажуть: "Всі справжні верстальники вже давно перейшли на препроцесори. Ну який чистий CSS напередодні 2020!" Що ж робити?

По-перше, розробники ніколи не перестануть вигадувати нові технології. А професійні верстальники – дуже їм за це вдячні. Мова таблиць стилів CSS, вигадали в той час, коли сайти були примітивними. Але йшли роки, сайти ставали складнішими і масивнішими, але способи верстки залишалися колишніми. Верстальники запарилися писати схожі ділянки коду. Неможливо було швидко змінити колір на сайті. Назріла потреба у більшій автоматизації верстки, і з'явилися препроцессоры CSS коду. І сьогодні ми поговоримо про одного з них, препроцесора LESS.

Компіляція LESS та VS Code

Все, що потрібно для компіляції LESS коду - це редактор коду VS Code і розширення Easy Less. Як це працює?

Створюємо файл стилів з розширенням .less

Після збереження автоматично згенерується .css файл у ту ж папку.

Щоразу при збереженні змін, LESS файли компілюються в CSS файли. Браузери ще не навчилися розуміти LESS, їм потрібний CSS-код.

Змінні LESS

Найчастіше використовувані властивості виносимо у змінні. На сайті зазвичай використовуються кольори, що повторюються, і сімейства шрифтів. Заносимо всі кольори до змінних і потім підставляємо в правило не код кольору, а змінну. Ви запитаєте: "У чому прикол? Все одно мені потрібно щось прописувати, яка різниця?"

Головна фішка – це швидка заміна кольору. Колір змінюється лише один раз, у змінній. Заміна кольору в одній змінній замінить колір на всіх сторінках сайту. Тільки однієї цієї фішки вже достатньо, щоб почати використовувати LESS. Оголошуємо змінні LESS і зберігаємо в них потрібні нам значення, назви змінних даємо осмислені.

@primary: #194eb4;
@secondary: #f2b834;
@success: #4cb514;
@black: #000;
@white: #fff;

Тепер пишемо звичайний код, як ми це робили в CSS, але замість значень підставляємо змінні.

LESS div (
padding: 0;

color: @black;
}

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

CSS div (
padding: 0;
font-family: Roboto, sans-serif;
color: #000;
) Міксини (mixin) в LESS

Міксини корисні для повторного використаннянабору властивостей - рамок, кнопок, заголовків. Згрупований набір властивостей може застосовуватися до різних селекторів.

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

Button_font (

text-transform: uppercase;
font-size: 18px;
}

Домішуємо міксин у властивості селектора кнопки.

Portfolio__button (
padding: 15px 80px;
color: #344258;
.button_font;
}

На виході отримуємо:

Portfolio__button (
padding: 15px 80px;
color: #344258;
font-family: "DIN Pro Bold";
text-transform: uppercase;
font-size: 18px;
}

Амперсанд символ

Замість дублювання назви селектора використовуємо символ амперсанд.

Portfolio__item (
position: relative;
background-color: #3c3c3c;
}
&:hover (
background-color: #ccc;
}
}

CSS.portfolio__item (
position: relative;
background-color: #3c3c3c;
}
.portfolio__item:hover (
background-color: #ccc;
) Медіа-запити в LESS

Можна записувати медіа-запити прямо всередині селектора.

LESS.header__title (
color: #344258;
font-size: 40px;

padding: 0 20px;
@media only screen and (max-width: 320px)(
font-size: 22px;
}
} CSS.header__title (
color: #344258;
font-size: 40px;
font-family: "DIN Pro", sans-serif;
padding: 0 20px;
}
@media only screen and (max-width: 320px) (
.header__title (
font-size: 22px;
}
) Висновок

Ця стаття не розкриває і 25% усіх можливостей, що пропонує LESS. Та це й не потрібно, мета статті – мотивація новачків почати використовувати препроцесори. Починаючи з найпростішого, поступово рухаючись до складнішого.

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

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

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

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

Haml

CodeKit також підтримує інші препроцесори, які теж можуть стати у нагоді.

Доктайп

Перша частина при написанні документа на Haml – це знання, який тип доктайпу треба використовувати. При роботі з документами HTML основним типом документа буде HTML5. У Haml типи документів визначаються трьома знаками оклику (!!!), потім йде щось конкретне при необхідності.

За умовчанням доктайп у Haml – це HTML 1.0 Transitional. Тому щоб зробити його як HTML5, потрібно передати цифру п'ять після знаків оклику (!!! 5).

Готовий HTML

Оголошення елементів

Однією з визначальних особливостей Haml є його синтаксис і те, як оголошувати та вкладати елементи. Елементи HTML, як правило, містять тег, що відкриває і закриває, проте в елементах Haml є тільки один відкриваючий тег. Елементи починаються зі знака відсотка (%), а потім відступ визначає вкладеність. Відступ у Haml можна виконати одним або декількома пробілами, проте важливо, щоб відступи залишалися незмінними. Табуляція і пробіли не можуть поєднуватися один з одним і те саме число табуляцій або пробілів повинно бути однаковим протягом усього документа.

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

%body %header %h1 Привіт, мир! %section %p Lorem ipsum dolor sit amet.

Скомпільований HTML

Привіт світ!

Lorem ipsum dolor sit amet.

Обробка тексту

Текст у Haml може бути розміщений на тому ж рядку, що і оголошений елемент або з відступом нижче елемента. Текст не може бути одночасно на тому ж рядку, що і оголошений елемент, і вкладеним нижче за нього; повинен бути або той чи інший варіант. Наведений вище приклад можна переписати у такому вигляді:

%body %header %h1 Привіт, мир! %section %p Lorem ipsum dolor sit amet.

Атрибути

Атрибути, як і елементи, оголошуються трохи інакше в Haml. Атрибути оголошуються безпосередньо після елемента, у фігурних або круглих дужках, залежно від того, чи хочете ви використовувати синтаксис Ruby або HTML. Атрибути в стилі Ruby будуть використовувати стандартний синтаксис хешу всередині (), атрибути в стилі HTMLбудуть використовувати стандартний синтаксис HTMLвсередині ().

%img(:src => "shay.jpg", :alt => "Шей Хоу") %img(src: "shay.jpg", alt: "Шей Хоу") %img(src="shay.jpg" alt="Шей Хоу") !}

Скомпільований HTML

Класи та ідентифікатори

За бажанням класи та ідентифікатори можуть бути оголошені подібно до інших атрибутів, однак вони також можуть бути оброблені дещо інакше. Замість перерахування атрибутів class і id зі своїми значеннями всередині дужок, значення може бути визначено безпосередньо після елемента. Використовуючи точку для класів або грати для ідентифікатора, значення може бути додано відразу після елемента.

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

%section.feature %section.feature.special %section#hello %section#hello.feature(role="region")

Скомпільований HTML

Класи та ідентифікатори в

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

Awesome .awesome.lesson #getting-started.lesson

Скомпільований HTML

Логічні атрибути

Логічні атрибути обробляються так само, як якщо вони були б у Ruby або HTML, залежно від використовуваного синтаксису.

%input(:type => "checkbox", :checked => true) %input(type="checkbox" checked=true) %input(type="checkbox" checked)

Скомпільований HTML

Екранування тексту

Однією з переваг Haml є можливість обчислювати та запускати Ruby, проте це не завжди бажана дія. Текст та рядки коду можна екранувати за допомогою зворотної косої риси (\), що дозволяє тексту відображатися у явному вигляді без виконання.

У наведеному нижче прикладі перший зразок = @author виконується Ruby, отримуючи ім'я авторів із програми. Другий зразок починається зі зворотної косої риси, що екранує текст, і друкується як є без виконання.

Автор = @author \= @author

Скомпільований HTML

Шей Хоу = @author

Альтернативи екранування тексту

Іноді екранування тексту недостатньо і Ruby необхідний формування бажаного вихідного результату. Одним популярним прикладом для цього є спроба включити точку відразу після посилання, але не як частину тексту посилання. Розміщення точки на новому рядкуне є прийнятним, оскільки це розглядатиметься як порожнє значеннякласу, спричиняючи помилку компіляції. Додавання зворотної косої межі перед точкою екранує символ, проте поставить пробіл між останнім словом і точкою. Знову ж таки, не виробляючи бажаного результату.

У цих випадках стане в нагоді помічник Ruby. У цьому прикладі помічник використовується для розміщення точки безпосередньо після останнього слова, але за межами тексту посилання.

%p Шей - = succeed "." do %a(:href => "#") молодець

Скомпільований HTML

Ший - молодець.

Коментарі

Подібно до елементів і атрибутів, коментарі в Haml обробляються трохи по-іншому. Код може бути прокоментований досить просто з використанням однієї косої межі (/). Окремі рядки можуть бути закоментовані за допомогою косої риси на початку рядка, а блоки коду можуть бути закоментовані, вкладені під косою рисою.

%div / Рядок коментаря Актуальний рядок / %div Закоментований блок

Скомпільований HTML

Актуальний рядок

Умовні коментарі

Умовні коментарі також обробляються інакше в Haml. Щоб створити умовний коментар, використовуйте квадратні дужки() навколо умови. Ці квадратні дужки мають бути розміщені безпосередньо після косої межі.

/% script(:src => "html5shiv.js")

Скомпільований HTML

Тихі коментарі

Haml також дає можливість створювати особливі тихі коментарі. Тихі коментарі відрізняються від основних коментарів HTML тим, що після компіляції будь-який зміст всередині тихого коментаря повністю видаляється з цієї сторінки і не відображається в результатах. Тихі коментарі починаються з дефісу, потім йде грати (-#). Як і з іншими коментарями, тихі коментарі можуть бути використані для видалення одного або кількох рядків за допомогою вкладеності.

%div -# Віддалений рядок Актуальний рядок

Скомпільований HTML

Актуальний рядок

Фільтри

Haml пропонує кілька фільтрів, що дозволяють використовувати різні типи введення всередині Haml. Фільтри починаються з двокрапки, за яким йде ім'я фільтра, наприклад, :markdown, з усім вмістом для фільтрації вкладення під ним.

Поширені фільтри

Нижче наведено деякі поширені фільтри, включаючи найпопулярнішу групу: css та: javascript.

• :cdata
• :Coffee
• :escaped
• :javascript
• :less
• :markdown
• :maruku
• :plain
• :preserve
• :ruby
• :sass
• :scss
• :textile

Фільтр Javascript

:javascript $("button").on("click", function(event) ( $("p").hide("slow"); ));

Скомпільований HTML

$("button").on("click", function(event) ( $("p").hide("slow"); ));

Фільтри CSS та Sass

:css .container ( margin: 0 auto; width: 960px; ) :sass .container margin: 0 auto width: 960px

Скомпільований HTML

.container ( margin: 0 auto; width: 960px; )

Інтерполяція Ruby

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

Нижче наведено приклад на Ruby, який інтерполюється як частина імені класу.

%div(:class => "student-#(@student.name)")

Скомпільований HTML

SCSS та Sass

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

Заради стислості Haml і Sass були єдиними препроцесорами, розглянутими в цьому уроці. Вони також були обрані тому, що побудовані з використанням Ruby і прямо підходять до Ruby on Rails. Вони також отримали величезну підтримку спільноти.

Коли йдеться про вибір, який препроцесор використовувати, важливо розглянути питання про те, що краще для вашої команди та проекту. Проекти, побудовані в Node.js, можуть, ймовірно, більше виграти від Jade і Stylus. Найважливішим аспектом для розгляду, однак, є те, що ваша команда звикла використати. Проведіть дослідження для кожного проекту та оберіть найбільш обґрунтоване рішення.

Ресурси та посилання

• Haml - HTML Abstraction Markup Language
• Sass - Syntactically Awesome Stylesheets
• Sass Playground на SassMeister

Постали питання?

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

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

Що таке CSS-препроцесор?

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

• Stylus

Всі перераховані вище препроцесори мають практично ідентичний функціонал, є лише невеликі відмінності в синтаксисі. Тепер, повернемося ж до питання, озвученого раніше: які переваги дають нам препроцесори, щоб зробити наш код більш зручним, і підтримуваним? Це насамперед вкладеність. Така особливість дає нам можливість структурувати елементи, легко знайти батька елемента, швидко писати псевдокласи і псевдоелементи і навіть використовувати БЕМ! Наприклад:
.track
color: #fff
&__title
paddding: 10px
&:hover, &:focus
color: blue

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

Track (color: #FFF;)
.track__title ( padding: 10px;)
.track__title:hover, .track-title:фокус ( color: blue)

Лаконічно, зручно, зрозуміло, структура від батька до нащадка – здорово, чи не так? Другою, і не менш важливою, перевагою є змінні. Принцип роботи їх гранично простий: ім'я змінної починається із символу $, а далі саме ім'я. Через двокрапку пишемо значення - це може бути колір у будь-якому зручному вигляді, значення відступу, ширини, розміру шрифту і так далі. У результаті ми отримаємо приблизно таке:

$btn-color: blue;
$font-main-size: 16px;

А використання буде виглядати так:

Block (
font-size: $font-main-size;
}

Тільки уявіть собі, як це зручно. Якщо вам потрібно змінити колір кнопок по всьому сайту, це достатньо зробити тільки в одному місці! Що ж, йдемо далі. Третє і найбільше, що може нам запропонувати CSS-препроцесорів - це використання міксинів. У звичному для нас розумінні, міксини – це функції, які можна використовувати кілька разів, не повторюючи одні й ті самі частини коду (пам'ятаємо про один із принципів програмування – DRY – Don't repeat yourself). Зізнатись чесно, я не так часто використовую міксини, мабуть не було такої гострої необхідності, проте кілька прикладів я все ж таки покажу. Одна з найбільш використовуваних мною функцій має такий вигляд:

@function em($pixels, $context: $browser-context) (
@if (unitless($pixels)) (
$pixels: $pixels * 1px;
}
@if (unitless($context)) (
$context: $context * 1px;
}
@return $pixels / $context * 1em;
}

А її застосування має такий вигляд:

body (
font-size: em(14px);
}

Так, як ви зрозуміли, це лише перетворення розміру шрифту з PX в Em (хай живе ті часи, коли для такої дрібниці раніше користувалися спеціальними сервісами або вважали самі на калькуляторі). Наступний приклад також дозволяє заощадити багато часу:

@mixin input-placeholder (
&.placeholder ( @content; )
&:-moz-placeholder ( @content; )
&::-moz-placeholder ( @content; )
&:-ms-input-placeholder ( @content; )
&::-webkit-input-placeholder ( @content; )
}

Його використання:

input, textarea (
@include input-placeholder (
color: $grey;
}
}

Можна навести ще безліч прикладів, проте варто почати використовувати міксини самому, щоб зрозуміти, наскільки це корисний інструмент. Мабуть, залишилася ще одна причина, яка змусить вас полюбити CSS-препроцесори, і її ім'я – модульність. На дворі 2018 рік, і модульність у нас усюди - починаючи від HTML-шаблонізаторів і закінчуючи різними css фреймворками та збирачами проектів.

Сучасний CSS – міць, а в комбінації з препроцесорами – взагалі бойова машина для оформлення контенту на сторінках. У статті наведено розгорнуте посібник із Sass/SCSS з прикладами. Після прочитання дізнаєтеся, як використовувати міксини, змінні та директиви для ще більшого контролю за стилями.

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

Навіщо використовувати Sass/SCSS замість CSS?

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

Змінні- у стандартному CSS теж є поняття змінних, але у Sass з ними можна працювати трохи інакше. Наприклад, повторювати їх через директиву @for. Або генерувати властивості динамічно. Докладніше можете вивчити на російськомовному сайті проекту.

Покращені математичні операції- Можна складати, віднімати, множити та ділити значення CSS. На відміну від стандартного CSS, Sass/SCSS дозволяють обійтися без calc().

Тригонометрія- SCSS дозволяє писати власні (синусоїдальні та косинусоїдальні) функції, використовуючи тільки синтаксис Sass/SCSS, подібно до того, як це можна робити в інших мовах на кшталт JavaScript.

Директиви@for, @while та вираз@if-else – можна писати CSS-код, використовуючи знайомі елементи з інших мов. Але не спокушайтеся - у результаті на виході буде простий CSS.

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

Функції- можна створювати визначення CSS у вигляді функцій багаторазового використання.

Препроцесор Sass

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

Синтаксис

SCSS особливо не додає жодних нових можливостей CSS, крім нового синтаксису, що часто скорочує час написання коду.

Пререквізити

Існує 5 CSS-препроцесорів: Sass, SCSS, Less, Stylus та PostCSS.

Ця стаття здебільшого охоплює SCSS, який схожий на Sass. Детальніше про ці препроцесори можете прочитати на Stack Overflow (оригінал) або qaru (переклад російською).

SASS  -  (.sass) S yntactically A wesome S tyle S heets.

SCSS  -  (.scss) Sass y C ascading S tyle S heets.

Розширення.sass і.scss схожі, але все ж таки не однакові. Для фанатів командного рядканаводимо спосіб конвертації:

# Конвертація з Sass у SCSS $ sass-convert style.sass style.css # Конвертація з SCSS у Sass $ sass-convert style.sss

Sass - перша специфікація для SCSS з розширенням файлу .sass. Її розробка почалася ще в 2006 році, але пізніше було розроблено альтернативний синтаксис з розширенням.

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

Змінні

Sass/SCSS дозволяє працювати зі змінними. У CSS вони позначаються подвійним тире (--), а препроцесорах знаком долара ($).

$number: 1; $color: #ff0000; $text: "tproger forever."; $text: "IT forever." !default; $nothing: null;

Ви можете надавати значення за замовчуванням змінним, які ще не мають значення, додавши мітку!default в кінці значення. У разі, якщо змінної вже було присвоєно значення, воно зміниться; якщо змінна порожня, їй буде присвоєно нове зазначене значення.

#container (content: $text;)

Змінні Sass можуть бути присвоєні будь-якій властивості.

Вкладені правила

Стандартні вкладені CSS-елементи з використанням пробілу:

/* Вкладені правила */ #A ( color: red; ) #A #B ( color: green; ) #A #B #C p ( color: blue; )

Ті ж вкладені елементи за допомогою SCSS:

/* Вкладені правила */ #A (color: red; #B (color: green; #Cp (color: blue;))))

Як видно, синтаксис виглядає чистішим і менш повторюваним.

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

За лаштунками препроцесор все ще компілює його в стандартний код CSS (показано вище), щоб він міг бути відображений у браузері. Ми лише змінюємо спосіб написання CSS.

Амперсанд #p ( color: black; a ( font-weight: bold; &: hover ( color: red; ) ) )

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

Результат компіляції Sass (з попереднього прикладу) у CSS нижче.

#p (color: black;) #p a (font-weight: bold;) #p a:hover (color: red;)

У результаті амперсанд був компільований у назву батьківського елемента a(a:hover).

Міксини (вони ж домішки)

Міксини також можуть містити селектори, у тому числі з властивостями. А селектори можуть містити посилання на батьківський елемент через амперсанд (&), адже ви пам'ятаєте про нього?

Приклад роботи з кількома браузерами

Деякі речі в CSS дуже стомливо писати, особливо в CSS3, де плюс до всього часто потрібно використовувати велику кількість вендорних префіксів (-webkit або moz).

Міксини дозволяють створювати групи декларацій CSS, які вам доведеться використовувати кілька разів на сайті. Хорошою практикою буде використання міксинів для вендорних префіксів. Приклад:

@mixin border-radius($radius) ( // Префікси для: -webkit-border-radius: $radius; // Chrome і Safari -moz-border-radius: $radius; // Firefox -ms-border-radius: $ Radius; // Internet Explorer-o-border-radius: $ radius; // Opera border-radius: $ radius; // Стандартний CSS) // Приклад використання міксину border-radius після його створення.box (@include border-radius(10px); )

Арифметичні операції

як і в реального життя, ви не можете працювати з числами, у яких несумісні типи даних (наприклад, додавання рх та em).

Складання та віднімання p ( font-size: 10px + 2em; // ПОМИЛКА! font-size: 10px + 6px; // 16px font-size: 10px + 2; // 12px )

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

Приклад віднімання:

множення

Виконується так само, як у CSS, за допомогою calc(a * b) , але без calc і круглих дужок. Крім того, можна відокремлювати знак множення пробілами від чисел (5 * 6 = = 5 * 6).

Виняток Не можна множити пікселі між собою. Тобто, 10px * 10px! = 100px. 10px * 10 == 100px.

P ( width: 10px * 10px; // ПОМИЛКА! width: 10px * 10; // 100px width: 1px * 5 + 5px; // 10px width: 5 * (5px + 5px); // 50px ; 10px / 2) * 3; // 20px )

Поділ

З поділом справи трохи складніше, але розібратися можна, адже в стандартному CSS коса лінія (слеш) зарезервована для використання короткої форми запису властивостей. Приклад нижче.

/* коротка форма запису властивостей */ font: italic bold .8em/1.2 Arial, sans-serif; /* стандартна формазапису властивостей */ font-style: italic; font-weight: bold; font-size: .8em; line-height: 1.2; font-family: Arial, sans-serif;

Є три помічники, які натякнуть на можливість поділу:

Значення (або будь-яка його частина) зберігається у змінній або повертається функцією.

Значення поміщені в круглі дужки.

Значення використовується як частина іншого арифметичного виразу.

$ var1: 20; $ var2: 4; p ( top: 16px / 24px; // Відображається без змін у стандартному CSS top: (20px / 5px); // Проводиться поділ (але тільки при використанні дужок) top: #($var1) / #($var2); / / Виводиться як звичайний CSS-код, поділ не виконується top: $var1 / $var2;// Поділ виконується top: random(4) /5; 3px;// Поділ виконується, якщо додано ще одну арифметичну дію)

Результат компіляції CSS:

P ( top: 16px / 24px; top: 4; top: 20 / 4; top: 5; top: 0.6; top: 3.5px; )

Залишок

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

@mixin zebra() ( @for $i from 1 through 7 ( @if ($i % 2 == 1) ( .stripe-#($i) ( background-color: black; color: white; ) ) ) ) * ( @include zebra(); text-align: center; )

Створення міксину zebra показано у вставці коду зверху. Директиви @for та @if описані в розділі нижче.

Для створення зразка треба написати декілька HTML-елементів.

zebra zebra zebra zebra zebra zebra zebra zebra

Результат у браузері:

Зебра успішно згенерована міксином zebra

Оператори порівняння

Директива @if приймає вираз SassScript і використовує вкладені у неї стилі у разі, якщо вираз повертає будь-яке значення, крім false чи null .

Нижче показано, як працюють директиви @if та @else , вкладені в міксин.

@mixin spacing($padding, $margin) ( @if ($padding > $margin) ( padding: $padding; ) @else ( padding: $margin; ) ) .container ( @include spacing(10px, 20px); )

Порівняння у дії. Міксин spacing вибере розміри padding 'а, якщо той буде більшим, ніж margin .

Після компіляції в CSS:

Container ( padding: 20px; )

Логічні оператори

Опис логічних операторів

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

@mixin button-color ($height, $width) ( @if (($height< $width) and ($width >= 35px)) ( background-color: blue; ) @else ( background-color: green; ) ) .button ( @include button-color(20px, 30px) )

Рядки

У CSS визначено 2 типи рядків: з лапками та без. Sass розпізнає і те, й інше. У результаті ви отримаєте у CSS той тип рядків, який використовували Sass.

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

P ( font: 50px Ari + "al"; // Компілюється в 50px Arial )

Нижчий приклад демонструє, як робити не треба.

P ( font: "50px" + Arial; // ПОМИЛКА! )

Можете складати рядки різних типівякщо в них немає прогалин. Приклад нижче не буде скомпілюваний.

P:after (content: "Поверніть Лінуса" + Торвальдса!; // ПОМИЛКА!)

P:after (content: "Поверніть Лінуса" + "Торвальдса!"; // зверніть увагу на "Торвальдса!")

Приклад додавання кількох рядків:

P:after (content: "Уділ" + "людства" + "-" + "ітерація."; )

Додавання рядків і чисел:

P:after (content: "Рекурсія" + 2013 + "доля небожителів";

Зверніть увагу Властивість content працює тільки з псевдоселекторами: before та: after. Рекомендується не використовувати вміст у CSS-документі, а безпосередньо використовувати його між тегами в HTML.

Оператори керування потоками

У SCSS є функції (fucntion()) та директиви (@directive). Трохи вище ми розглядали приклад функції, коли вивчали передачу аргументів усередині міксинів.

Функції зазвичай полягають у дужки, що йдуть відразу за її ім'ям. А директива починається із символу @.

Подібно до JavaScript, SCSS дозволяє працювати зі стандартним набором операторів управління потоками.

if()

if() – це функція (і іноді основа штучного інтелекту).

Її використання виглядає досить примітивним: оператор поверне одне із двох позначених за умови значень.

/* Використання функції if() */ if (true, 1px, 2px) => 1px; if (false, 1px, 2px) => 2px;

@if

@if - це директива, що використовується для розгалуження з урахуванням умови.

/* Використання директиви @if */ p ( @if 1 + 1 == 2 ( border: 1px solid; ) @if 7< 5 { border: 2px dotted; } @if null { border: 3px double; } }

Результат компіляції:

P ( border: 1px solid; )

Нижче показано комбо-розгалуження з додаванням директиви @else.

/* Створення змінної $type */ $type: river; /* Забарвлення контейнерів у синій у разі, якщо значення для змінної $type - river */ div ( @if $type == river ( color: blue; ) ) /* Умовні кольори для тексту в тезі

*/ p ( @if $type == tree ( color: green; ) @else if $type == river ( color: blue; ) @else if $type == dirt ( color: brown; ) )

Перевірка на наявність батьківського елемента

Амперсанд вибирає батьківський елемент, якщо існує. В іншому випадку поверне null. Тому може використовуватися разом із директивою @if.

У таких прикладах розглянемо створення умовних CSS-стилів залежно від батьківського елемента.

/* Перевірка на наявність батьківського елемента */ @mixin does-parent-exist ( @if & ( /* Застосування блакитного кольору батьківському елементу, якщо він існує */ &:hover ( color: blue; ) ) @else ( /* Батьківський елемент відсутній, застосування блакитного кольору до посилань */ a ( color: blue; ) ) )

Директива @for

Директива @for виводить набір стилів задану кількість разів. Для кожного повторення використовується змінна-лічильник зміни виведення.

Директива @for ітерується 5 разів.

@for $i from 1 through 5 ( .definition-#($i) ( width: 10px * $i; ) )

Результат компіляції CSS:

Definition-1 ( width: 10px; ) .definition-2 ( width: 20px; ) .definition-3 ( width: 30px; ) .definition-4 ( width: 40px; ).

Директива @each

Директива @each встановлює $var у кожне зі значень списку або словника і виводить стилі, що містяться в ній, використовуючи відповідне значення $var .

@each $animal in platypus, lion, sheep, dove ( .#($animal)-icon ( background-image: url("/images/#($animal).png") ) )

Результат компіляції CSS:

Platypus-icon ( background-image: url("/images/platypus.png"); ) .lion-icon ( background-image: url("/images/lion.png"); ) .sheep-icon ( background-image image: url("/images/sheep.png"); ) .dove-icon ( background-image: url("/images/dove.png"); )

Директива @while

Директива @while приймає вираз SassScript і циклічно виводить вкладені в неї стилі, поки вираз обчислюється як true. Вона може бути використана для створення складніших циклів, ніж таких, для яких підходить @for, хоча вона буває необхідна досить рідко. Наприклад:

$ index: 5; @while $index > 0 ( .element-#($index) ( width: 10px * $index; ) $index: $index - 1; )

Результат компіляції:

Element-5 ( width: 50px; ) .element-4 ( width: 40px; ) .element-3 ( width: 30px; ) .element-2 ( width: 20px; ).

Функції у Sass/SCSS

Використовуючи Sass/SCSS, можна використовувати функції так само, як і в інших мовах.

Створимо функцію three-hundred-px(), що повертає 300px.

@function three-hundred-px() ( @return 300px; ) .name ( width: three-hundred-px(); border: 1px solid gray; display: block; position: absolute; )

Після застосування класу.name ширина елемента дорівнюватиме 300 пікселям.

Hello.

Функції Sass можуть повертати будь-яке коректне значення CSS і можуть бути призначені будь-якій властивості. Вони можуть бути розраховані з урахуванням переданого аргументу.

@function double($width) ( @return $width * 2; )

Тригонометрія

Тригонометричні функції sin() і cos() часто зустрічаються у вигляді вбудованих класів у багатьох мовах, таких як JavaScript, наприклад.

Їхню роботу варто вивчати, якщо потрібно скоротити час, що витрачається на розробку анімацій інтерфейсу користувача, наприклад створення троббера . Ми, до речі, вже про це в одній із статей. Але в цьому випадку це буде код, а не gif-картинка, вставлена ​​в HTML-документ.

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

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

Можна писати тригонометричні функції на Sass. Про це читайте далі.

Написання власних функцій

У тригонометрії багато операцій ґрунтуються на функціях. Кожна функція будується на основі іншої. Наприклад, функція rad() вимагає використання PI(). Функції cos() та sin() вимагають використання rad().

@function PI() ( @return 3.14159265359; )

Написання функцій на Sass/SCSS дуже схоже написання функцій іншими мовами.

Використання функції pow() :

@function pow ($number, $exp) ( $value: 1; @if $exp > 0 ( @for $i from 1 through $exp ( $value: $value * $number; ) ) @else if $exp< 0 { @for $i from 1 through -$exp { $value: $value / $number; } } @return $value; }

Використання функції rad():

@function rad ($angle) ( $unit: unit ($angle); $unitless: $angle / ($angle *0 + 1); //Якщо значення angle (кута) вказано в градусах ("deg"), потрібно конвертувати його в радіани.

Для обчислення тангенса функцією tan() потрібно застосувати функції sin() та cos().