Какво е Sass? Научете как да използвате този език за CSS разширение

Синтактично страхотни стилови таблици (Sass) е популярен език за разширения на CSS. Езикът съществува от около 15 години. Работи добре с всяка версия на CSS, което го прави съвместим с всяка CSS библиотека и рамка, от Bootstrap до Foundation.

Езикът ви позволява да пишете Sass код и след това да компилирате този код в CSS. Стойността на използването на Sass вместо обикновен CSS е, че предоставя допълнителни функции, които в момента са извън обхвата на CSS.

В този урок ще научите как да използвате Sass и неговите най-важни функции.

Инсталиране на Sass

Има няколко начина да използвате Sass на вашето устройство. Те включват стартиране на приложение (като LiveReload или Scout-App), изтегляне Sass от GitHub, или да го инсталирате използвайки npm.

Инсталиране на Sass с npm

За да инсталирате Sass с помощта на npm, ще трябва инсталирайте NodeJS и npm на вашето устройство. След това ще трябва да създадете a package.json файл (което е добра практика при инсталиране на всеки npm пакет във вашите проекти). Можете да създадете основен

package.json файл в директорията на вашия проект със следната терминална команда:

npm init -y

Изпълнението на тази команда ще генерира файл package.json със следното съдържание:

{
 "name": "my_app",
 "версия": "1.0.0",
 "описание": "",
 "main": "index.js",
 "скриптове": {
 "test": "echo \"Грешка: не е посочен тест\" && изход 1"
 },
 "ключови думи": [],
 "автор": "",
 "лиценз": "ISC"
}

В package.json файл е важен, защото служи като конфигурация за вашия проект. Всеки път, когато инсталирате нов npm пакет package.json файл ще отрази това.

Сега можете да инсталирате Sass, като вмъкнете следната команда във вашия терминал:

npm инсталирайте sass

Тази команда ще актуализира package.json файл, като създадете нов поле на зависимост, който ще съдържа новия пакет Sass. Той също така ще генерира нов package-lock.json файл и инсталирайте sass (плюс зависимости) в a модули_възел директория.

Различните видове Sass файл

Sass файл може да има едно от двете разширения, .sass или .scss. Основната разлика между тях е, че .scss файл използва къдрави скоби и точки и запетая (подобно на CSS), докато .sass файлови структури CSS, използващи отстъп (подобно на Python). Някои разработчици предпочитат да използват .scss файл, тъй като структурата му е по-близка до CSS.

Пример за .scss файл

$основен цвят: син;
тяло {
 цвят: $основен цвят;
 p {
 цвят: червен;
 }
}

Пример за файл .sass

$основен цвят: син
тяло
 цвят: $primary-color
 стр
 цвят: червен

Компилиране на Sass файл в CSS

Можете да компилирате индивидуален Sass файл с помощта на нахален програма от команден ред:

sass файл.scss > файл.css

Можете също да стартирате sass във всички файлове в определена директория:

sass scss: dist/css/

Тази команда компилира всички Sass файлове в scss директория и съхранява получените файлове в dist/css.

Ако използвате npm, можете да настроите удобен пряк път за sass компилация с помощта на скриптове поле във вашето package.json файл:

"скриптове": {
 "test": "echo \"Грешка: не е посочен тест\" && изход 1",
 "sass": "sass -- гледайте scss: dist/css/"
 },

Тази конфигурация използва --гледам опция. Той поддържа sass да работи и гарантира, че прекомпилира тези файлове всеки път, когато се променят. За всеки файл sass ще генерира a .css и а .css.map файл.

За да изпълните скрипта Sass по-горе, ще трябва да изпълните следната команда във вашия терминал:

npm стартирайте sass

Изпълнението на тази команда ще генерира изход, подобен на този:

> [email protected] sass C:\Users\kadeisha\Documents\my_app
> sass -- гледайте scss: dist/css/
Компилиран scss\main.scss в dist\css\main.css.
Sass следи за промени. Натиснете Ctrl-C, за да спрете.

Sass променливи

Можете да създавате променливи в CSS днес, но преди 15 години CSS променливите не съществуваха, така че поддръжката на Sass за тях беше ценна. Sass променливите работят по същия начин като CSS променливите. Те съхраняват стойности (като цветове), които възнамерявате да използвате в CSS файл. Едно от основните предимства на променливите е, че те ви позволяват да актуализирате много поява на стойност, като я промените само на едно място.

