Привіт друзі!

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

Класнути

Плюснути

Запинити

Спонсор випуску – хостинг партнер: partnerwp.ru

Всі Sass/CSS приклади та налаштований Gulp проект для даного уроку ви можете завантажити з GitHub .

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

Переваги Sass

• Сумісність з різними версіями CSS, завдяки якій ви можете використовувати будь-які CSS бібліотеки у вашому проекті;
• Величезна кількість різноманітних функцій на будь-який випадок життя. Таким багатим функціоналом можуть похвалитися деякі CSS препроцесори;
• Sass - це один із найстаріших CSS препроцесорів, що увібрав великий досвід за довгі роки свого існування;
• Чудова можливість використовувати Sass фреймворки, які спрощують життя розробнику. Один з таких фреймворків - Bourbon, який ми використовуємо в деяких випусках Джеда верстки при написанні Sass;
• Синтаксису. Ви можете вибрати один із двох синтаксисів, який вам ближче – спрощений (SASS) та розгорнутий CSS-подібний (SCSS).

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

Налаштування оточення

Як оточення для роботи з Sass в цьому уроці, як і в інших наших уроках, ми будемо використовувати версію Sass для менеджера Gulp ( gulp-sass). Для використання оригінальної Ruby версії або компіляції Sass за допомогою спеціального програмного забезпечення, ви можете ознайомитися з інструкціями на оф. сайті. Цей урокносить переважно практичний характер, тому зупинятись на можливих варіантах підключення до проекту не будемо, підключимо Sass найпопулярнішим способом, використовуючи Gulp.

Переконайтеся, що у вас встановлено остання версія Node.js та Gulp. Якщо Node.js не встановлено, завантажте його та встановіть . Після встановлення Node.js встановіть gulp командою "npm i-g gulp"(Windows) або "sudo npm i-g gulp"(Linux, OS X). Почитати: .

Npm i --save-dev gulp gulp-sass

Var gulp = require ("gulp"), // Підключаємо Gulp sass = require ("gulp-sass"); // Підключаємо Sass пакет gulp.task("sass", function() ( // Створюємо таск "sass" return gulp.src(["sass/**/*.sass", "sass/**/*.scss "]) // Беремо джерело.pipe(sass((outputStyle: "expanded")).on("error", sass.logError)) // Перетворимо Sass в CSS за допомогою gulp-sass .pipe(gulp.dest(" css")) // Вивантажуємо результату в папку css)); gulp.task("watch", function() ( gulp.watch(["sass/**/*.sass", "sass/**/*.scss"], ["sass"])); // Спостереження за sass файлами в папці sass)); gulp.task("default", ["watch"]);

Зверніть увагу на рядок 6 - тут ми використовуємо один із стилів виведення в результуючий файл: nested- Вкладений, за замовчуванням; expanded- Розгорнутий; compact- компактний, коли селектор та його властивості у фігурних дужках виводяться в один рядок; compressed- Стиснутий. Крім того, завдяки обробці .on("error", sass.logError)Якщо виникне помилка, нам не доведеться перезавантажувати команду виконання Gulpfile і ми будемо бачити, в якому рядку Sass файлу у нас помилка. У прикладах я використовуватиму стиль виведення expandedдля наочності.

У вас має бути наступна структурапроекту у вашій файловій системі:

• myproject/
  • css/
    • common.css
  • sass/
    • common.sass
  • node_modules/
  • gulpfile.js
  • package.json

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

Тут ми беремо всі Sass файли з директорії sass/вашого проекту та вивантажуємо готовий CSS результат у папку css/. Крім того, тут ми встановлюємо спостереження watchза змінами в Sass файлах і автоматичну компіляцію в CSS, якщо такі зміни мають місце. Результуючий css файл підключається до верстки.

Якщо вам щось не зрозуміло з налаштування пакетів Gulp в даному прикладі, прочитайте інструкцію Gulp .

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

Синтаксис Sass

Є 2 варіанти написання Sass, 2 синтаксиси: SASS та SCSS. Самий старий варіантнаписання Sass - це синтаксис відступів. Саме цей варіант написання ми будемо використовувати у нашому уроці. Розширення файлів для такого синтаксису *.sass. Другий варіант – це синтаксис, розширюючий синтаксис CSS , Sassy CSS. SCSS пишеться як стандартний CSS, але розширений додатковими можливостями Sass. Розширення файлів із SCSS синтаксисом - *.scss.

