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 Сьогодні переглянуто раз (а)
Процес написання 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 \u003d\u003e "shay.jpg",: alt \u003d\u003e "Шей Хоу")% img (src: "shay.jpg", alt: "Шей Хоу")% img (src \u003d "shay.jpg" alt \u003d "(! LANG: Шей Хоу") !}
скомпільований HTML
Класи і ідентифікатори
При бажанні класи і ідентифікатори можуть бути оголошені подібно іншим атрибутам, проте вони також можуть бути оброблені трохи інакше. Замість перерахування атрибутів class та id з їх значеннями всередині дужок, значення може бути визначене безпосередньо після елемента. Використовуючи яку точку для класів, або грати для ідентифікатора, значення може бути додано одразу після елемента.
Крім того, атрибути можуть бути змішані, з'єднуючись разом у відповідному форматі. Класи повинні розділятися точками, а інші атрибути можуть бути додані за допомогою одного з раніше викладених форматів.
% Section.feature% section.feature.special% section # hello% section # hello.feature (role \u003d "region")
скомпільований HTML
Класи і ідентифікатори в У разі, якщо клас або ідентифікатор використовується в
, То% div може бути опущений, а значення класу або ідентифікатора може бути включено безпосередньо. Знову ж, класи повинні визначатися через точку, а ідентифікатори через решітку.Awesome .awesome.lesson # getting-started.lesson
скомпільований HTML
Логічні атрибути
Логічні атрибути обробляються так само, як якщо вони були б в Ruby або в HTML, в залежності від використовуваного синтаксису.
% Input (: type \u003d\u003e "checkbox",: checked \u003d\u003e true)% input (type \u003d "checkbox" checked \u003d true)% input (type \u003d "checkbox" checked)
скомпільований HTML
екранування тексту
Одним з переваг Haml є можливість обчислювати і запускати Ruby, однак це не завжди бажане дію. Текст і рядки коду можна екранувати за допомогою зворотного косою риси (\\), що дозволяє тексту відображатися в явному вигляді без виконання.
У наведеному нижче прикладі, перший зразок \u003d @author виконується Ruby, отримуючи ім'я авторів з програми. Другий зразок починається зі зворотним косою риси, що екранує текст, і друкується як є без виконання.
Author \u003d @author \\ \u003d @author
скомпільований HTML
Альтернативи екранування тексту
Час від часу екранування тексту недостатньо і Ruby необхідний для формування бажаного вихідного результату. Одним популярним прикладом для цього є спроба включити точку відразу після посилання, але не як частина тексту посилання. Розміщення точки на новому рядку не є прийнятним, оскільки це буде розглядатися як пусте значення класу, викликаючи помилку компіляції. Додавання зворотної косої риски перед точкою екранує символ, однак поставить пробіл між останнім словом та точкою. Знову ж, не проводячи бажаного результату.
У цих випадках знадобиться помічник Ruby. У наведеному нижче прикладі помічник використовується для розміщення точки безпосередньо після останнього слова, але за межами тексту посилання.
% P Шей - \u003d succeed "." do% a (: href \u003d\u003e "#") молодець
скомпільований HTML
Шей - молодець.
Коментарі
Подібно елементів і атрибутів, коментарі в Haml обробляються трохи по-іншому. Код може бути прокоментований досить просто з використанням однієї косою риси (/). Окремі рядки можуть бути закоментовані за допомогою косою риси на початку рядка, а блоки коду можуть бути закоментовані, будучи вкладеними під косою рисою.
% Div / Рядок коментаря Актуальна рядок /% div закоментувавши блок
скомпільований HTML
Актуальна рядок
умовні коментарі
Умовні коментарі також обробляються по іншому в Haml. Щоб створити умовний коментар використовуйте квадратні дужки () навколо умови. Ці квадратні дужки повинні бути розміщені безпосередньо після косою риси.
/% Script (: src \u003d\u003e "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
Фільтри CSS і Sass
: Css .container (margin: 0 auto; width: 960px;): sass .container margin: 0 auto width: 960px
скомпільований HTML
інтерполяція Ruby
Як згадувалося раніше, Haml може обчислювати Ruby, а іноді можуть виникати випадки, коли Ruby повинен обчислюватися всередині звичайного тексту. В цьому випадку Ruby повинен бути інтерполювати шляхом обгортання необхідного коду на Ruby.
Нижче наведено приклад на Ruby, який інтерполюється як частина імені класу.
% Div (: class \u003d\u003e "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: focus (color: blue)
Лаконічно, зручно, зрозуміло, структура від батька до нащадка - здорово, чи не так? Другим, і не менш важливим, перевагою, є змінні. Принцип роботи їх гранично простий: ім'я змінної починається з символу $, а далі саме ім'я. Через двокрапка пишемо значення - це може бути колір в будь-якому зручному вигляді, значення відступу, ширини, розміру шрифту і так далі. У підсумку ми отримаємо приблизно наступне:
$ Btn-color: blue;
$ Font-main-size: 16px;
А використання буде виглядати наступним чином:
Block (
font-size: $ font-main-size;
}
Тільки уявіть собі, як це зручно. Якщо вам потрібно поміняти колір кнопок по всьому сайту, то це досить зробити тільки в одному місці! Що ж, йдемо далі. Третє, і найбільше, що може нам запропонувати CSS-препроцесорів - це використання Міксини. У звичному для нас розумінні, міксини - це функції, які можна використовувати кілька разів, не повторюючи одні і ті ж частини коду (пам'ятаємо про одне із принципів програмування - DRY - Do not 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) Syntactically Awesome Style Sheets.
SCSS - (.scss) Sassy Cascading Style Sheets.
Расшіренія.sass і.scss схожі, але все-таки не однакові. Для фанатів командного рядка наводимо спосіб конвертації:
# Конвертація з Sass в SCSS $ sass-convert style.sass style.css # Конвертація з SCSS в Sass $ sass-convert style.scss style.sass
Sass - перша специфікація для SCSS з розширенням файла.sass. Її розробка почалася ще в 2006 році, але пізніше був розроблений альтернативний синтаксис з расшіреніем.scss.
Зверніть увагу Інші препроцесори функціональністю схожі на 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; #C p (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 \u003d\u003d 5 * 6).
Виняток можна множити пікселі між собою. Тобто, 10px * 10px! \u003d 100px. 10px * 10 \u003d\u003d 100px.
P (width: 10px * 10px; // ПОМИЛКА! Width: 10px * 10; // 100px width: 1px * 5 + 5px; // 10px width: 5 * (5px + 5px); // 50px width: 5px + ( 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; // поділ виконується (якщо використовувати в парі з функцією) top: 2px / 4px + 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 \u003d\u003d 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
Оператори порівняння
Директива @if приймає вираз SassScript і використовує вкладені в неї стилі в разі, якщо вираз повертає будь-яке значення, крім false або null.
Нижче показано, як працюють директиви @if і @else, вкладені в миксин.
@mixin spacing ($ padding, $ margin) (@if ($ padding\u003e $ 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 >\u003d 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. Рекомендується не використовувати content в CSS-документі, а безпосередньо використовувати його між тегами в HTML.
Оператори управління потоками
У SCSS є функції (fucntion ()) і директиви (@directive). Трохи вище ми вже розглядали приклад функції, коли вивчали передачу аргументів всередині Міксини.
Функції зазвичай полягають в дужки, наступні відразу за її ім'ям. А директива починається з символу @.
Подібно JavaScript, SCSS дозволяє працювати зі стандартним набором операторів управління потоками.
if ()
if () - це функція (і іноді основа штучного інтелекту).
Її використання виглядає досить примітивним: оператор поверне одне з двох позначених в умови значень.
/ * Використання функції if () * / if (true, 1px, 2px) \u003d\u003e 1px; if (false, 1px, 2px) \u003d\u003e 2px;
@if
@if - це директива, що використовується для розгалуження на основі умови.
/ * Використання директиви @if * / p (@if 1 + 1 \u003d\u003d 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 \u003d\u003d river (color: blue;)) / * Умовні кольори для тексту в тезі
* / P (@if $ type \u003d\u003d tree (color: green;) @else if $ type \u003d\u003d river (color: blue;) @else if $ type \u003d\u003d 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;) .definition-5 (width: 50px;)
Директива @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: url ( "/ images / sheep.png");) .dove-icon (background-image: url ( "/ images / dove.png");)
Директива @while
Директива @while приймає вираз SassScript і циклічно виводить вкладені в неї стилі, поки вираз обчислюється як true. Вона може бути використана для створення більш складних циклів, ніж таких, для яких підходить @for, хоча вона буває необхідна досить рідко. наприклад:
$ Index: 5; @while $ index\u003e 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;) .element-1 (width: 10px;)
Функції в 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-картинка, вставлена \u200b\u200bв 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\u003e 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"), потрібно конвертувати його в радіани. @if $ unit \u003d\u003d deg ($ unitless: $ unitless / 180 * PI ();) @return $ unitless;)
Для обчислення тангенса функцією tan () потрібно застосувати функції sin () і cos () ..
Стаття на NetTuts +, написана Johnathan Croom в 2012 році.
Основна мета статті - показати перевагу використання будь-якого з трьох описаних в ній препроцесорів Sass, LESS і Stylus. Огляд прекрасно підійде для новачків, які тільки відкривають для себе цю грань веб-дизайну.
У цій статті ми розглянемо переваги і вигоди використання трьох різних препроцесорів - Sass, LESS і Stylus.
Вступ
Препроцесори CSS були створені з однією єдиною метою - додати стильовим таблиць CSS міць і одночасну гнучкість без порушення крос-браузерності. Все препроцесори компілюють створений за допомогою їх синтаксису код в стандартний CSS-код, який розуміє і використовує будь-який браузер, яким би давнім він ( браузер) не був.
Існують безліч переваг, які привносять препроцесори в таблиці стилів CSS і в цій статті ми розглянемо тільки деякі з них, як добре відомі, так і мало поширені. Давайте приступимо до огляду.
синтаксис
Найбільш важливою частиною при написанні коду в будь-якому препроцесорів CSS є його синтаксис. У щастя для нас, синтаксис всіх трьох препроцесорів, які ми будемо розглядати, мають CSS-подібний вид.
Sass & LESS
Обидва препроцесора Sass і LESS мають стандартний CSS-синтаксис. Це робить задачу конвертації вже існуючого CSS-коду в синтаксис будь-якого з цих препроцесорів простий і швидкою. Sass використовує для своїх файлів розширення
1
.scss
, LESS - розширення 1
.less
.
Вид звичайного файлу в синтаксисі Sass або LESS представлений нижче:
/ * Style.scss або style.less * / h1 (color: # 0982c1;) Добре видно, що це звичайний синтаксис CSS, який прекрасно конвертується в Sass (SCSS) або LESS.
Важливо звернути увагу, що Sass (SCSS) також має стару версію синтаксису Sass, в якій опущені крапки з комою і фігурні дужки.
Незважаючи на те, що такий синтаксис все ще можна застосовувати на практиці, він є застарілим і ми не будемо використовувати його в наших прикладах.
Синтаксис Sass ( стара версія) виглядає наступним чином:
/ * Style.sass * / h1 color: 0982c1 Stylus
Для своїх файлів цей препроцесор використовує розширення
1
.styl
. Синтаксис препроцесора Stylus більш багатослівний ( прим. перекладача: автор щось наплутав тут) В ньому застосовується за основу стандартний синтаксис CSS, але допускається застосування різного поєднання дужок, двокрапок і точок з комою. Приклади синтаксису Stylus:
/ * CSS-подібний синтаксис * / h1 (color: # 0982C1;) / * Опущені фігурні дужки * / h1 color: # 0982C1; / * Опущені фігурні дужки, двокрапки і крапки з комою * / h1 color # 0982C1 Всі варіанти синтаксису, показані вище, є валідними і в результаті компіляції виходить правильний CSS-код. Наприклад, такий код скомпілюється в стандартний CSS без помилок:
h1 (color # 0982c1) h2 font-size: 1 .2em змінні
У препроцесорів змінні оголошуються і використовуються всередині файлів стилів CSS. Змінні можуть приймати будь-яке значення, допустиме в CSS (колір, число або текст) і може посилатися з будь-якого місця CSS-документа.
Sass
У препроцесорів Sass змінна оголошується за допомогою символу
1
$
, При цьому ім'я змінної і її значення відокремлюються одна від одної двокрапкою так, як це робиться в CSS: $ mainColor: # 0982c1; $ SiteWidth: 1024px; $ BorderStyle: dotted; body (color: $ mainColor; border: 1px $ borderStyle $ mainColor; max-width: $ siteWidth;) LESS
Змінні в LESS точно такі ж, як і в Sass, за винятком того, що перед ім'ям змінної ставиться символ
1
@
: @MainColor: # 0982c1; @siteWidth: 1024px; @borderStyle: dotted; body (color: @ mainColor; border: 1px @ borderStyle @ mainColor; max-width: @ siteWidth;) Stylus
Змінні в Stylus не потребують ні в якому знаку для свого оголошення, але, тим не менш, можуть використовувати символ
, Але при виклику цієї змінної в коді підстановки значення змінної не відбувається. Іншими словами, не виконується така операція:
mainColor \u003d # 0982c1 siteWidth \u003d 1024px $ borderStyle \u003d dotted body color mainColor border 1px $ borderStyle mainColor max-width siteWidth скомпільований CSS
Кожен з представлених у вигляді прикладу файлів компілюється в точно такій же CSS-код. Ви можете включити уяву, щоб уявити, наскільки корисними можуть бути змінні.
Завдяки їм відпадає необхідність ставити значення кольору і потім двадцять разів повторювати його в CSS-коді. Або ж поставлена \u200b\u200bзадача змінити ширину сайту і для цього необхідно "перерити" код в пошуках цієї величини.
Нижче представлений CSS-код після виконання компіляції:
body (color: # 0982c1; border: 1px dotted # 0982c1; max-width: 1024px;) Вкладеність (nesting)
Якщо в коді CSS поставлена \u200b\u200bзадача звернутися одночасно до кількох елементів, які мають одного і того ж батька, то писати знову і знову цього батька - заняття виснажливе.
Наприклад, так:
Замість цього, використовуючи можливості препроцесора, ми можемо помістити всі дочірні селектори всередині дужок елемента-батька. Крім того, символ
1
&
є посиланням ( скороченням) На селектор елемента-батька. 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;) Підмішування (mixins)
1
mixins
є функціями, які дозволяють багаторазово використовувати згруповані властивості всередині CSS-коду. Замість того, щоб переглядати весь код в пошуках потрібних рядків для їх зміни, тепер можна вносити зміни тільки один раз, всередині міксина. Застосування підмішування особливо виправдовує себе при створенні специфічних стилів для елементів або простановке браузерних префіксів. Коли миксин викликається всередині CSS-селектора, відбувається розпізнавання аргументів цього міксина, потім його стилі застосовуються до селектору, який його викликав.
Прим. перекладача: в наведених нижче прикладах варто звернути увагу на різницю в синтаксисі оголошення і виклику міксина всередині CSS-селектора для всіх трьох препроцесорів.
Sass
/ * Sass mixin на ім'я error з аргументом $ borderWidth, значення якого за замовчуванням дорівнює 2px * / @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
/ * LESS mixin на ім'я error з аргументом $ borderWidth, значення якого за замовчуванням дорівнює 2px * / .error (@borderWidth: 2px) (border: @ borderWidth solid # F00; color: # F00;) .generic-error (padding: 20px; margin: 4px; .error (); / * Підключається миксин на ім'я error * / ) .Login-error (left: 12px; position: absolute; top: 20px; .error (5px); / * Підключається миксин на ім'я error зі значенням аргументу $ borderWidth, рівним 5px; тобто відбувається перевизначення значення аргументу * /
}
Style
/ * Stylus mixin на ім'я error з аргументом $ borderWidth, значення якого за замовчуванням дорівнює 2px * / error (borderWidth \u003d 2px) (border: borderWidth solid # F00; color: # F00;) .generic-error (padding: 20px; margin: 4px; error (); / * Підключається миксин на ім'я error * / ) .Login-error (left: 12px; position: absolute; top: 20px; error (5px); / * Підключається миксин на ім'я error зі значенням аргументу $ borderWidth, рівним 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;) Спадкування (inheritance)
При написанні CSS стилів "класичним" способом, для того щоб застосувати одні й ті ж властивості до кількох елементів в HTML-документі, нам слід було б створити такий код:
p, ul, ol ( / * Якісь стилі тут * /
}
Все працює чудово. Але якщо буде потрібно написати стилі окремо для кожного з цих селекторів, потрібно буде створювати окремі правила для кожного з них. І відразу ж код таблиць стилів ставати неохайним і важко підтримуваним.
На противагу цьому застосовуються успадкування. Спадкування - це можливість для одних CSS-селекторів успадковувати властивості в іншого селектора.
Прим. перекладача: зверніть увагу на однаковий синтаксис підключення (оголошення) успадкування всередині CSS-селектора за допомогою директиви
1
@extend
.
Sass & Stylus
.block (margin: 10px 5px; padding: 2px;) p (@extend .block; border: 1px solid #EEE;) ul, ol (@extend .block; / * Успадковувати властивості у селектора класса.block * /скомпільований CSS
.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-стилі.
Ось як може виглядати LESS-код з успадкуванням:
.block (margin: 10px 5px; padding: 2px;) p (.block; border: 1px solid #EEE;) ul, ol (.block; / * Успадкування властивостей у селектора класса.block * / color: # 333; text-transform: uppercase; ) скомпільований CSS
.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;) Як добре видно з коду, стилі класу
.
Імпорт
В CSS-співтоваристві до імпортування стилів за допомогою директиви
1
@import
існує стійке негативне ставлення, так як такий підхід породжує множинні HTTP-запити до сервера, що уповільнює роботу браузера і навантажує сам сервер. Однак, в препроцесорів технологія імпортування працює інакше. У будь-якому з трьох препроцесорів імпортування одного файлу всередину іншого фактично призводить до вставки коду одного файлу в інший при компіляції, в результаті якої виходить один CSS-файл.
Прим. перекладача: іншими словами, в препроцесорів імпортування необхідно для компіляції одного файлу з декількох. У стандартному CSS імпортування призводить до підстановці одного коду всередину іншого.
Зверніть увагу, що при компіляції файлу зі стандартним підключенням за допомогою директиви
1
@import "file.css"
всередині нього компіляції останнього не відбувається. А ось міксини або змінні імпортуються і використовуються в стильовому файлі, як годиться. Технологія імпортування дуже зручна, так як вона дозволяє створювати безліч окремих файлів для правильної організації проекту. / * File. (Type) * / body (background: #EEE;) @import "reset.css"; @import "file. (type)"; p (background: # 0982C1;) скомпільований CSS
@import "reset.css"; body (background: #EEE;) p (background: # 0982C1;) Функції роботи з кольором
"Кольорові" функції створені для трансформації кольору при компіляції. Такі функції надзвичайно корисні при створенні градієнтів, затемнення кольору при
1
hover
і багато іншого. Sass
lighten ($ color, 10%); darken ($ color, 10%); saturate ($ color, 10%); desaturate ($ color, 10%); grayscale ($ color); / * Повертає шкалу півтонів кольору $ color * / complement ($ color); / * Returns complement color of $ color * / invert ($ color); / * Повертає інвертований колір від $ color * / mix ($ color1, $ color2, 50%); Представлений вище код є всього лише коротким списком функцій роботи з кольором в Sass. Повний список всіх доступних функцій розташований за адресою Sass Documentation.
"Кольорові" функції можуть використовуватися скрізь, де потрібна робота з квітів в коді. Простий приклад - оголошена змінна з кольором, до якої далі в коді застосовується функція затемнення кольору
1
darken
: $ Color: # 0982C1; h1 (background: $ color; border: 3px solid darken ($ color, 50%);) LESS
lighten (@color, 10%); / * Повертає колір на 10% світліше ніж $ color * / darken (@color, 10%); / * Повертає колір на 10% темніше ніж $ color * / saturate (@color, 10%); / * Повертає колір на 10% більш насичений ніж $ color * / / * Повертає колір на 10% менше насичений ніж $ color * / spin (@color, 10); / * Повертає колір, зміщений на 10 градусів вправо щодо кольору @color * / spin (@color, -10); / * Повертає колір, зміщений на 10 градусів вліво щодо кольору @color * / mix (@ color1, @ color2); / * Повертає результат змішування кольору $ color1 з кольором $ color2 * /
Список функцій препроцесора LESS знаходиться на офіційному сайті проекту LESS Documentation.
Нижче показаний приклад того, як можна застосовувати "колірні" функції в LESS:
@color: # 0982C1; h1 (background: @ color; border: 3px solid darken (@ color, 50%);) Stylus
lighten (@color, 10%); / * Повертає колір на 10% світліше ніж $ color * / darken (@color, 10%); / * Повертає колір на 10% темніше ніж $ color * / saturate (@color, 10%); / * Повертає колір на 10% більш насичений ніж $ color * / desaturate (@color, 10%); / * Повертає колір на 10% менше насичений ніж $ color * /
Повний список всіх функцій роботи з кольором препроцесора Stylus представлений на сайті проекту Stylus Documentation.
І приклад використання "колірної" функції в Stylus:
color \u003d # 0982C1 h1 background color border 3px solid darken (color, 50%) арифметичні операції
Завдяки препроцесорів виконання арифметичних операцій всередині CSS-коду тепер здійснюється просто і легко. Така можливість часто буває корисною.
Прим. перекладача: варто згадати про функції з CSS3 по імені
1
calc ()
, Яка також дозволяє виконувати всередині CSS-коду прості арифметичні операції.
Sass, LESS & Stylus
body (margin: (14px / 2); top: 50px + 100px; right: 100px - 50px; left: 10 * 10;) практичні приклади
Ось ми і розглянули основні моменти того, що і як вміють робити все три препроцесора. Однак ми ще жодного разу не торкнулися моменту практичного застосування цих можливостей. Нижче показаний список реальних веб-додатків, в яких використовуються препроцесори, помітно покращуючи при цьому весь код.
браузерні префікси
Одним з найбільш яскравих прикладів переваги використання препроцесорів є написання з їх допомогою властивостей з браузерних префіксами. Один раз створивши миксин з підтримкою браузерних префіксів, ми позбавляємо себе від рутинної роботи.
Наприклад, створимо для всіх трьох препроцесорів миксин заокруглення кутів блоку:
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;) тривимірний текст
Створення ефекту тривимірності для тексту за допомогою CSS-властивості
1
text-shadow
є чудовою ідеєю. Єдина проблема полягає в роботі з кольором, яка досить важка і обтяжлива. Використовуючи міксини і функції для роботи з кольором, ми можемо створити об'ємний текст і змінювати його колір на льоту:
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)
У прикладі для Stylus я вибрав варіант написання властивості
1
text-shadow
в один рядок, так як тут я опустив фігурні дужки. скомпільований 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
;
}
колонки
Використання змінних і числових значень для цих змінних прийшла мені в голову, коли я тільки почав знайомитися з можливостями CSS-препроцесорів. Оголошення ширини для макета всередині змінної робить задачу зміни цієї ширини ( за потреби) Простий і швидкої:
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[Email protected]
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-коду знаходитися помилка ( і всі щасливі).
Якщо вас зацікавила подібна можливість у всіх трьох препроцесорів, то в цій статті докладно описано, як виконати це налаштування.
У разі, якщо клас або ідентифікатор використовується в
Awesome .awesome.lesson # getting-started.lesson
скомпільований HTML
Логічні атрибути
Логічні атрибути обробляються так само, як якщо вони були б в Ruby або в HTML, в залежності від використовуваного синтаксису.
% Input (: type \u003d\u003e "checkbox",: checked \u003d\u003e true)% input (type \u003d "checkbox" checked \u003d true)% input (type \u003d "checkbox" checked)
скомпільований HTML
екранування тексту
Одним з переваг Haml є можливість обчислювати і запускати Ruby, однак це не завжди бажане дію. Текст і рядки коду можна екранувати за допомогою зворотного косою риси (\\), що дозволяє тексту відображатися в явному вигляді без виконання.
У наведеному нижче прикладі, перший зразок \u003d @author виконується Ruby, отримуючи ім'я авторів з програми. Другий зразок починається зі зворотним косою риси, що екранує текст, і друкується як є без виконання.
Author \u003d @author \\ \u003d @author
скомпільований HTML
Альтернативи екранування тексту
Час від часу екранування тексту недостатньо і Ruby необхідний для формування бажаного вихідного результату. Одним популярним прикладом для цього є спроба включити точку відразу після посилання, але не як частина тексту посилання. Розміщення точки на новому рядку не є прийнятним, оскільки це буде розглядатися як пусте значення класу, викликаючи помилку компіляції. Додавання зворотної косої риски перед точкою екранує символ, однак поставить пробіл між останнім словом та точкою. Знову ж, не проводячи бажаного результату.
У цих випадках знадобиться помічник Ruby. У наведеному нижче прикладі помічник використовується для розміщення точки безпосередньо після останнього слова, але за межами тексту посилання.
% P Шей - \u003d succeed "." do% a (: href \u003d\u003e "#") молодець
скомпільований HTML
Шей - молодець.
Коментарі
Подібно елементів і атрибутів, коментарі в Haml обробляються трохи по-іншому. Код може бути прокоментований досить просто з використанням однієї косою риси (/). Окремі рядки можуть бути закоментовані за допомогою косою риси на початку рядка, а блоки коду можуть бути закоментовані, будучи вкладеними під косою рисою.
% Div / Рядок коментаря Актуальна рядок /% div закоментувавши блок
скомпільований HTML
умовні коментарі
Умовні коментарі також обробляються по іншому в Haml. Щоб створити умовний коментар використовуйте квадратні дужки () навколо умови. Ці квадратні дужки повинні бути розміщені безпосередньо після косою риси.
/% Script (: src \u003d\u003e "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
Фільтри CSS і Sass
: Css .container (margin: 0 auto; width: 960px;): sass .container margin: 0 auto width: 960px
скомпільований HTML
інтерполяція Ruby
Як згадувалося раніше, Haml може обчислювати Ruby, а іноді можуть виникати випадки, коли Ruby повинен обчислюватися всередині звичайного тексту. В цьому випадку Ruby повинен бути інтерполювати шляхом обгортання необхідного коду на Ruby.
Нижче наведено приклад на Ruby, який інтерполюється як частина імені класу.
% Div (: class \u003d\u003e "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: focus (color: blue)
Лаконічно, зручно, зрозуміло, структура від батька до нащадка - здорово, чи не так? Другим, і не менш важливим, перевагою, є змінні. Принцип роботи їх гранично простий: ім'я змінної починається з символу $, а далі саме ім'я. Через двокрапка пишемо значення - це може бути колір в будь-якому зручному вигляді, значення відступу, ширини, розміру шрифту і так далі. У підсумку ми отримаємо приблизно наступне:
$ Btn-color: blue;
$ Font-main-size: 16px;
А використання буде виглядати наступним чином:
Block (
font-size: $ font-main-size;
}
Тільки уявіть собі, як це зручно. Якщо вам потрібно поміняти колір кнопок по всьому сайту, то це досить зробити тільки в одному місці! Що ж, йдемо далі. Третє, і найбільше, що може нам запропонувати CSS-препроцесорів - це використання Міксини. У звичному для нас розумінні, міксини - це функції, які можна використовувати кілька разів, не повторюючи одні і ті ж частини коду (пам'ятаємо про одне із принципів програмування - DRY - Do not 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) Syntactically Awesome Style Sheets.
SCSS - (.scss) Sassy Cascading Style Sheets.
Расшіренія.sass і.scss схожі, але все-таки не однакові. Для фанатів командного рядка наводимо спосіб конвертації:
# Конвертація з Sass в SCSS $ sass-convert style.sass style.css # Конвертація з SCSS в Sass $ sass-convert style.scss style.sass
Sass - перша специфікація для SCSS з розширенням файла.sass. Її розробка почалася ще в 2006 році, але пізніше був розроблений альтернативний синтаксис з расшіреніем.scss.
Зверніть увагу Інші препроцесори функціональністю схожі на 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; #C p (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 \u003d\u003d 5 * 6).
Виняток можна множити пікселі між собою. Тобто, 10px * 10px! \u003d 100px. 10px * 10 \u003d\u003d 100px.
P (width: 10px * 10px; // ПОМИЛКА! Width: 10px * 10; // 100px width: 1px * 5 + 5px; // 10px width: 5 * (5px + 5px); // 50px width: 5px + ( 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; // поділ виконується (якщо використовувати в парі з функцією) top: 2px / 4px + 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 \u003d\u003d 1) (.stripe - # ($ i) (background-color: black; color: white;)))) * (@include zebra (); text-align: center;)
Створення міксина zebra показано у вставці коду зверху. Директиви @for і @if описані в секції нижче.
Для створення зразка треба написати кілька HTML-елементів.
Результат в браузері:
Зебра успішно згенерована Міксини zebra
Оператори порівняння
Директива @if приймає вираз SassScript і використовує вкладені в неї стилі в разі, якщо вираз повертає будь-яке значення, крім false або null.
Нижче показано, як працюють директиви @if і @else, вкладені в миксин.
@mixin spacing ($ padding, $ margin) (@if ($ padding\u003e $ 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 >\u003d 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. Рекомендується не використовувати content в CSS-документі, а безпосередньо використовувати його між тегами в HTML.
Оператори управління потоками
У SCSS є функції (fucntion ()) і директиви (@directive). Трохи вище ми вже розглядали приклад функції, коли вивчали передачу аргументів всередині Міксини.
Функції зазвичай полягають в дужки, наступні відразу за її ім'ям. А директива починається з символу @.
Подібно JavaScript, SCSS дозволяє працювати зі стандартним набором операторів управління потоками.
if ()
if () - це функція (і іноді основа штучного інтелекту).
Її використання виглядає досить примітивним: оператор поверне одне з двох позначених в умови значень.
/ * Використання функції if () * / if (true, 1px, 2px) \u003d\u003e 1px; if (false, 1px, 2px) \u003d\u003e 2px;
@if
@if - це директива, що використовується для розгалуження на основі умови.
/ * Використання директиви @if * / p (@if 1 + 1 \u003d\u003d 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 \u003d\u003d river (color: blue;)) / * Умовні кольори для тексту в тезі
* / P (@if $ type \u003d\u003d tree (color: green;) @else if $ type \u003d\u003d river (color: blue;) @else if $ type \u003d\u003d 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;) .definition-5 (width: 50px;)
Директива @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: url ( "/ images / sheep.png");) .dove-icon (background-image: url ( "/ images / dove.png");)
Директива @while
Директива @while приймає вираз SassScript і циклічно виводить вкладені в неї стилі, поки вираз обчислюється як true. Вона може бути використана для створення більш складних циклів, ніж таких, для яких підходить @for, хоча вона буває необхідна досить рідко. наприклад:
$ Index: 5; @while $ index\u003e 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;) .element-1 (width: 10px;)
Функції в 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 пікселям.
Функції в Sass можуть повертати будь коректне значення CSS і можуть бути призначені будь-якому властивості. Вони навіть можуть бути розраховані на основі переданого аргументу.
@function double ($ width) (@return $ width * 2;)
тригонометрія
Тригонометричні функції sin () і cos () часто зустрічаються у вигляді вбудованих класів у багатьох мовах, таких як JavaScript, наприклад.
Їх роботу варто вивчати, якщо потрібно скоротити час, що витрачається на розробку анімацій призначеного для користувача інтерфейсу, наприклад для створення тробер. Ми, до речі, вже про це в одній зі статей. Але в даному випадку це буде код, а не gif-картинка, вставлена \u200b\u200bв 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\u003e 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"), потрібно конвертувати його в радіани. @if $ unit \u003d\u003d deg ($ unitless: $ unitless / 180 * PI ();) @return $ unitless;)
Для обчислення тангенса функцією tan () потрібно застосувати функції sin () і cos () ..
Стаття на NetTuts +, написана Johnathan Croom в 2012 році.
Основна мета статті - показати перевагу використання будь-якого з трьох описаних в ній препроцесорів Sass, LESS і Stylus. Огляд прекрасно підійде для новачків, які тільки відкривають для себе цю грань веб-дизайну.
У цій статті ми розглянемо переваги і вигоди використання трьох різних препроцесорів - Sass, LESS і Stylus.
Вступ
Препроцесори CSS були створені з однією єдиною метою - додати стильовим таблиць CSS міць і одночасну гнучкість без порушення крос-браузерності. Все препроцесори компілюють створений за допомогою їх синтаксису код в стандартний CSS-код, який розуміє і використовує будь-який браузер, яким би давнім він ( браузер) не був.
Існують безліч переваг, які привносять препроцесори в таблиці стилів CSS і в цій статті ми розглянемо тільки деякі з них, як добре відомі, так і мало поширені. Давайте приступимо до огляду.
синтаксис
Найбільш важливою частиною при написанні коду в будь-якому препроцесорів CSS є його синтаксис. У щастя для нас, синтаксис всіх трьох препроцесорів, які ми будемо розглядати, мають CSS-подібний вид.
Sass & LESS
Обидва препроцесора Sass і LESS мають стандартний CSS-синтаксис. Це робить задачу конвертації вже існуючого CSS-коду в синтаксис будь-якого з цих препроцесорів простий і швидкою. Sass використовує для своїх файлів розширення
| 1 | .scss |
| 1 | .less |
Вид звичайного файлу в синтаксисі Sass або LESS представлений нижче:
/ * Style.scss або style.less * / h1 (color: # 0982c1;)Добре видно, що це звичайний синтаксис CSS, який прекрасно конвертується в Sass (SCSS) або LESS.
Важливо звернути увагу, що Sass (SCSS) також має стару версію синтаксису Sass, в якій опущені крапки з комою і фігурні дужки.
Незважаючи на те, що такий синтаксис все ще можна застосовувати на практиці, він є застарілим і ми не будемо використовувати його в наших прикладах.
Синтаксис Sass ( стара версія) виглядає наступним чином:
/ * Style.sass * / h1 color: 0982c1Stylus
Для своїх файлів цей препроцесор використовує розширення
| 1 | .styl |
Приклади синтаксису Stylus:
/ * CSS-подібний синтаксис * / h1 (color: # 0982C1;) / * Опущені фігурні дужки * / h1 color: # 0982C1; / * Опущені фігурні дужки, двокрапки і крапки з комою * / h1 color # 0982C1Всі варіанти синтаксису, показані вище, є валідними і в результаті компіляції виходить правильний CSS-код. Наприклад, такий код скомпілюється в стандартний CSS без помилок:
h1 (color # 0982c1) h2 font-size: 1 .2emзмінні
У препроцесорів змінні оголошуються і використовуються всередині файлів стилів CSS. Змінні можуть приймати будь-яке значення, допустиме в CSS (колір, число або текст) і може посилатися з будь-якого місця CSS-документа.
Sass
У препроцесорів Sass змінна оголошується за допомогою символу
| 1 | $ |
LESS
Змінні в LESS точно такі ж, як і в Sass, за винятком того, що перед ім'ям змінної ставиться символ
| 1 | @ |
Stylus
Змінні в Stylus не потребують ні в якому знаку для свого оголошення, але, тим не менш, можуть використовувати символ
, Але при виклику цієї змінної в коді підстановки значення змінної не відбувається.Іншими словами, не виконується така операція:
mainColor \u003d # 0982c1 siteWidth \u003d 1024px $ borderStyle \u003d dotted body color mainColor border 1px $ borderStyle mainColor max-width siteWidthскомпільований CSS
Кожен з представлених у вигляді прикладу файлів компілюється в точно такій же CSS-код. Ви можете включити уяву, щоб уявити, наскільки корисними можуть бути змінні.
Завдяки їм відпадає необхідність ставити значення кольору і потім двадцять разів повторювати його в CSS-коді. Або ж поставлена \u200b\u200bзадача змінити ширину сайту і для цього необхідно "перерити" код в пошуках цієї величини.
Нижче представлений CSS-код після виконання компіляції:
body (color: # 0982c1; border: 1px dotted # 0982c1; max-width: 1024px;)Вкладеність (nesting)
Якщо в коді CSS поставлена \u200b\u200bзадача звернутися одночасно до кількох елементів, які мають одного і того ж батька, то писати знову і знову цього батька - заняття виснажливе.
Наприклад, так:
Замість цього, використовуючи можливості препроцесора, ми можемо помістити всі дочірні селектори всередині дужок елемента-батька. Крім того, символ
| 1 | & |
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;)Підмішування (mixins)
| 1 | mixins |
Застосування підмішування особливо виправдовує себе при створенні специфічних стилів для елементів або простановке браузерних префіксів. Коли миксин викликається всередині CSS-селектора, відбувається розпізнавання аргументів цього міксина, потім його стилі застосовуються до селектору, який його викликав.
Прим. перекладача: в наведених нижче прикладах варто звернути увагу на різницю в синтаксисі оголошення і виклику міксина всередині CSS-селектора для всіх трьох препроцесорів.
Sass
/ * Sass mixin на ім'я error з аргументом $ borderWidth, значення якого за замовчуванням дорівнює 2px * / @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
/ * LESS mixin на ім'я error з аргументом $ borderWidth, значення якого за замовчуванням дорівнює 2px * / .error (@borderWidth: 2px) (border: @ borderWidth solid # F00; color: # F00;) .generic-error (padding: 20px; margin: 4px; .error (); / * Підключається миксин на ім'я error * / ) .Login-error (left: 12px; position: absolute; top: 20px; .error (5px); / * Підключається миксин на ім'я error зі значенням аргументу $ borderWidth, рівним 5px; тобто відбувається перевизначення значення аргументу * / }Style
/ * Stylus mixin на ім'я error з аргументом $ borderWidth, значення якого за замовчуванням дорівнює 2px * / error (borderWidth \u003d 2px) (border: borderWidth solid # F00; color: # F00;) .generic-error (padding: 20px; margin: 4px; error (); / * Підключається миксин на ім'я error * / ) .Login-error (left: 12px; position: absolute; top: 20px; error (5px); / * Підключається миксин на ім'я error зі значенням аргументу $ borderWidth, рівним 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;)Спадкування (inheritance)
При написанні CSS стилів "класичним" способом, для того щоб застосувати одні й ті ж властивості до кількох елементів в HTML-документі, нам слід було б створити такий код:
p, ul, ol ( / * Якісь стилі тут * / }Все працює чудово. Але якщо буде потрібно написати стилі окремо для кожного з цих селекторів, потрібно буде створювати окремі правила для кожного з них. І відразу ж код таблиць стилів ставати неохайним і важко підтримуваним.
На противагу цьому застосовуються успадкування. Спадкування - це можливість для одних CSS-селекторів успадковувати властивості в іншого селектора.
Прим. перекладача: зверніть увагу на однаковий синтаксис підключення (оголошення) успадкування всередині CSS-селектора за допомогою директиви
.
1 @extend
Sass & Stylus
.block (margin: 10px 5px; padding: 2px;) p (@extend .block; border: 1px solid #EEE;) ul, ol (@extend .block; / * Успадковувати властивості у селектора класса.block * /скомпільований CSS
.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-стилі.
Ось як може виглядати LESS-код з успадкуванням:
.block (margin: 10px 5px; padding: 2px;) p (.block; border: 1px solid #EEE;) ul, ol (.block; / * Успадкування властивостей у селектора класса.block * / color: # 333; text-transform: uppercase; )скомпільований CSS
.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;)Як добре видно з коду, стилі класу
.Імпорт
В CSS-співтоваристві до імпортування стилів за допомогою директиви
| 1 | @import |
У будь-якому з трьох препроцесорів імпортування одного файлу всередину іншого фактично призводить до вставки коду одного файлу в інший при компіляції, в результаті якої виходить один CSS-файл.
Прим. перекладача: іншими словами, в препроцесорів імпортування необхідно для компіляції одного файлу з декількох. У стандартному CSS імпортування призводить до підстановці одного коду всередину іншого.
Зверніть увагу, що при компіляції файлу зі стандартним підключенням за допомогою директиви
| 1 | @import "file.css" |
скомпільований CSS
@import "reset.css"; body (background: #EEE;) p (background: # 0982C1;)Функції роботи з кольором
"Кольорові" функції створені для трансформації кольору при компіляції. Такі функції надзвичайно корисні при створенні градієнтів, затемнення кольору при
| 1 | hover |
Sass
lighten ($ color, 10%); darken ($ color, 10%); saturate ($ color, 10%); desaturate ($ color, 10%); grayscale ($ color); / * Повертає шкалу півтонів кольору $ color * / complement ($ color); / * Returns complement color of $ color * / invert ($ color); / * Повертає інвертований колір від $ color * / mix ($ color1, $ color2, 50%);Представлений вище код є всього лише коротким списком функцій роботи з кольором в Sass. Повний список всіх доступних функцій розташований за адресою Sass Documentation.
"Кольорові" функції можуть використовуватися скрізь, де потрібна робота з квітів в коді. Простий приклад - оголошена змінна з кольором, до якої далі в коді застосовується функція затемнення кольору
| 1 | darken |
LESS
lighten (@color, 10%); / * Повертає колір на 10% світліше ніж $ color * / darken (@color, 10%); / * Повертає колір на 10% темніше ніж $ color * / saturate (@color, 10%); / * Повертає колір на 10% більш насичений ніж $ color * / / * Повертає колір на 10% менше насичений ніж $ color * / spin (@color, 10); / * Повертає колір, зміщений на 10 градусів вправо щодо кольору @color * / spin (@color, -10); / * Повертає колір, зміщений на 10 градусів вліво щодо кольору @color * / mix (@ color1, @ color2); / * Повертає результат змішування кольору $ color1 з кольором $ color2 * /Список функцій препроцесора LESS знаходиться на офіційному сайті проекту LESS Documentation.
Нижче показаний приклад того, як можна застосовувати "колірні" функції в LESS:
@color: # 0982C1; h1 (background: @ color; border: 3px solid darken (@ color, 50%);)Stylus
lighten (@color, 10%); / * Повертає колір на 10% світліше ніж $ color * / darken (@color, 10%); / * Повертає колір на 10% темніше ніж $ color * / saturate (@color, 10%); / * Повертає колір на 10% більш насичений ніж $ color * / desaturate (@color, 10%); / * Повертає колір на 10% менше насичений ніж $ color * /Повний список всіх функцій роботи з кольором препроцесора Stylus представлений на сайті проекту Stylus Documentation.
І приклад використання "колірної" функції в Stylus:
color \u003d # 0982C1 h1 background color border 3px solid darken (color, 50%)арифметичні операції
Завдяки препроцесорів виконання арифметичних операцій всередині CSS-коду тепер здійснюється просто і легко. Така можливість часто буває корисною.
Прим. перекладача: варто згадати про функції з CSS3 по імені
, Яка також дозволяє виконувати всередині CSS-коду прості арифметичні операції.
1 calc ()
Sass, LESS & Stylus
body (margin: (14px / 2); top: 50px + 100px; right: 100px - 50px; left: 10 * 10;)практичні приклади
Ось ми і розглянули основні моменти того, що і як вміють робити все три препроцесора. Однак ми ще жодного разу не торкнулися моменту практичного застосування цих можливостей. Нижче показаний список реальних веб-додатків, в яких використовуються препроцесори, помітно покращуючи при цьому весь код.
браузерні префікси
Одним з найбільш яскравих прикладів переваги використання препроцесорів є написання з їх допомогою властивостей з браузерних префіксами. Один раз створивши миксин з підтримкою браузерних префіксів, ми позбавляємо себе від рутинної роботи.
Наприклад, створимо для всіх трьох препроцесорів миксин заокруглення кутів блоку:
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;)тривимірний текст
Створення ефекту тривимірності для тексту за допомогою CSS-властивості
| 1 | text-shadow |
Використовуючи міксини і функції для роботи з кольором, ми можемо створити об'ємний текст і змінювати його колір на льоту:
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)У прикладі для Stylus я вибрав варіант написання властивості
| 1 | text-shadow |
скомпільований 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 ; }колонки
Використання змінних і числових значень для цих змінних прийшла мені в голову, коли я тільки почав знайомитися з можливостями CSS-препроцесорів. Оголошення ширини для макета всередині змінної робить задачу зміни цієї ширини ( за потреби) Простий і швидкої:
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[Email protected] 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-коду знаходитися помилка ( і всі щасливі).
Якщо вас зацікавила подібна можливість у всіх трьох препроцесорів, то в цій статті докладно описано, як виконати це налаштування.