Всяка променлива Sass започва със знака за долар, последван от произволна комбинация от знаци. Опитайте се да направите променливите си описателни, като $основен цвят пример по-горе. Важно е да се отбележи, че променливата Sass не се компилира в CSS променливи. Например този .scss файл:

$основен цвят: син;
тяло {
 цвят: $основен цвят;
}

Ще се компилира в следния CSS:

тяло {
 цвят: син;
}

Както можете да видите от файла по-горе, няма CSS променливи. Предимството на променливите е, че всяка промяна, направена във файла Sass, ще актуализира съответния CSS файл.

Sass Mixins

Ако имате едно свойство, което искате да използвате няколко пъти в целия си проект, тогава променливата е страхотна. Но ако имате група свойства, които искате да използвате като единица, миксинът ще свърши работа.

Всеки миксин започва с @mixin ключова дума, последвано от името, което искате да присвоите на миксина. Имате възможност да предавате променливи на миксина като параметри и да използвате тези променливи в тялото на миксина, почти по същия начин като функция.

Използване на Mixin

@mixin светла тема($основен-цвят: бял, $вторичен-цвят: #2c2c2c) {
 семейство шрифтове: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 фонов цвят: $основен цвят;
 цвят: $secondary-color;
}
#У дома {
 @включи светла тема (синя);
}

Първото нещо, което може да забележите в кода по-горе, е, че миксинът приема два аргумента. Можете да присвоите стойности по подразбиране на аргументи и да ги замените, когато ги включите.

След като създадете своя миксин, можете да го използвате във всяка секция на вашия уебсайт, като използвате @включи ключова дума, последвана от името на миксина.

Компилирането на Sass кода по-горе ще генерира следния CSS код във вашия целеви файл:

#У дома {
 семейство шрифтове: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
 цвят на фона: син;
 цвят: #2c2c2c;
}

Sass функции

Освен различните ключови думи, основната разлика между функция и миксин е, че функцията трябва да връща нещо. Можете да използвате функциите Sass за изчисляване на стойности или извършване на операции.

@function add-numbers($num-one, $num-two){
 $sum: 0;
 $sum: $num-one + $num-two;
 @return $sum 
}

Тази функция по-горе приема две числа и връща тяхната сума. Функциите на Sass могат дори да съдържат оператори if, цикли for и други оператори за контролен поток.

Sass модули

Ако трябва да включите всичките си променливи, миксини и функции в един и същ файл, ще имате огромен Sass файл, когато създавате големи приложения. Модулите предоставят начин за разделяне на големи файлове на по-малки, които sass комбинира по време на компилация. Например, можете да имате функционален модул и миксин модул, всичко, което трябва да запомните, е @използвайте ключова дума.

Ето пример, показващ как можете да разделите предишния миксин в негов собствен файл:

Файлът mixins.scss

@mixin светла тема($основен-цвят: бял, $вторичен-цвят: #2c2c2c) {
 семейство шрифтове: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 фонов цвят: $основен цвят;
 цвят: $secondary-color;
}

Файлът main.scss

@използвайте 'mixins';
#У дома{
 @include mixins.light-theme;
}

За да импортирате и използвате външен файл като модул, ще трябва да използвате @използвайте ключова дума, за да я импортирате. След това, за да използвате конкретен миксин от импортирания файл, добавете префикс към името на конкретното миксин с името на файла, последвано от точка. Компилирането на горните файлове ще генерира следния CSS код:

#У дома {
 семейство шрифтове: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
 цвят на фона: бял;
 цвят: #2c2c2c;
}

Използвайте Sass, за да разширите и организирате своя CSS

Sass е разширение на синтаксиса на CSS. Тя ви позволява да рационализирате вашите стилови таблици и да ги управлявате по-ефективно. Но все пак ще трябва да владеете принципите на CSS и уеб дизайна, за да създавате ефективен дизайн.

Тази статия ви учи как да инсталирате и използвате Sass. Научихте как да създавате Sass променливи, миксини, функции и модули. Сега всичко, което ви остава да направите, е да създадете HTML документ и да гледате как вашият Sass код оживява.

8 основни CSS съвета и трика, които всеки разработчик трябва да знае

Прочетете Следващото

За автора