Дуже важливо! Синтаксис відступів вимагає дуже чіткого дотримання відступів у вкладених властивостей і якщо у вас виникають помилки при запуску Gulp або неявні помилки без вказівки рядка в консолі – швидше за все, помилка саме у неправильних відступах. Ще важлива деталь - якщо у вас як відступи використовуються таби, компілятор видасть помилку при спробі конвертувати Sass, в якому крім табів, також, звільняються прогалини в якості відступів. Або ви використовуєте лише таби, або лише прогалини.

SASS та SCSS синтаксис:

SASS - синтаксис відступів	SCSS - синтаксис розширення
$font-stack: Helvetica, sans-serif $primary-color: #333 body font: 100% $font-stack color: $primary-color	$ font-stack: Helvetica, sans-serif; $primary-color: #333; body ( font: 100% $font-stack; color: $primary-color; )

Крім базових правил написання (фігурні дужки, крапка з комою в кінці рядків), SASS та SCSS розрізняються також написанням деяких функцій. Тож будьте уважні при використанні будь-яких прикладів з інтернету, перевіряйте, який синтаксис використовується. Якщо досить великий приклад з інтернету виконано в стилі SCSS, а ваш проект написаний в SASS, ви можете його імпортувати у ваш основний файл, не змінюючи синтаксис і розширення файлу за допомогою директиви @importнаприклад, якщо ви завантажили файл carousel.scss, то можете підключити його до вашого main.sassрядком @import "carousel". Також можна надійти у зворотній ситуації, коли необхідно імпортувати *.sass файли у файл main.scss. У нашому прикладі з Гітхаба ми імпортуємо все _x.x.sassфайли в один common.sassде x.x - це номер заголовка прикладу з цієї статті.

Ми будемо використовувати синтаксис відступів.

1. Розширення можливостей CSS за допомогою Sass

1.1 Правила вкладення

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

1.2 Прив'язка до батьківського селектора

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

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

Крім того, прив'язку до батька можна використовувати для створення складових селекторів:

1.3 Вкладені властивості

Для зручності, ви можете розбивати суфікс простору імен властивості на вкладення. Наприклад, margin-top, margin-bottom, margin-Left, margin-right мають загальну основу marginі можуть бути розбиті на вкладення так:

1.4 Селектори-шаблони

Іноді виникає ситуація, коли кілька елементів на сторінці використовують однакову базу CSS, однаковий набір властивостей, характерний тільки для них. Дані базові правила CSS можна оформити у вигляді селектора-шаблону для використання в декількох місцях Sass. Селектори-шаблони виводяться за допомогою директиви @extend.

2. SassScript

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

2.1 Змінні у Sass

Це справді чудова можливість - визначати змінні, які можна використовувати в будь-якому місці вашого Sass файлу. Колір, дефолтні значення, одиниці, все це можна взяти в змінну і використовувати надалі. Змінна визначається так: $назва: значення.

2.2 Операції з числами та рядками + інтерполяція

Sass дає можливість використовувати стандартні арифметичні операції над числами, такі як додавання (+), віднімання (-), поділ (/) та залишок від поділу по модулю (%). Оператори порівняння (<, >, <=, >=, ==, !=) також підтримуються для чисел.

