Хочете вивчити Sass, але ніяк не складається? Тоді читайте далі, тому що сьогодні ми збираємося розглянути особливості Sass і деякі цікаві речі, які ви можете робити з його допомогою.
Що таке Sass?
Sass (Syntactically Awesome Style Sheets) \- це CSS-препроцесор, Він надає додатковий набір функцій, що робить процес написання стилів більш простим та швидким.
Як він працює?
Цікаве питання. Є кілька способів компілювання Sass:
-
Оригінальний бінарний файл Ruby Sass. Встановіть його з gem install sass і скомпілюйте, запустивши sassc myfile.scss myfile.css
-
GUI-додатки, такі як Hammer, CodeKit, або Compass;
-
Мій особистий фаворит libsass \- швидкий компілятор Sass, написаний на C. Ви можете встановити libsass через NPM з node-sass (npm install node-sass).
Який з них слід використовувати? Залежить від того, чим ви займаєтесь. Якщо Ви не людина "командного рядка", то GUI для вас.
Якщо вам просто потрібно попрактикуватися або поділитися прикладами, ідеальний вибір - Sassmeister. Це веб-Sass майданчик, який ми будемо використовувати в цій статті.
SASS або SCSS?
Коли вийшла перша версія Sass, основний синтаксис відрізнявся від CSS. Замість фігурних дужок були відступи, використання крапки з комою було необов'язковим, застосовувались стенографічні (скорочені) оператори.
Деякі люди не могли швидко освоїти синтаксис, тому у 3 версії Sass змінив основний синтаксис до .scss. SCSS вигладає як CSS, але має всі можливості Sass.
Ви можете застосовувати оригінальний синтаксис, якщо хочете. В статті ми розглядатимемо .scss.
Навіщо використовувати Sass?
Як я вже наголошував, Sass робить написання CSS простішим і швидшим. Ви можете отримати більше, написавши менше коду, і зберегти свій час.
Налаштування
- Встановити компілятор на вибір і створити style.scss файл;
Або
- Використовувати Sassmeister.
Змінні
Sass приносить змінні в CSS.
Допустимі значення змінних: числа, рядки, кольори, null, списки і карти.
Змінні в Sass поширюються за допомогою символу $. Давайте створимо нашу
першу змінну.
$primaryColor: #eeffcc;
При компіляції ми просто встановлюємо змінну в межах області видимості, змін в CSS не відбувається. Надалі, ви можете використовувати її:
$primaryColor: #eeffcc;
body {
background: $primaryColor;
}
Sass має область видимості змінної, якщо ви оголошуєте змінну всередині селектора, її область дії буде обмежена цим селектором.
$primaryColor: #eeccff;
body {
$primaryColor: #ccc;
background: $primaryColor;
}
p {
color: $primaryColor;
}
// Після компіляції, селектор нашого параграфа матиме колір #eeccff
Але що, якщо ми хочемо встановити глобальну змінну в декларації? Для цього
слід використовувати !global:
$primaryColor: #eeccff;
body {
$primaryColor: #ccc !global;
background: $primaryColor;
}
p {
color: $primaryColor;
}
// При компіляції,колір параграфа буде #ccc
Ще один дуже корисний інструмент, зокрема, при написанні mixins \-
!default. Це дозволяє нам переконатися, що існує значення за замовчуванням
для змінної, якщо значення вказано - воно буде перезаписане:
$firstValue: 62.5%;
$firstValue: 24px !default;
body {
font-size: $firstValue;
}
// розмір шрифта для body = 62.5%
Математика
На відміну від CSS, Sass дозволяє нам використовувати математичні вирази! Це супер корисно в mixins, і дозволяє нам робити деякі дійсно класні речі.
Підтримуються оператори:
-
\+ Додавання;
-
\- Віднімання;
-
/ Ділення;
-
- Множення;
-
% Залишок від ділення;
-
== Рівність;
-
!= Нерівність.
Перед тим, як рухатися далі, я хочу відзначити два потенційних "підводних камені".
По-перше, при діленні, знак (/) потрібно обернути в дужки, так як цей
символ також використовується в стенографічних CSS властивостях шрифту
(наприклад, font: 14px/16px).
$fontDiff: (14px/16px);
По-друге, ви не можете змішувати значення:
$container-width: 100% - 20px;
Наведений вище приклад не буде працювати. Для цього конкретного прикладу ви
могли б використовувати CSS функцію calc, так як вона повинна бути
інтерпретована під час рендеринга.
Повертаючись до математики, давайте створимо динамічну декларацію стовпця, виходячи з базової ширини контейнера:
$container-width: 100%;
.container {
width: $container-width;
}
.col-4 {
width: $container-width / 4;
}
// Компілюється в:
// .container {
// width: 100%;
// }
//
// .col-4 {
// width: 25%;
// }
Функції
Краща частина Sass, на мій погляд - це вбудовані функції. Ви можете побачити повний список тут. ВІН ВЕЛИКИЙ.
Чи було у вас таке, що ви хотіли створити гарну на вигляд кнопку і витрачали години, щоб підібрати для неї потрібні ефекти та тіні?
Скористайтесь функцією darken(). Ви можете встановити колір та процент
затемнення.
Вкладання
Корисною особливістю Sass є можливість вкладання декларацій. Це означає, що ви здатні мати декларації всередині декларації. У звичайному CSS ми робимо так:
.container {
width: 100%;
}
.container h1 {
color: red;
}
Але в Sass ми можемо отримати такий же результат, написавши:
.container {
width: 100%;
h1 {
color: red;
}
}
Що, якщо ми хочемо посилатися на батьківський елемент? Це досягається за
допомогою символа &(amp);.Погляньте, як ми можемо використовувати це, щоб
додати псевдо-селектори для анкерних елементів:
a.myAnchor {
color: blue;
&;:hover {
text-decoration: underline;
}
&;:visited {
color: purple;
}
}
Тепер ми знаємо, що таке вкладання.
Якщо ми хочемо виконати протилежну дію, нам потрібно використовувати @at- root директиви. Нехай ми маємо таку структуру вкладеності:
.first-component {
.text { font-size: 1.4rem; }
.button { font-size: 1.7rem; }
.second-component {
.text { font-size: 1.2rem; }
.button { font-size: 1.4rem; }
}
}
Вкладення - дійсно відмінний спосіб заощадити час і зробити ваші стилі більш читабельними, але пам'ятайтеся правило: не більше, ніж чотири рівня вкладеності.
Імпорт
Імпорт дозволяє розбити стилі в окремі файли і з легкістю імпортувати їх. Ми
можемо імпортувати .scss файли за допомогою директиви @import:
@import "grids.scss";
Вказувати розширення необов'язково:
@import "grids";
Sass компілятори також включають в себе концепцію "частин". Якщо .sass або .scss файл має підкреслення (наприклад, _partial.scss), він не компілюється в CSS. Це корисно, якщо файл існує тільки для того, щоб імпортувати його в головний файл style.scss.
Extend і Заповнювачі
@extend директива є відмінним способом, щоб успадкувати вже існуючі стилі.
.input {
border-radius: 3px;
border: 4px solid #ddd;
color: #555;
font-size: 17px;
padding: 10px 20px;
display: inline-block;
outline: 0;
}
.error-input {
@extend .input;
border:4px solid #e74c3c;
}
Зверніть увагу, що це не копіювання стилів з .input в .error-input.
Але що робити, якщо ми хочемо продовжити декларацію з набором стилів, які вже не існують? Нам потрібен заповнювач.
%input-style {
font-size: 14px;
}
input {
@extend %input-style;
color: black;
}
Заповнювач працює з префіксом ім'я класу, додаючи символ %.В результаті, елементи опиняються в одному блоці.
Mixins
Mixin директива є неймовірно корисною особливістю Sass, вона дозволяє включати стилі так само як і @extend, але з можливістю підтримки й інтерпретації аргументів.
Sass використовує @mixin директиви для визначення mixins і директиви @include, щоб їх використовувати. Побудуємо простий mixin, який ми зможемо використовувати для медіа-запитів!
Перший крок - це визначення нашого mixin:
@mixin media($queryString){
}
Ми викликаємо наш mixin і додаємо $queryString аргумент. Після додавання
mixin, ми можемо додати рядковий аргумент, який буде динамічно рендиритись.
@mixin media($queryString){
@media #{$queryString} {
@content;
}
}
Ми хочемо, щоб наш рядковий аргумент з'являвся там де нам потрібно, ми
використовуємо Sass синтаксис інтерполяції, #{}. Коли ви додаєте змінну у
фігурні дужки, вона не рахується, а виводиться.
Ще один шматок нашої головоломки - @content директиви. Коли ви обертаєте
mixin навколо вмісту за допомогою фігурних дужок, обгорнутий контент стає
доступним через @content директиву.
І, нарешті, давайте використаймо mixin з @include:
.container {
width: 900px;
@include media("(max-width: 767px)"){
width: 100%;
}
}
Директивні функції
Директивні функції у Sass схожі на mixins, але замість повернення розмітки,
вони повертають значення через @return. Вони можуть бути використані для DRY
(don't repeat yourself) вашого коду, і зробити його більш зручним для читання.
Давайте підемо далі і створимо директивну функцію, щоб прибрати наші grid- розрахунки з grid-демо:
@function getColumnWidth($width, $columns,$margin){
@return ($width / $columns) - ($margin * 2);
}
Тепер ми можемо використовувати цю функцію в коді нижче:
$container-width: 100%;
$column-count: 4;
$margin: 1%;
.container {
width: $container-width;
}
.column {
background: #1abc9c;
height: 200px;
display: block;
float: left;
width: getColumnWidth($container-width,$column-count,$margin);
margin: 0 $margin;
}
Демо
Тепер в нашому розпорядженні є всі вищезгадані інструменти. Давайте створимо наш власний grid-фреймворк.
Почнемо з створення карти налаштуваннь:
$settings: (
maxWidth: 800px,
columns: 12,
margin: 15px,
breakpoints: (
xs: "(max-width : 480px)",
sm: "(max-width : 768px) and (min-width: 481px)",
md: "(max-width : 1024px) and (min-width: 769px)",
lg: "(min-width : 1025px)"
)
);
Далі давайте напишемо mixin, який буде рендерити наш фреймворк:
@mixin renderGridStyles($settings){
}
Нам потрібно візуалізувати розмітку для кожної точки зупину, тож давайте
перебиремо їх і викличемо наш медіа-mixin. Використаймо map-get метод, щоб
отримати значення точок, і нашу @each директиву, щоб виконати ітерації через
отримані значення:
@mixin renderGridStyles($settings){
$breakpoints: map-get($settings, "breakpoints");
@each $key, $breakpoint in $breakpoints {
@include media($breakpoint) {
}
}
}
Ми повинні отримати фактичну сітку розмітки з ітерації, тому давайте створимо
renderGrid mixin. Скористаємось map-get методом, щоб отримати карту
значень і @while директиву для перебору стовпців з $i в якості індексу. Ми
рендеримо ім'я класу за допомогою інтерполяції.
@mixin renderGrid($key, $settings) {
$i: 1;
@while $i <;= map-get($settings, "columns") {
.col-#{$key}-#{$i} {
float: left;
width: 100% * $i / map-get($settings,"columns");
}
$i: $i+1;
}
}
Додаємо контейнер та стилі:
.container {
padding-right: map-get($settings, "margin");
padding-left: map-get($settings, "margin");
margin-right: auto;
margin-left: auto;
}
.row {
margin-right: map-get($settings, "margin") * -1;
margin-left: map-get($settings, "margin") * -1;
}
Ще немає коментарів