Крім того, у Sass є можливість конкатенувати (з'єднувати) рядки.

Як бачимо з прикладу $ summ: 10 + 20 / 2, Дотримується пріоритет у виконанні арифметичних операцій - спочатку розподіл, потім додавання. Для визначення порядку дій можна використовувати круглі дужки, як у математиці. Зверніть увагу, що при додаванні 12px + 8px, ми отримаємо 20px.

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

Інтерполяція- це здобуття нового значення, використовуючи інші.

Найчастіше інтерполяція Sass використовується для отримання нового значення змінної, завдяки "інтегруванню" в значення іншої змінної, за допомогою конструкції #{} , наприклад:

Ви не можете просто взяти і вставити в рядок змінну, без використання інтерполяції, як, наприклад, це можна зробити в PHP, в подвійних лапках. Обов'язково використовуйте інтерполяцію змінними.

2.3 Операції з квітами

Кольори в Sass можна складати, віднімати, ділити і множити. Усі арифметичні операції виконуються кожного кольору окремо: червоного, зеленого і синього.

Зверніть увагу, що при додаванні rgba кольорів останній параметр непрозорості 0.75 не повинен відрізнятися від інших у виразі, інакше буде помилка додавання. Натомість, можна регулювати альфа-канал rgba, використовуючи opacifyі transparentizeабо керувати непрозорістю кольору HEX, за допомогою функції rgba.

3. Директиви та правила

3.1 @import

Ви можете імпортувати у ваш Sass файл sass, scssі cssфайли за допомогою директиви @import, при цьому всі міксини та змінні працюватимуть в основному файлі, в який відбувається імпорт.

@import спрацює як звичайний CSS @import, якщо:

• в дорозі до файлу присутній http://;
• файл викликається через url();
• або в імпорті є медіапараметри.

Для того, щоб інший файл був повноцінно імпортований в основний файл Sass, необхідно, щоб розширення файлу було *.sass, *.scssабо *.css.

Давайте розглянемо деякі приклади.

Наступні файли імпортовані не будуть:

Наступні файли будутьімпортовані:

Увага! У нових версіях gulp-sassдля імпорту CSS файлів у Sass необхідно вказувати розширення.

Можливий імпорт кількох файлів через кому: @import "header", "media".

Файли, які починаються з нижнього підкреслення, називаються фрагментиі при імпорті не вимагають вказівки на підкреслення та розширення. Наприклад, файл _header.sassможна імпортувати так: @import "header".

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

#main @import "example"

3.2 @at-root

Директива @at-rootпіднімає вміст у ній правила в корінь, скасовуючи ланцюжок від батька. Тут все просто:

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

4. Вирази

Sass підтримує використання виразів та функцій для різних умов, реалізації циклів тощо.

4.1 Директива @if()

Директива @if()дозволяє здійснити виконання SassScript з певними умовами та має наступний синтаксис:

4.2 Директива @for

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

Ви можете вказати череззамість to, якщо потрібно пройтись від 1 до 11 включно, а не лише до 10, як у прикладі.

4.3 Директива @each

Якщо потрібно пройти по списку значень, а не просто чисел, можна використовувати директиву @each:

4.4 Директива @while

@whileциклічно виводить блоки стилів, поки вираз true.

5. Міксини

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

Міксин оголошується директивою @mixin, після оголошення має бути вказано ім'яміксину. Викликається міксин директивою @include, яка приймає ім'я міксину та передані аргументи, якщо такі мають місце.

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

Відразу відповім на питання - як працювати з Sass стилями на готовому сайті, невже потрібно правити готовий CSS і заливати FTP? Ні, так не можна робити. Ви повинні мати локальну копію ваших Sass стилів або навіть цілого сайту та після закінчення роботи деплоїти (вивантажувати) по FTP готові стилі. Для цього, ви можете використовувати Gulp пакет vinyl-ftp. Або налаштувати Sass оточення на вашому сервері для компіляції файлів, що завантажуються по FTP/sFTP.

На сьогодні все. Дякую за увагу!

Що таке Sass, навіщо він потрібен, його можливості, встановлення та як його використовувати у своїх проектах

Що таке Sass

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

Синтаксис Sass має 2 види: SASSі SCSS. SCSS – більше схожий на CSS, а SASS – відрізняється відсутністю фігурних дужок. Вкладені елементи реалізовані рахунок відступів. Саме такий синтаксис ми тут використовуватимемо.

Навіщо потрібний Sass

Щоб зрозуміти, навіщо потрібний Sass, перерахуємо його деякі можливості:

1. Sass дозволяє вкладати правила CSSодин в одного
2. Вкладеність властивостей
3. Використання змінних
4. Підтримка арифметичних операцій
5. Операції з квітами
6. Можливість імпортувати в файл sass sass, scssі cssфайли
7. Використання міксинів
8. І багато іншого

Якщо коротко навіщо потрібен Sass: він прискорюєі спрощуєпроцес розробки.

Як використовувати Sass

Існують різні способипочати використовувати Sass:

1. За допомогою додатків (Koala, CodeKit, Compass та інші)
2. За допомогою командного рядка
3. Використовуючи таск-менеджери
4. Простим конвертуванням Sass в CSS за допомогою онлайн-сервісів

Розглянемо використання Sassдля таск-менеджера Gulp. Перед тим як розпочати встановлення, бажано ознайомитися з основами Gulp.

Встановлення та підключення gulp-sass

Для встановлення плагіна gulp-sassу наш проект, відкриємо командний рядок у папці проекту. Введемо таку команду:

npm i gulp - sass -- save - dev

Плагін буде встановлений до папки node_modules і буде додано відповідний запис у файлі package.json. Після успішного встановлення нам потрібно підключитинаш пакет у файлі gulpfile.js.

var gulp = require ("gulp"); sass = require ("gulp-sass");

Тепер створимо таск sass.

gulp. task ("sass" , function ()( return gulp . src ("app/sass/main.sass" ) . pipe (sass (). on ("error" , sass . logError )) . pipe (gulp . dest ( "app/css"));));

gulp.src- Що беремо для обробки

.pipe(sass())- Конвертуємо Sass у CSS

sass()- у дужках можна поставити додаткові налаштування відображення CSSна виході.
Наприклад, sass((outputStyle: " expanded")) - повністю розгорнутий CSS.
Інші значення: nested(за замовчуванням), compact- кожен селектор на різному рядку, compressed- все в один рядок.

Якщо раптом ми припустимося помилки, то можна вивести на екран повідомлення де вона знаходиться. Для цього додамо .on("error", sass.logError).

Виконаємо наш створений таск gulp-sass. У командному рядку введемо gulp sass.

Gulp автоматично перетворив SASS на CSS і створив файл main.css.

Якщо потрібно вибрати не один файл, а кілька, можна вибрати всі файли відразу. Для цього змінимо трохи рядок, де ми вибираємо sass-файли для конвертації:

gulp. src ("app/sass/**/*.sass" )

sass/**/*.sass- означає вибір усіх файлів (з розширенням .sass) у всіх папках папки sass.

Резюмуємо:підключили плагін gulp-sass, створили таск sassі додали висновок помилки (якщо така виникне). Тепер можна зробити дефолтний таск. Тобто. наш такс gulp-sass буде запускатися командою gulp.

gulp. task ("default", ["sass"]);

Отримуємо наступний gulpfile.js

var gulp = require ("gulp"); var sass = require ("gulp-sass"); gulp. task ("sass" , function ()( return gulp . src ("app/sass/**/*.sass" ) . pipe (sass (). on ("error" , sass . logError )) . pipe (gulp .dest ("app/css")))); gulp. task ("default", ["sass"]);

Розглянемо деякі можливості Sass на прикладах

Їх величезна кількість, розглянемо лише найпопулярніші. З повним спискомможна ознайомитись на офіційному сайті.

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

Вкладеність властивостей

Використання змінних $

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

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

Sass дозволяє правилам cssбути вкладеними один в одного. Внутрішнє правило застосовується лише межах зовнішнього селектора правила. Інакше тут ніяк не перекласти, фраза розумна, насправді все простіше, просто подивіться приклад:

Scss - файл

#main p (

color: #00ff00;

width: 97%;

Redbox (

background-color: #ff0000;

color: #000;

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

1 2 3 4 5 6 7 8

#main p (

color: #00ff00;

width: 97%;

#main p .redbox (

background-color: #ff0000;

color: #000;

Це допомагає уникати повторення батьківського селектора і допомагає набагато простіше сприймати групу. css шарівз великою кількістю вкладених селекторів. Наприклад:

Scss - файл

10 11 12

#main (

width: 97%;

p , div (

font-size: 2em;

font-weight: bold;

pre (

font-size: 3em;

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

11 12 13 14

#main (

width: 97%;

#main p,

#main div (

font-size: 2em;

#main p a ,

#main div a (

font-weight: bold;

#main pre (

font-size: 3em;

Посилання на батько селекторів (&)

Не зрозуміло чому розробники sass так це назвали. Взагалі, якщо просто, то це можна назвати посиланням на самого себе. Якщо я не помиляюся, то в less-ій документації це так і називається (нагадаю, less багато речей брав із sass-а, цю конструкцію він теж запозичив). Багато хто напевно поставить питання, а для чого це потрібно? Почнемо з того, що без цієї конструкції неможливо було реалізувати жоден псевдоклас. Або інший приклад, нам потрібно передбачити інші стилі елемента залежно від того, який клас має body html документа. Покажу на прикладі із офіційної документації.

Scss - файл

1 2 3 4 5 6 7 8 9 10

font-weight: bold;

text-decoration: none;

&:hover (

text-decoration: underline;

body .firefox & (

font-weight: normal;

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

1 2 3 4 5 6 7 8 9 10

font-weight: bold;

text-decoration: none;

a :hover (

text-decoration: underline;

body .firefox a (

font-weight: normal;

Я думаю із псевдокласами все зрозуміло. Давайте детальніше розглянемо рядок body.firefox &. Що тут відбувається? Якщо посилання на себе з'являється за якимось елементом (тут може бути як одиночний HTML елемент, так і клас, id-ік, абсолютно не важливо), то це говорить компілятору, що таке його розташування скасовує стандартну вкладеність елементів. Компілятор виб'є такий елемент з стандартного потоку. Якщо подивитися на приклад вище, то може скластися відчуття, що буде скомпільовано css-ка в якій буде a body.firefox a, але немає. Посилання на себе йде за елементом з класом, тому компілятор згенерує body.firefox a(Стандартна вкладеність елементів скасована). Це досить фундаментальна річ, і треба розуміти. Новачки які тільки перейшли на який-небудь препроцесор не зовсім розуміють як працює посилання на самого себе, і часто пишуть код який не працює. Це просто необхідно запам'ятати.

Scss - файл

1 2 3 4 5 6 7 8 9

#main (

color: black;

font-weight: bold;

&:hover (

color: red;

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

1 2 3 4 5 6 7 8 9

#main (

color: black

#main a (

font-weight: bold;

#main a:hover (

color: red;

У прикладі вище видно, що посилання на самого себе &:hoverвкладена в #mainі вкладена в a, вона стоїть окремо, перед нею немає ніяких елементів, тому спрацьовує стандартна вкладеність і компілятор згенерує #main a:hover.

У різні часи світ переживав технічні революції. Це відбувалося стрибками. Грубо кажучи бронза, і бац, настав залізний вік. Зараз ми не знаємо хто винайшов колесо чи плуг, але на той час ці відкриття мали революційний характер і змінили життя як окремих людей, так і всього людства. У житті Інтернету, якщо взяти конкретніше, то в житті верстальників, були три нововведення які змінили їхнє життя, до того ж змінили його кардинально. Перше це звичайно ж каскадні таблиці стилів, але це було на зорі Інтернету. Друге це jquery, тепер подорож по DOM моделі стала простою та зручною, плюс різні ефекти. І третє, це вже більше сучасний час, це БЕМ. Погодьтеся круто написати щось один раз, а потім без проблем використати це на різних проектах. Наступна конструкція мови sass допоможе вам у цьому.

Scss - файл

1 2 3 4 5 6

#main (

color: black;

&-sidebar (

border: 1px solid red;

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

1 2 3 4 5 6

#main (

color: black;

#main-sidebar (

border: 1px solid red;

Я брав приклад із документації. У реальному житті згідно з БЕМ це буде не id-ік #mainа .mainАле суть від цього не зміниться. Наведу простий

27.07.2017

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

Що таке SASS?

SASS (Syntactically Awesome Style Sheets)- Один з найпопулярніших. Він являє собою набір функцій для CSS, які дозволяють кодувати швидше та ефективніше. SASS підтримує інтеграцію з Firefox Firebug. SassScript дозволяє створювати змінні, вкладені стилі та спадкові селектори.

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

Навіщо потрібний SASS?

Більшість фронтенд фреймворків, включаючи Bootstrap, Materialize та Foundation, створені за допомогою цього чудового препроцесора. Знання SASS допоможе вам використати більше функцій цих фреймворків.

Як використовувати SASS?

Існує багато програм, які дозволяють легко та швидко почати використовувати SASS: CodeKit, Compass, Koala і т.д. Ви дізнаєтесь про них в інших частинах туторіалу. У цьому розділі ми не будемо використовувати жодних програм або інструментів, крім тих, які необхідні для запуску SASS на комп'ютері. Вам не доведеться турбуватися про операційну систему, тому що все буде зрозуміло всім користувачам.

Скачування та встановлення SASS

Встановити SASS можна лише на машину, на якій вже є Ruby:

• Ruby встановлений на Mac, так що ви можете відразу встановити Sass Macintosh;
• Якщо ви працюєте на Windows, то вам необхідно спочатку завантажити Ruby;
• Ruby на Linux можна завантажити через систему керування пакетами (apt package manager), rbenv чи rvm.

Після встановлення Ruby на машину можна встановити SASS. Давайте відкриємо командний рядок Ruby та встановимо SASS на вашу систему:

Gem install sass

Якщо команда вище не спрацює, то вам, можливо, доведеться використовувати команду sudo:

Sudo gem install sass

Якщо ви хочете перевірити версію SASS, використовуйте таку команду:

SASS встановлено. Давайте створимо папку проекту та назвемо її sass-basic. Створіть базовий htmlфайл з наступним кодом:

My First SASS Project

Hello friend I am learning SASS and it's really awesome.

Body(text-align: center; ) h1( color: #333; ) p( color: #666; )

Тепер потрібно компілювати цей файл, використовуючи командний рядок/термінал. Давайте відкриємо командний рядок у тій же директорії (можливо доведеться використовувати командний рядок Ruby, якщо звичайний командний рядок не працює). Убийте наступне та натисніть Enter:

Sass --watch style.scss:style.css

Ви помітите, що згенерувалися нові файли: style.css та style.css.map. Варто відзначити, що не потрібно чіпати map файл, як і.css файл. Якщо ви хочете внести якісь зміни, це можна зробити через style.scss. Вам не доведеться повторювати цей процес при кожній зміні стилів. Компіляція SASS буде працювати автоматично при внесенні змін до файлу .scss.

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

Переклад статті: The Absolute Beginner's Guide to Sass.
Andrew Chalkley.

Що таке SASS?

SASSє абревіатурою від Syntactically Awesome Stylesheets- метамова на основі CSS, назву якого можна перекласти як «CSS з чудовим синтаксисом», розроблений Хемптон Кетлін (Hampton Catlin).

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

Чи доводилося вам, наприклад, колись, догоджаючи певному нерішучому клієнту, займатися переглядом всього вмісту файлу стилів для того, щоб знайти певне HEX-значення кольору з метою його заміни на інше? Або ж звертатися до додатку-калькулятора, який не завжди знаходиться під рукою, щоб прорахувати ширину колонки для багатоколонкового шаблону?

У розпорядженні SASS є засоби, які позбавлять вас подібної рутини. До них можна віднести змінні, міксини, вкладеністьі успадкування селекторів.

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

Як приклад візьмемо наступний фрагмент CSS коду:

#skyscraper_ad
{
display: block;
width: 120px;
height: 600px;
}

#leaderboard_ad
{
display: block;
width: 728px;
height: 90px;
}

Який еквівалентний ось такому SASS:

#skyscraper_ad
display: block
width: 120px
height: 600px

#leaderboard_ad
display: block
width: 728px
height: 90px

У SASS для позначення вкладеності фрагментів коду використовується інтервал (відступ на початку наступного рядка), що дорівнює двом пробілам. ( *В останньому сніпеті для наочності я виділив ці прогалини червоним тлом.)

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

Змінні.

У SASS для оголошення змінної необхідно перед її ім'ям використовувати символ долара $. І якщо ім'я вашої змінної, припустимо, red , то після двокрапки ми можемо вказати відповідне їй таке значення:

У SASS передбачені вбудовані функції типу darken та lighten, які можна використовувати для модифікування значень подібного типу змінних.

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

$red: #FF4848
$fontsize: 12px
h1
color: $red

p
color: darken($red, 10%)

Зі змінними ви можете робити арифметичні дії, такі як додавання та віднімання, за умови, що використовувані для цього значення мають один і той же тип даних. Якщо, наприклад, нам необхідно застосувати темніший відтінок, то все, що нам потрібно зробити, це відняти з вже використовуваного в коді значення кольору, що зберігається в змінній, невелике шістнадцяткове HEX-значення, що дорівнює, скажімо, #101. Це ж стосується і випадку, коли необхідно змінити значення розміру шрифту, припустимо, збільшити на 10 пікселів, для цього ми просто додаємо пікселі, що відсутні:

p.addition_and_subtraction
color: $red — #101
font-size: $fontsize + 10px

Вкладеність.

У SASS вкладеність буває двох типів.

Вкладення селекторів.

Це перший тип вкладеності, який схожий на те, який використовується для структурування HTMLкоду:

$fontsize: 12px

Speaker
.name
font:
weight: bold
size: $fontsize + 10px
.position
font:
size: $fontsize

Якщо ви подивитеся на згенерований в результаті CSS код, то будь-які коментарі будуть зайві. Шляхом вкладеності класу .name до класу .speaker ( * тим самим способом - за допомогою двох прогалин на початку наступного рядка) створюється CSS селектор .speaker.name. Це саме стосується і наступного імені класу .position , розташованого після декларування властивостей для першого селектора, в результаті вкладеності якого утворюється другий селектор .speaker.position :

Speaker.name (
font-weight: bold;
font-size: 22px; )
.speaker.position (
font-size: 12px; )

Вкладеність властивостей.

Другий тип вкладеності дозволяє структурувати властивості з одним префіксом (* font-family, font-size, font-weight або border-style, border-color, border-radius і т.д.):

$fontsize: 12px

Speaker
.name
font:
weight: bold
size: $fontsize + 10px
.position
font:
size: $fontsize

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

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

Speaker.name (
font-weight: bold;
font-size: 22px; )
.speaker.position (
font-size: 12px; )

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

Така вкладеність є чудовим способом організації та структурування вашого CSS коду і дозволяє уникнути його небажаного повторення. ( *DRY- "Don't Repeat Yourself" - "Не повторюйтеся". Ситуації, коли при CSS форматуванняпевних елементів їх стилі повторюються та/або перевизначаються в інших місцях, що ускладнює читабельність та обслуговування коду).

Міксини.

Ще однією чудовою можливістю SASS є міксини.

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

Для того, щоб визначити міксин, використовуйте спеціально зарезервоване в SASS ключове слово@mixin , а після нього вкажіть вибране ім'я міксину. Якщо є необхідність у аргументах, то перерахуйте їх у круглих дужках. Значення, які встановлюються для аргументу за умовчанням, вказуються щодо міксину через двокрапку. ( * Іншими словами, міксини є CSS функціями.)

Процедура використання міксинів дуже проста – після ключового слова @include вкажіть ім'я потрібного міксину та перерахуйте у дужках необхідні параметри, якщо такі є.

Погляньте на наступний приклад:

@mixin border-radius($amount: 5px) /* визначаємо міксин */
-moz-border-radius: $amount
-webkit-border-radius: $amount
border-radius: $amount

h1 /* використовуємо міксин */
@include border-radius(2px)

Speaker
@include border-radius

Цей SASS після компіляції буде перетворено на поданий нижче CSS код:

h1 (
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2x; )

Speaker (
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px; )

Для заголовка h1 ми явно вказали значення радіусу закруглення кутів кордону, але для елемента з ім'ям класу .speaker ми цього не робили, тому було взято дефолтне значення 5px.

Спадкування селекторів.

Інший чудовийособливістю SASS синтаксису є здатність селекторів наслідувати всі стилі, визначені для інших селекторів. Щоб скористатися такою можливістю, необхідно використовувати ключове слово @extend, після якого вказати селектор, всі властивості якого ви хочете успадкувати:

h1
border: 4px solid #ff9aa9

Speaker
@extend h1
border-width: 2px

Що буде скомпільовано в:

h1,.speaker (
border: 4px solid #ff9aa9; )

Speaker (
border-width: 2px; )

(*Зверніть увагу, декларація border: 4px solid #ff9aa9; не повторюється в рамках правила з селектором .speaker , а натомість до першого правила додається другий селектор. Інакше кажучи, дублювання коду немає.)

Спробуйте SASS у дії.

Онлайн.

Ви можете познайомитись з SASS онлайн без попереднього встановлення модуля на свій локальний комп'ютер.

Але перш ніж ви почнете експериментувати, в нижній області сторінки виберіть опцію "Indented Syntax".

Встановивши на комп'ютер.

Сам SASS є додатком (gem) платформи Ruby. Тому для встановлення без попередньої інсталяції самої платформи і менеджера пакетів цієї мови програмування RubyGems не обійтися. Після успішного встановлення самої платформи та менеджера виконайте в консолі наступну команду:

gem install sass

SASS модуль може бути використаний як інструмент для конвертування ваших SASS файлів у файли CSS формату в режимі командного рядка.

Це можна, наприклад, зробити, ввівши таку команду:

sass --watch sass_folder:stylesheets_folder

Де sass_folder - це шлях до папки, що містить SASS файли (тобто з розширенням.sass), а stylesheets_folder - шлях до папки, в якій будуть зберігатися отримані після компіляції, що результують CSS файли. Команда --watch повідомляє модулю, що він повинен стежити (watch ) за будь-якими змінами в зазначеній папці і якщо такі є, то після їх збереження конвертувати вихідні файли.sass в еквівалентні ім.css файли.

Зворотне конвертування CSS у SASS.

Ви можете розпочати використання SASS з того, що конвертуєте стилі, які використовуються у своїх вже функціонуючих проектах у цей формат за допомогою утиліти "sass-convert".

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

sass-convert --from css --to sass -R.

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