Избор на CSS препроцесор. Пример за работа с множество браузъри

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

Забележка Целият Sass/SCSS код е компилиран в CSS, така че браузърите да могат да го разберат и покажат правилно. Понастоящем браузърите не поддържат работа директно със Sass/SCSS или който и да е друг CSS препроцесор, а стандартната CSS спецификация не предоставя подобна функционалност.

Защо да използвате Sass/SCSS вместо CSS?

1. Гнездене- SCSS ви позволява да влагате CSS правила едно в друго. Вложените правила се прилагат само за елементи, които съответстват на външни селектори (и ако говорим за Sass, тогава всичко е красиво и интуитивно дори без скоби).
2. Променливи- стандартният CSS също има концепцията за променливи, но в Sass можете да работите с тях малко по-различно. Например, повторете ги чрез директивата @for. Или генерирайте свойства динамично. Повече подробности можете да намерите на рускоезичния уебсайт на проекта.
3. Подобрени математически операции- можете да добавяте, изваждате, умножавате и разделяте CSS стойности. За разлика от стандартния CSS, Sass/SCSS ви позволява да заобиколите calc().
4. Тригонометрия- SCSS ви позволява да пишете свои собствени (синус и косинус) функции, като използвате само Sass/SCSS синтаксис, подобно на това как можете да го направите на други езици като JavaScript.
5. директиви@за малко и изразяване@if-else - Можете да пишете CSS код, като използвате познати елементи от други езици. Но не се заблуждавайте – крайният резултат ще бъде обикновен CSS.
6. Миксини (миксини)- можете да създадете набор от CSS свойства веднъж и да работите с тях многократно или да смесвате с други стойности. Миксините могат да се използват за създаване на отделни теми с едно и също оформление. Миксините могат също да съдържат цели CSS правила или нещо друго, разрешено в Sass документ. Те дори могат да приемат аргументи, което ви позволява да създавате голямо разнообразие от стилове с малък брой миксини.
7. Функции - можете да създавате CSS дефиниции като функции за многократна употреба.

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

Sass не е динамичен. Няма да можете да генерирате и/или анимирате CSS свойства и стойности в реално време. Но можете да създадете повече ефективен начини оставете стандартните свойства (като CSS анимации) да ги заемат от там.

Синтаксис

SCSS всъщност не добавя никакви нови функции към CSS, освен нов синтаксис, който често намалява времето за кодиране.

Предпоставки

Има 5 CSS препроцесора: Sass, SCSS, Less, Stylus и PostCSS.

Тази статия обхваща предимно SCSS, който е подобен на Sass. Можете да прочетете повече за тези препроцесори на Stack Overflow (оригинал) или на stackoverflow (преведен на руски).

SASS  -  (.sass) Синтактно Астрахотно Сстил Сшапки.

SCSS  -  (.scss) дързъкг ° Свъзходящ Сстил Сшапки.

Разширенията .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 те се означават с двойно тире (--), а в препроцесорите със знак за долар ($).

$номер: 1; $ цвят: #ff0000; $text: "tproger завинаги."; $text: "ТО завинаги." !по подразбиране; $нищо: нула;

Можете да присвоите стойност по подразбиране на променливи, които все още нямат стойност, като добавите етикет !default в края на стойността. В този случай, ако на променливата вече е присвоена стойност, тя няма да се промени; ако променливата е празна, ще й бъде присвоена новата зададена стойност.

#контейнер (съдържание: $текст;)

Променливите в Sass могат да бъдат присвоени на всяко свойство.

Вложени правила

Стандартни вложени CSS елементи, използващи бяло пространство:

/* Вложени правила */ #A ( цвят: червен; ) #A #B ( цвят: зелен; ) #A #B #C p ( цвят: син; )

Същите вложени елементи със SCSS:

/* Вложени правила */ #A ( цвят: червен; #B ( цвят: зелен; #C p ( цвят: син; ) ) )

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

Това е особено полезно при управление на претоварени оформления. По този начин подравняването, в което са записани вложените свойства в кода, е напълно съвместимо с действителната структура на оформлението на приложението.

Зад кулисите препроцесорът все още го компилира в стандартен CSS код (показан по-горе), така че да може да се показва в браузъра. Просто променяме начина на писане на CSS.

амперсанд

#p (цвят: черен; a (тегло на шрифта: удебелен; &:задръжте курсора на мишката (цвят: червен;)))

Със знака & можете изрично да посочите къде трябва да бъде вмъкнат родителският селектор.

Резултатът от компилирането на Sass (от предишния пример) в CSS е по-долу.

#p (цвят: черен;) #p a (тегло на шрифта: удебелен;) #p a:hover (цвят: червен;)

В резултат на това амперсандът е компилиран в името на родителския елемент (a:hover).

Миксини (известни още като миксини)

Миксините могат също да съдържат селектори, включително такива със свойства. И селекторите могат да съдържат препратки към родителския елемент чрез амперсанд (&), помните за това, нали?

Пример за работа с множество браузъри

Някои неща в CSS са доста досадни за писане, особено в CSS3, където често трябва да използвате много префикси на доставчици (-webkit- или -moz-) на всичкото отгоре.

Mixins ви позволяват да създавате групи от CSS декларации, които ще трябва да използвате многократно на даден сайт. Добра практика е да използвате миксини за префикси на доставчици. Пример:

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

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

Както в Истински живот, не можете да работите с числа, които имат несъвместими типове данни (например добавяне на px и em).

Събиране и изваждане

p ( font-size: 10px + 2em; // ГРЕШКА! font-size: 10px + 6px; // 16px font-size: 10px + 2; // 12px )

Винаги обръщайте внимание на вида на добавяните данни. Тоест, пиксели до пиксели, слонове до слонове. Изваждането работи по същия начин, но със знак минус.

Пример за изваждане:

Умножение

Прави се точно като в CSS, с calc(a * b) , но без calc и скоби. Освен това можете също да отделите знака за умножение с интервали от числата (5 * 6 == 5 * 6).

Изключение Не можете да умножавате пиксели един с друг. Тоест 10px * 10px != 100px . 10px * 10 == 100px.

P ( ширина: 10px * 10px; // ГРЕШКА! ширина: 10px * 10; // 100px ширина: 1px * 5 + 5px; // 10px ширина: 5 * (5px + 5px); // 50px ширина: 5px + ( 10px / 2) * 3; // 20px )

дивизия

Разделянето е малко по-сложно, но можете да го разберете, защото в стандартния CSS наклонената черта (наклонена черта) е запазена за използване на кратката форма на нотация на свойството. Пример е по-долу.

/* стенограма на свойството */ шрифт: italic bold .8em/1.2 Arial, sans-serif; /* стандартна нотация на свойства */ font-style: italic; тегло на шрифта: удебелен; размер на шрифта: .8em; височина на реда: 1,2; семейство шрифтове: Arial, sans-serif;

Има три помощника, които ще намекнат за възможността за разделяне:

1. Стойността (или част от нея) се съхранява в променлива или се връща от функция.
2. Стойностите са оградени в скоби.
3. Стойността се използва като част от друг аритметичен израз.

$var1: 20; $var2: 4; p ( отгоре: 16px / 24px; // Изобразено непроменено в стандартен CSS отгоре: (20px / 5px); // Разделено (но само при използване на скоби) отгоре: #($var1) / #($var2); / / Изобразено като нормален CSS, без деление отгоре: $var1 / $var2; // Делението е извършено отгоре: random(4) / 5; // Делението е извършено (когато е сдвоено с функция) отгоре: 2px / 4px + 3px; // Делението е изпълнява се, ако се добави още една аритметична операция)

Резултат от компилирането в CSS:

P (отгоре: 16px / 24px; отгоре: 4; отгоре: 20/4; отгоре: 5; отгоре: 0,6; отгоре: 3,5px; )

остатък

Остатъкът изчислява остатъка от операция деление. Ето как да създадете зебра за HTML списък.

@mixin zebra() ( @за $i от 1 до 7 ( @if ($i % 2 == 1) ( .stripe-#($i) ( цвят на фона: черен; цвят: бял; ) ) ) ) * ( @include zebra(); text-align: center; )

Създаването на zebra mixin е показано в кода по-горе. Директивите @for и @if са описани в раздела по-долу.

За да създадете проба, трябва да напишете няколко HTML елемента.

Резултат в браузъра:

Zebra е успешно генерирана от zebra mixin

Оператори за сравнение

Директивата @if приема SassScript израз и използва стиловете, вложени в него, ако изразът връща стойност, различна от false или null.

Следното показва как работят директивите @if и @else, когато са вложени в миксин.

@mixin интервал ($padding, $margin) ( @if ($padding > $margin) ( padding: $padding; ) @else ( padding: $margin; ) ) .container ( @include spacing(10px, 20px); )

Сравнение в действие. Mixin за интервали ще оразмери подложката, ако е по-голяма от полето.

След компилиране в CSS:

Контейнер (пълнеж: 20px;)

Логически оператори

Описание на логическите оператори

Използване на Sass булеви оператори за създаване на бутон, който ще промени своя фон въз основа на неговата ширина.

@mixin бутон-цвят ($height, $width) ( @if (($height< $width) and ($width >= 35px)) (фонов цвят: син; ) @else (фонов цвят: зелен; )) .button ( @include button-color(20px, 30px))

струни

CSS дефинира 2 вида низове: кавички и некотирани. Сас разпознава и двете. В резултат на това ще получите в CSS типа низове, които сте използвали в Sass.

В някои случаи е възможно да добавите низове към валидни CSS стойности без кавички, но само ако добавеният низ е последният елемент.

P (шрифт: 50px Ari + "al"; // Компилира до 50px Arial)

Примерът по-долу показва какво не трябва да правите.

P (шрифт: "50px" + Arial; // ГРЕШКА!)

Можете да добавите линии различни видовеако в тях няма интервали. Примерът по-долу няма да се компилира.

P:after ( съдържание: "Върнете Линус " + Торвалдс!; // ГРЕШКА!)

P:after ( съдържание: "Върнете Линус" + "Торвалдс!"; // обърнете внимание на "Торвалдс!")

Пример за добавяне на множество низове:

P:after ( съдържание: "Destiny " + "mankind" + "-" + "iteration."; )

Добавяне на низове и числа:

P:after ( съдържание: "Рекурсия " + 2013 + " съдба на небесните"; )

ЗабележкаСвойството съдържание работи само с псевдо-селекторите :before и :after. Препоръчително е да не използвате съдържание в CSS документ, а да го използвате директно между таговете в HTML.

Изявления за контрол на потока

SCSS има функции (fucntion()) и директиви (@directive). Вече разгледахме пример за функция малко по-рано, когато разгледахме предаването на аргументи вътре в миксини.

Функциите обикновено се ограждат в скоби непосредствено след името им. Директивата започва със символа @.

Подобно на JavaScript, SCSS ви позволява да работите със стандартен набор от изрази за контрол на потока.

ако()

if() е функция (а понякога и основата на изкуствения интелект).

Използването му изглежда доста примитивно: операторът ще върне една от двете стойности, посочени в условието.

/* Използване на функцията if() */ if (true, 1px, 2px) => 1px; if (false, 1px, 2px) => 2px;

@ако

@if е директива, използвана за разклоняване въз основа на условие.

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

Резултат от компилацията:

P (рамка: 1px плътна;)

По-долу е комбо разклонение с добавяне на директивата @else.

/* Създаване на $type променлива */ $type: river; /* Оцветете контейнерите в синьо, ако стойността за променливата $type е река */ div ( @if $type == река ( цвят: син; ) ) /* Условни цветове за текста в етикета

*/ p ( @if $type == дърво ( цвят: зелен; ) @else if $type == река ( цвят: син; ) @else if $type == мръсотия ( цвят: кафяв; ) )

Проверка за наличие на родителски елемент

Амперсандът избира родителския елемент, ако съществува. В противен случай ще върне null. Следователно може да се използва заедно с директивата @if.

В следващите примери ще разгледаме създаването на условни CSS стилове в зависимост от наличието на родителски елемент.

/* Проверете дали родителят съществува */ @mixin does-parent-exist ( @if & ( /* Приложете синьо към родителя, ако съществува */ &:hover ( цвят: син; ) ) @else ( /* Родителски елемент липсва, приложете син цвят към връзките */ a ( цвят: син; ) ) )

@за директива

Директивата @for извежда зададения стил определен брой пъти. За всяко повторение се използва променлива на брояча за промяна на изхода.

Директивата @for се повтаря 5 пъти.

@за $i от 1 до 5 ( .definition-#($i) ( ширина: 10px * $i; ) )

Резултат от компилирането в CSS:

Definition-1 (ширина: 10px;) .definition-2 (ширина: 20px;) .definition-3 (ширина: 30px;) .definition-4 (ширина: 40px;) .definition-5 (ширина: 50px;)

@всяка директива

Директивата @each задава $var на всяка от стойностите на списъка или речника и изобразява стиловете, които съдържа, като използва съответната стойност на $var.

@всяко $animal в птицечовка, лъв, овца, гълъб ( .#($animal)-икона ( фоново изображение: url("/images/#($animal).png") ) )

Резултат от компилирането в CSS:

Птицечовка-икона (фоново изображение: url("/images/platypus.png"); ) .лъв-икона (фоново изображение: url("/images/lion.png"); ) .овца-икона ( фон- изображение: url("/images/sheep.png"); ) .dove-икона ( фоново изображение: url("/images/dove.png"); )

@while директива

Директивата @while приема SassScript израз и преминава през вложени стилове, докато изразът се оценява на true. Може да се използва за създаване на по-сложни цикли, отколкото @for е подходящ, въпреки че рядко е необходим. Например:

$индекс: 5; @while $index > 0 ( .element-#($index) (ширина: 10px * $index; ) $index: $index - 1; )

Резултат от компилацията:

Елемент-5 (ширина: 50px;) .element-4 (ширина: 40px;) .element-3 (ширина: 30px;) .element-2 (ширина: 20px;) .element-1 (ширина: 10px;)

Функции в Sass/SCSS

Използвайки Sass/SCSS, можете да използвате функции точно както в други езици.

Нека създадем функция three-hundred-px(), която връща 300px.

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

След прилагане на класа .name ширината на елемента ще бъде 300 пиксела.

Функциите в Sass могат да върнат всяка валидна CSS стойност и могат да бъдат присвоени на всяко свойство. Те дори могат да бъдат изчислени въз основа на предадения аргумент.

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

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

Тригонометричните функции sin() и cos() често се срещат като вградени класове в много езици като JavaScript например.

Тяхната работа си струва да се изучава, ако искате да намалите времето, изразходвано за разработване на анимации на потребителския интерфейс, като например създаване на тробър. Между другото, вече говорим за това в една от статиите. Но в този случай това ще бъде код, а не gif изображение, вмъкнато в HTML документ.

Ето няколко примера за създаване на интересни анимационни ефекти с помощта на функцията sin(), в която количеството код е сведено до минимум. След това можете да мащабирате тези знания, за да създадете интерактивни елементи на потребителския интерфейс (кръгово движение, вълнообразна анимация).

Предимството на използването на тригонометрия в комбинация с CSS е, че няма допълнителни HTTP заявки, какъвто е случаят с gif изображенията.

Можете да пишете тригонометрични функции в Sass. Прочетете повече за това.

Писане на вашите собствени функции

В тригонометрията много операции се основават на функции. Всяка функция надгражда другата. Например функцията rad() изисква използването на PI(). Функциите cos() и sin() изискват използването на rad().

@function PI() ( @return 3.14159265359; )

Писането на функции в Sass/SCSS е много подобно на писането на функции на други езици.

Използване на функцията pow():

@function pow ($number, $exp) ( $value: 1; @if $exp > 0 ( @for $i от 1 до $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); //Ако ъгълът е в градуси ("deg"), тогава го преобразувайте в радиани @if $unit == deg ( $unitless: $unitless / 180 * PI(); ) @return $unitless; )

За да изчислите тангенса с функцията tan(), трябва да използвате функциите sin() и cos().

CSS препроцесор (CSS препроцесор)е добавка към CSS, която предоставя нови функции и функционалност на CSS чрез добавяне на синтактични конструкции.

Предназначение на препроцесорите: предоставяне на удобен синтаксис за уеб разработчика, за да опрости и ускори разработването и поддръжката на стилове в проекти.

CSS препроцесорите правят кода, написан с помощта на езика на препроцесора, чист и валиден.

С помощта на препроцесорите вашият писмен код става: четим от човека, структуриран и логичен, продуктивен.

Сред най-популярните препроцесори саLess, Sass (Scss), Stylus. Също така по-малко забележими инструменти в тази област са Closure Stylesheets, CSS Crush, те са по-малко популярни този момент, но все пак някои разработчици ги използват. Нека се опитаме да разберем възможностите и характеристиките на Less, Sass (Scss), Stylus.

Стандартното използване на CSS е доста сложно. Синтаксисът без влагане е директно труден за визуално възприемане. Липсата на нормални променливи и функции прави CSS кода тесен и с много излишни и ненужни детайли.

Налична документация - сега всеки може да овладее избрания препроцесор за кратко време, без допълнителни разходи. Второто предимство е лекотата на използване на препроцесорите. За да направите това, просто трябва да инсталирате специална програма, който ще наблюдава файловете, предназначени за препроцесора, и когато се променят, ще компилира съдържанието на тези файлове в чист CSS код.

За по-напреднали потребители има специални създатели на проекти.

По-малкое най-популярният и често използван препроцесор. Проектиран върху Базиран на JavaScript, включва основните характеристики на препроцесорите, но не предоставя условни структури и цикли в обичайния за нас смисъл. Поради своята простота и стегнатост, има стандартен синтаксис за CSS и възможност за разширяване на функционалността чрез функциониране на добавки.

LESS предоставя динамични функции за CSS: променливи, миксини, операции и функции. Документацията е много удобна за разработчици и синтаксисът е много подобен на чистия CSS. Популярни рамки като Twitter Bootstrap, активно използвайте динамичните функции на LESS. Въпреки това, LESS прави възможно повторното използване на класове като миксини навсякъде в стиловия лист.

Друг мощен и популярен препроцесор едързък. Около този инструмент се формира огромна общност от разработчици. Основан е през 2007 г. като модул за HAML и е написан на Ruby (осигурява C++ порт). Той има широк набор от функции в сравнение с Less. Препроцесорът разширява своята функционалност с библиотеката Compass, която ви позволява да надхвърлите CSS и да работите в по-голям мащаб. Осигурява два вида синтаксис: Sass (Syntactically Awesome Style Sheets) е по-прост CSS синтаксис, базиран на идентичност. Смята се за по-стара версия. Scss (Sassy CSS) се основава на стандартен CSS синтаксис.

- доста млад, но вече обещаващ CSS препроцесор. Разработен още през 2010 г. Мнозина го смятат за удобен и разширим препроцесор и по-гъвкав от Sass. Разработено в JavaScript. Има поддръжка за много опции за синтаксис от подобен CSS до по-опростени и леки.

Полезни инструменти за разработчици:

• кодов комплект: компилира Sass, LESS и Stylus файлове и след това автоматично презарежда вашия уеб браузър след актуализиране на файловете. Включването оптимизира проектни изображения с цел подобряване на производителността на системата. Технологията е платена, но има и пробна версия за работа.
• LiveReload: проверява за промени във файловете, след което ги обработва и автоматично презарежда уеб браузъра. Версията работи за Mac и Windows.
• Скаут: Работи със Sass и Compass в Ruby среда. Работи за Mac и Windows.
• БЕЗПЛАТНО: прост и прост LESS CSS компилатор за Mac и Windows.

За да изберете правилния препроцесор за вашата работа, опитайте няколко. И според резултатите от теста ще ви бъде много по-лесно да направите своя избор. И също така не забравяйте, че когато овладявате препроцесора, вие не учите нов език, но просто изучаване на новия синтаксис и функции. Компания ™ пожелава ви приятна работа в света на CSS!

2545 пъти 1 пъти видян днес

Статия за NetTuts+, написана от Джонатан Крум през 2012 г.

Основната цел на статията е да покаже предимството на използването на някой от трите описани в нея препроцесора Sass, LESS и Stylus. Прегледът е идеален за начинаещи, които тепърва откриват този аспект на уеб дизайна.

В тази статия ще разгледаме предимствата и ползите от използването на три различни препроцесора – Sass, LESS и Stylus.

Въведение

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

Има много предимства, които препроцесорите носят на таблиците css стиловеи в тази статия ще разгледаме само някои от тях, както добре познати, така и не много често срещани. Да започнем с прегледа.

Синтаксис

Най-важната част при писане на код във всеки CSS препроцесор е неговият синтаксис. За наш късмет, синтаксисът и на трите препроцесора, които ще разгледаме, е подобен на CSS.

Sass & LESS

И Sass, и LESS препроцесорите имат стандартен CSS синтаксис. Това прави задачата за преобразуване на вече съществуващ CSS код в синтаксиса на който и да е от тези препроцесори бърза и лесна. Sass използва разширението за своите файлове

1

.scss

, ПО-МАЛКО - разширение

1

.по-малко

.

Изгледът на обикновен файл в синтаксис Sass или LESS е показан по-долу:

/* style.scss или style.less */ h1 ( цвят : #0982c1 ; )

Можете ясно да видите, че това е обикновен CSS синтаксис, който се преобразува перфектно в Sass (SCSS) или LESS.

Важно е да се отбележи, че Sass (SCSS) също има по-стара версия на синтаксиса на Sass, която пропуска точки и запетая и фигурни скоби.

Въпреки че този синтаксис все още може да се използва на практика, той е отхвърлен и ние няма да го използваме в нашите примери.

Синтаксис на Sass ( Стара версия ) както следва:

/* style.sass */ h1 цвят: 0982c1

стилус

За своите файлове този препроцесор използва разширението

1

.стил

. Синтаксисът на препроцесора Stylus е по-подробен ( прибл. преводач: авторът е объркал нещо тук) използва стандартен CSS синтаксис като основа, но позволява различни комбинации от скоби, двоеточие и точка и запетая.

Примери за синтаксис на стилуса:

/* CSS-подобен синтаксис */ h1 ( цвят : #0982C1 ; ) /* пропуснати фигурни скоби */ h1 цвят : #0982C1 ; /* къдрави скоби, двоеточие и точка и запетая са пропуснати */ h1 цвят #0982C1

Всички синтаксиси, показани по-горе, са валидни и ще се компилират, за да коригират CSS. Например, този код ще се компилира до стандартен CSS без грешки:

h1 (цвят #0982c1) h2 размер на шрифта: 1 .2em

Променливи

В препроцесорите променливите се декларират и използват във файлове със стил CSS. Променливите могат да приемат всяка стойност, разрешена в CSS (цвят, число или текст) и могат да бъдат препращани от всяко място в CSS документа.

дързък

В препроцесора Sass променливата се декларира със символа

1

$

, като името и стойността на променливата са разделени една от друга с двоеточие, както се прави в CSS: $ mainColor : #0982c1 ; $siteWidth: 1024px; $ borderStyle: пунктиран; тяло (цвят: $mainColor; рамка: 1px $borderStyle $mainColor; максимална ширина: $siteWidth;)

ПО-МАЛКО

Променливите в LESS са абсолютно същите като в Sass, с изключение на това, че името на променливата е предшествано от символ

1

@

: @mainColor : #0982c1 ; @siteWidth: 1024px; @borderStyle: пунктиран; тяло (цвят: @ mainColor; граница: 1px @ borderStyle @ mainColor; максимална ширина: @ siteWidth;)

стилус

Променливите в Stylus не се нуждаят от знак, за да ги декларират, но все пак могат да използват символа

, но когато тази променлива се извика в кода, не се получава заместване на стойността на променливата.

С други думи, следната операция не се изпълнява:

mainColor = #0982c1 siteWidth = 1024px $borderStyle = пунктиран цвят на тялото mainColor граница 1px $borderStyle mainColor max-width siteWidth

Компилиран CSS

Всеки от файловете, представени като пример, се компилира до абсолютно същия CSS код. Можете да използвате въображението си, за да си представите колко полезни могат да бъдат променливите.

Благодарение на тях няма нужда да задавате стойността на цвета и след това да го повтаряте двадесет пъти в CSS кода. Или задачата беше зададена за промяна на ширината на сайта и за това е необходимо да „претърсите“ кода в търсене на тази стойност.

По-долу е CSS кодът след компилиране:

тяло (цвят: #0982c1; рамка: 1px пунктирана #0982c1; максимална ширина: 1024px;)

Гнездене

Ако CSS кодът е натоварен с достъп до множество елементи, които имат един и същ родител едновременно, тогава писането на този родител отново и отново е досадна задача.

Например така:

Вместо това, използвайки мощността на препроцесора, можем да поставим всички дъщерни селектори в скобите на родителския елемент. Освен това символът

1

&

е връзка ( намаляване) към селектора на родителски елемент.

Sass, LESS & Stylus

И трите препроцесора имат абсолютно същия синтаксис за вложени селектори:

раздел (поле: 10px; навигация (височина: 25px; a (цвят: #0982C1; &:hover (украса на текст: подчертаване;))))

Компилиран CSS

По-долу е CSS компилиран резултат от горния код. Сравнете с кода, който написахме в самото начало - абсолютно същият. Но какво удобство е да се възползвате от препроцесора!

секция (поле: 10px;) навигация на секция (височина: 25px;) навигация на секция (цвят: #0982C1;) навигация на секция :hover (декорация на текст: подчертаване;)

Миксини

1

миксини

са функции, които позволяват повторно използване на групирани свойства в CSS код. Вместо да се налага да преминавате през целия код, търсейки правилните редове, за да ги промените, сега можете да правите промени само веднъж, вътре в mixin.

Смесването е особено полезно при създаване на специфични за елемент стилове или префикси на браузъра. Когато миксин се извика в CSS селектор, аргументите на миксина се разпознават, след което неговите стилове се прилагат към селектора, който го е извикал.

Забележка. преводач: в примерите по-долу трябва да обърнете внимание на разликата в синтаксиса за деклариране и извикване на mixin в CSS селектора и за трите препроцесора.

дързък

/* Sass mixin наименувана грешка с аргумент $borderWidth, който по подразбиране е 2px */@mixin грешка ($ borderWidth: 2px) ( граница: $ borderWidth solid #F00; цвят: #F00;) .generic-error (padding: 20px; margin: 4px; @include error();) .login-error ( ляво : 12px; позиция: абсолютна; горе: 20px; @include error(5px); )

ПО-МАЛКО

/* Грешка с име LESS mixin с аргумент $borderWidth, който по подразбиране е 2px */.error (@borderWidth: 2px) (рамка: @ borderWidth solid #F00; цвят: #F00;) .generic-error (padding: 20px; margin: 4px; .error(); /* Грешката с име на mixin е свързана */) .login-error (ляво: 12px; позиция: абсолютна; горе: 20px; .error(5px); /* Грешката с име на mixin е включена с аргумента $borderWidth, зададен на 5px; това означава, че стойността на аргумента се предефинира */ }

стил

/* Наименувана грешка при смесване на стилуса с аргумент $borderWidth, който по подразбиране е 2px */грешка (borderWidth = 2px) (border: borderWidth solid #F00; цвят: #F00;) .generic-error (padding: 20px; margin: 4px; error(); /* Грешката с име на mixin е свързана */) .login-error (ляво: 12px; позиция: абсолютна; горе: 20px; грешка(5px); /* Грешката с име на mixin е включена с аргумента $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; цвят: #f00 ;)

Наследство

Когато пишем CSS стилове по „класическия“ начин, за да приложим едни и същи свойства към множество елементи в HTML документ, ще създадем код като този:

p, ul, ol ( /* някои стилове тук */ }

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

За разлика от тях се използва наследяване. Наследяването е способността за някои CSS селектори да наследяват свойства от друг селектор.

Забележка. преводач: обърнете внимание на същия синтаксис за свързване (деклариране) на наследяване вътре в CSS селектора с помощта на директивата

1

@разшири

.

Sass & Stylus

.block ( margin : 10px 5px ; padding : 2px ; ) p ( @extend .block; border : 1px solid #EEE ; ) ul , ol ( @extend .block; /* Наследява свойства от клас selector.block */

Компилиран CSS

.block, p, ul, ol (марж: 10px 5px; подложка: 2px;) p (контур: 1px плътен #EEE;) ul, ol (цвят: #333; преобразуване на текст: главни букви;)

ПО-МАЛКО

Препроцесорът LESS не поддържа напълно наследяването по начина, по който го правят Sass или Stylus. Вместо да се добавят множество селектори към единичен набор от свойства, наследяването се третира като миксин без аргументи.

Стиловете се импортират за всеки селектор. обратна странаТози подход е постоянното повторение на редове със свойства в компилиран CSS стил.

Ето как може да изглежда LESS кодът с наследяване:

.block ( margin : 10px 5px ; padding : 2px ; ) p ( .block; border : 1px solid #EEE ; ) ul , ol ( .block; /* Наследява свойства от клас selector.block */цвят : #333 ; преобразуване на текст: главни букви; )

Компилиран CSS

.block ( марж : 10px 5px ; padding : 2px ; ) p ( margin : 10px 5px ; padding : 2px ; border : 1px solid #EEE ; ) ul , ol ( margin : 10px 5px ; padding : 2px ; цвят : #333 ; преобразуване на текст: главни букви;)

Както можете ясно да видите от кода, клас стилове

.

Импортиране

В общността на CSS, за импортиране на стилове с помощта на директивата

1	@импортиране

има постоянно негативно отношение, тъй като този подход генерира множество HTTP заявки към сървъра, което забавя браузъра и натоварва самия сървър. В препроцесорите обаче технологията за импортиране работи по различен начин.

Във всеки от трите препроцесора импортирането на един файл в друг всъщност води до вмъкване на кода от един файл в другия, когато се компилира, което води до един CSS файл.

Забележка. преводач: с други думи, в препроцесорите импортирането е необходимо за компилиране на един файл от няколко. В стандартния CSS импортирането води до заместване на един код в друг.

Моля, имайте предвид, че когато компилирате файл със стандартна връзка, използвайки директивата

1	@import "file.css"

вътре в него компилацията на последния не се случва. Но миксините или променливите се импортират и използват във стиловия файл, както се очаква. Технологията за импортиране е много удобна, тъй като ви позволява да създавате много отделни файловеза правилната организация на проекта. /* файл.(тип) */ тяло (фон: #EEE;) @import "reset.css"; @import "файл.(тип)" ; p (фон: #0982C1;)

Компилиран CSS

@import "reset.css" ; тяло (фон: #EEE;) p (фон: #0982C1;)

Цветни функции

Функциите "color" са предназначени да трансформират цветовете при компилация. Такива функции са изключително полезни при създаване на градиенти, потъмняване на цветове, когато

1

завъртане

и още много.

дързък

изсветляване ($ цвят, 10%); потъмняване ($ цвят, 10%); наситен ($ цвят, 10%); обезцветяване ($ цвят, 10%); сива скала ($ цвят); /* връща сивата скала на $color */допълнение ($ цвят); /* връща допълнителен цвят на $color */обръщане ($ цвят); /* връща обърнатия цвят от $color */микс($color1, $color2, 50%);

Горният код е само кратък списък от цветни функции в Sass. Пълен списъкот всички налични функции се намира в Sass Documentation.

Функциите "Color" могат да се използват навсякъде, където искате да работите с цветове в кода. Прост пример - декларира се променлива с цвят, към която по-нататък в кода се прилага функцията за затъмняване на цвета

1	потъмняват

: $color : #0982C1 ; h1 (фон: $color; граница: 3px плътно потъмняване($color, 50%);)

ПО-МАЛКО

изсветляване (@color, 10%); /* връща цвят с 10% по-светъл от $color */потъмняване (@color, 10%); /* връща цвят с 10% по-тъмен от $color */наситен (@color, 10%); /* връща цвят с 10% по-наситен от $color */ /* връща цвят с 10% по-малко наситен от $color */завъртане (@color, 10); /* връща цвета, изместен 10 градуса вдясно от @color */завъртане (@color, -10); /* връща цвета, изместен 10 градуса вляво от @color */микс (@color1, @color2); /* връща резултата от смесването на цвят $color1 с цвят $color2 */

Списъкът с функциите на препроцесора LESS може да бъде намерен на официалния уебсайт на проекта LESS Documentation.

Следното е пример за това как функциите за цвят могат да се прилагат в LESS:

@color : #0982C1 ; h1 (фон: @ цвят; рамка: 3px плътно потъмняване (@ цвят, 50%);)

стилус

изсветляване (@color, 10%); /* връща цвят с 10% по-светъл от $color */потъмняване (@color, 10%); /* връща цвят с 10% по-тъмен от $color */наситен (@color, 10%); /* връща цвят с 10% по-наситен от $color */обезнасищане (@color, 10%); /* връща цвят с 10% по-малко наситен от $color */

Пълен списък на всички цветови функции на препроцесора Stylus е достъпен на сайта на проекта Stylus Documentation.

И пример за използване на функцията „цвят“ в Stylus:

цвят = #0982C1 h1 фонов цвят рамка 3px плътно потъмняване (цвят, 50%)

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

Благодарение на препроцесорите извършването на аритметични операции в CSS кода вече е просто и лесно. Тази функция често е полезна.

Забележка. преводач: заслужава да се спомене функцията от CSS3 по име

1	изчисление ()

, което също ви позволява да извършвате прости аритметични операции вътре в CSS кода.

Sass, LESS & Stylus

тяло (поле: (14px / 2); горе: 50px + 100px; дясно: 100px - 50px; ляво: 10 * 10;)

Практически примери

Така че разгледахме основните точки за това какво и как могат да правят и трите препроцесора. Ние обаче никога не сме докосвали темата практическо приложениетези възможности. По-долу е даден списък с реални уеб приложения, които използват препроцесори, като същевременно значително подобряват целия код.

Префикси на браузъра

Един от най-ясните примери за ползите от използването на препроцесори е да напишете свойства с префикси на браузъра, като ги използвате. Веднъж създали mixin с поддръжка на префикси на браузъра, ние се спасяваме от рутинна работа.

Например, нека създадем миксин за заобляне на ъгъл на блок за всичките три препроцесора:

дързък

@mixin border-radius ($values ​​​​) ( -webkit-border-radius : $values ​​​​; -moz-border-radius : $values ​​​​; border-radius : $values ​​​​; ) div ( @include border-radius(10px); )

ПО-МАЛКО

.border-radius (@values ​​​​) ( -webkit-border-radius : @ values ​​​​; -moz-border-radius : @ values ​​​​; border-radius : @ values ​​​​; ) div ( .border- радиус (10px); )

стилус

border-radius (стойности) ( -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;)

3D текст

Създаване на 3D ефект за текст чрез CSS свойство

1	текстова сянка

е страхотна идея. Единственият проблем е работата с цвят, която е доста трудна и тромава.

Използвайки миксини и цветни функции, можем да създаваме 3D текст и да променяме цвета му в движение:

дързък

@mixin text3d ($color) (цвят: $color; text-shadow: 1px 1px 0px потъмняване ($ цвят, 5% ), 2px 2px 0px потъмняват($ цвят, 10% ), 3px 3px 0px потъмняват($ цвят, 15% ), 4px 4px 0px потъмняват($ цвят, 20% ), 4px 4px 2px #000 ; } h1 { размер на шрифта: 32pt; @включване text3d(#0982c1); }

ПО-МАЛКО

.text3d(@цвят) { цвят: @ цвят; текстова сянка: 1px 1px 0px потъмняват(@ цвят, 5% ), 2px 2px 0px потъмняват(@ цвят, 10% ), 3px 3px 0px потъмняват(@ цвят, 15% ), 4px 4px 0px потъмняват(@ цвят, 20% ), 4px 4px 2px #000 ; } педя { размер на шрифта: 32pt; .text3d(#0982c1); }

стилус

text3d(цвят) цвят: цвят текстова сянка: 1px 1px 0px потъмняват(цвят, 5 %), 2px 2px 0px потъмняват(цвят, 10 %), 3px 3px 0px потъмняват(цвят, 15 %), 4px 4px 0px потъмняват(цвят, 20 %), 4px 4px 2px #000 педя размер на шрифта: 32pt text3d(#0982c1)

В примера със Stylus избрах да напиша свойството

1	текстова сянка

на един ред, тъй като пропуснах фигурните скоби тук.

Компилиран CSS

педя { размер на шрифта: 32pt; цвят: #0982c1; текстова сянка: 1px 1px 0px #097bb7, 2px 2px 0px #0875ae, 3px 3px 0px #086fa4, 4px 4px 0px #07689a, 4px 4px 2px #000 ; }

високоговорители

Използването на променливи и числови стойности за тези променливи ми хрумна, когато за първи път започнах да се запознавам с възможностите на CSS препроцесорите. Декларирането на ширина за оформление вътре в променлива върши работата по промяна на тази ширина ( ако е необходимо) просто и бързо:

дързък

$ siteWidth: 1024 пиксела; $ gutterWidth: 20px; $ sidebarWidth: 300 пиксела; тяло { марж: 0 Автоматичен; ширина: $ siteWidth; } .съдържание { плавам: наляво; ширина: $ siteWidth - ($ sidebarWidth+$ gutterWidth); } .странична лента { плавам: наляво; margin-left: $ gutterWidth; ширина: $ sidebarWidth; }

ПО-МАЛКО

@siteWidth: 1024 пиксела; @gutterWidth: 20px; @sidebarwidth: 300 пиксела; тяло { марж: 0 Автоматичен; ширина: @ siteWidth; } .съдържание { плавам: наляво; ширина: @ siteWidth - (@ sidebarWidth[имейл защитен] gutterWidth); } .странична лента { плавам: наляво; margin-left: @ gutterWidth; ширина: @ sidebarWidth; }

стилус

siteWidth = 1024 пиксела; gutterWidth = 20px; sidebarWidth = 300 пиксела; тяло { марж: 0 Автоматичен; ширина: siteWidth; } .съдържание { плавам: наляво; ширина: siteWidth - (sidebarWidth+ gutterWidth); } .странична лента { плавам: наляво; margin-left: gutterWidth; ширина: sidebarWidth; }

Компилиран CSS

тяло { марж: 0 Автоматичен; ширина: 1024 пиксела; } .съдържание { плавам: наляво; ширина: 704px; } .странична лента { плавам: наляво; margin-left: 20px; ширина: 300 пиксела; }

Някои препроцесорни трикове

Има няколко трика при работа с CSS препроцесори. В тази статия ще разгледам само някои от тях. Но ако тази тема ви интересува, препоръчвам ви внимателно да прочетете официалната документация или дори по-добре просто да започнете да използвате препроцесора всеки ден, докато кодирате.

Съобщение за грешка

Ако пишете CSS код от дълго време, вероятно сте попадали в ситуация, в която в кода се е прокрадвала грешка, която не можете да намерите по никакъв начин. Ако се окажете в абсолютно същата ситуация, тогава мога да ви зарадвам - има начин за решаване на такъв проблем.

CSS препроцесорите могат да съобщават за грешки в кода и е доста лесно да ги накарате да го направят. В този случай самият препроцесор ви казва къде се намира грешката в CSS кода ( и всички са доволни).

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

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

Как се появиха CSS препроцесорите

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

Когато масовото използване на Интернет току-що беше започнало, не съществуваха стилови таблици. Документацията зависеше единствено от браузърите. Всеки от тях имаше свои собствени стилове, които бяха използвани за обработка на определени тагове. Съответно страниците изглеждаха различно в зависимост от браузъра, в който сте ги отворили. Резултатът е хаос, объркване, проблеми за разработчиците.

През 1994 г. норвежкият учен Хокон Лий разработи стилов лист, който може да се използва за декориране външен видстраници отделно от HTML документа. Идеята се хареса на представителите на консорциума W3C, които веднага започнаха да я усъвършенстват. Няколко години по-късно е публикувана първата версия на CSS спецификацията. След това непрекъснато се подобряваше, усъвършенстваше ... Но концепцията остана същата: на всеки стил се дават определени свойства.

Използването на CSS таблици винаги е било проблематично. Например, дизайнерите на оформление често са имали затруднения при сортирането и групирането на свойства, а наследяването също не е толкова просто.

И тогава дойде 2000-те. Професионалните фронтенд разработчици все повече започнаха да се занимават с маркиране, за които гъвкавата и динамична работа със стилове беше важна. CSS, който съществуваше по това време, изискваше префикс и поддръжка за проследяване за нови функции на браузъра. Тогава експертите по JavaScript и Ruby се заеха с работата, създавайки препроцесори – добавки за CSS, които добавят нови функции към него.

CSS за начинаещи: Характеристики на препроцесорите

Те изпълняват няколко функции:

• уеднаквяване на префикси и хакове на браузъра;

• опростяване на синтаксиса;

• дават възможност за работа с вложени селектори без грешки;

• подобряване на стилистичната логика.

Накратко: препроцесорът добавя програмна логика към възможностите на CSS. Сега стилизирането се извършва не чрез обичайното изброяване на стилове, а с помощта на няколко прости трика и подхода: променливи, функции, миксини, цикли, условия. Освен това имаше възможност да се използва математика.

Виждайки популярността на подобни добавки, W3C започна постепенно да добавя функции от тях към CSS кода. Например, така се появи функцията calc() в спецификацията, която се поддържа от много браузъри. Очаква се скоро да е възможно да се задават променливи и да се създават миксини. Това обаче ще се случи в далечното бъдеще, а препроцесорите вече са тук и вече работят отлично.

Популярни CSS препроцесори. дързък

Разработен през 2007 г. Първоначално това беше компонент на Haml, машина за HTML шаблони. Разработчиците на Ruby on Rails се възползваха от новия контрол върху CSS елементите и започнаха да го разпространяват навсякъде. Sass има огромен брой функции, които сега са включени във всеки препроцесор: променливи, селектори за влагане, миксини (тогава обаче не можете да добавяте аргументи към тях).

Деклариране на променливи в Sass

Променливите се декларират със знака $. Можете да запишете свойства и техните набори в тях, например: “$borderSolid: 1px solid red;”. В този пример сме декларирали променлива, наречена borderSolid, и сме съхранили стойността 1px плътно червено в нея. Сега, ако в CSS трябва да създадем червена граница с ширина 1px, просто посочете тази променлива след името на свойството. Веднъж декларирани, променливите не могат да бъдат променяни. Налични са няколко вградени функции. Например, нека декларираме променлива $redColor със стойност #FF5050. Сега в CSS кода, в свойствата на някакъв елемент, ние го използваме, за да зададем цвета на шрифта: p ( цвят: $redColor; ). Искате ли да експериментирате с цвят? Използвайте функциите за потъмняване или изсветляване. Това се прави по следния начин: p ( color: darken($redColor, 20%); ). Това ще направи червения цвят с 20% по-светъл.

Гнездене

Преди трябваше да използваме дълги и неудобни конструкции, за да обозначим влагане. Да си представим, че имаме div, който съдържа p, а в него от своя страна се намира span. За div трябва да зададем цвета на шрифта на червено, за p - жълто, за span - розово. В нормален CSS това ще бъде направено по следния начин:

Като се използва css препроцесорвсичко е направено по-просто и по-компактно:

Елементите са буквално вложени един в друг.

Директиви за препроцесор

Можете да импортирате файлове с помощта на директивата @import. Например, имаме файл fonts.sass, който декларира стилове за шрифтове. Включваме го в основния файл style.sass: @import 'fonts'. Готов! Вместо един голям файлсъс стилове имаме няколко, които могат да се използват за бърз и лесен достъп до необходимите свойства.

Миксини

Една от най-интересните идеи. Позволява ви да зададете цял набор от свойства в един ред. Работете както следва:

@mixinlargeFont(

семейство шрифтове: "Times New Roman";

размер на шрифта: 64px;

височина на реда: 80px;

тегло на шрифта: удебелен;

За да приложим миксин към елемент на страница, използваме директивата @include. Например, искаме да го приложим към заглавието h1. Резултатът е следната конструкция: h1 ( @include: largeFont; )

Всички свойства от миксина ще бъдат присвоени на елемента h1.

Препроцесор по-малко

Синтаксисът на Sass напомня на програмирането. Ако търсите опция, която е по-подходяща за начинаещи обучаващи CSS, вижте Less. Създадена е през 2009г. основна характеристика- родна поддръжка, така че да бъде по-лесно за дизайнерите на оформление, които не са запознати с програмирането, да я овладеят.

Променливите се декларират със символа @. Например: @fontSize: 14px;. Вмъкването работи на същите принципи като в Sass. Миксините се декларират по следния начин: .largeFont() ( font-family: 'Times New Roman'; font-size: 64px; line-height: 80px; font-weight: bold; ). Не е необходимо да използвате директиви на препроцесора, за да се свържете - просто добавете прясно създаден миксин към свойствата на избрания елемент. Например: h1 ( .largeFont; ).

стилус

Още един препроцесор. Създаден през 2011 г. от същия автор, който даде на света Jade, Express и други полезни продукти.

Променливите могат да бъдат декларирани по два начина - явно или неявно. Например: font = 'Times New Roman'; е имплицитна опция. Но $font = 'Times New Roman' е изричен. Миксините се декларират и включват имплицитно. Синтаксисът е: redColor() цвят червен. Сега можем да го добавим към елемента, например: h1 redColor();.

На пръв поглед Stylus може да изглежда объркващ. Къде са "родните" скоби и точка и запетая? Но веднага щом се потопите в него, всичко става много по-ясно. Имайте предвид обаче, че продължителната разработка с този препроцесор може да ви "отучи" от използването на класическия CSS синтаксис. Това понякога създава проблеми, когато трябва да работите с "чисти" стилове.

Кой препроцесор да избера?

Наистина... няма значение. Всички опции предоставят приблизително еднакви възможности, само синтаксисът е различен за всяка. Препоръчваме да направите следното:

• ако сте програмист и искате да работите със стилове като код, използвайте Sass;
• ако сте дизайнер на оформление и искате да работите със стилове като нормално оформление, обърнете внимание на Less;
• ако харесвате минимализма, използвайте Stylus.

За всички опции са налични огромен брой интересни библиотеки, които могат допълнително да опростят разработката. Потребителите на Sass се насърчават да разгледат Compass, мощен инструмент с много вградени функции. Например, след като го инсталирате, никога повече няма да се притеснявате за префиксите на доставчици. По-лесна работа с мрежи. Има помощни програми за работа с цветове, спрайтове. Налични са редица вече обявени миксини. Дайте на този инструмент няколко дни - по този начин ще спестите много време и усилия в бъдеще.

И кога най-после ще се успокоят тези разработчици и ще спрат да тормозят новаците!? Още не успях да го разбера. css, и те ми казват: „Всички истински дизайнери на оформление отдавна са преминали към препроцесори. Е, какво чисто cssна прага на 2020!?" Какво да правя?

Първо, разработчиците никога няма да спрат да измислят нови технологии. И професионалните наборчици са им много благодарни за това. Език на стиловия лист css, изобретен във време, когато уебсайтовете са били примитивни. Но годините минаваха, сайтовете ставаха по-сложни и масивни, но методите на оформление останаха същите. Кодерите се умориха да пишат подобни части от код. Беше невъзможно бързо да се промени цвета на сайта. Има нужда от повече автоматизация на оформлението и така се появи CSS препроцесорикод. И днес ще говорим за един от тях, ПО-МАЛКО препроцесор.

Компилиране на LESS и VS код

Всичко необходимо за компилиране ПО-МАЛКО code е редактор на кодове VS коди разширяване Лесно по-малко. Как работи?

1. Създайте стилов файл с разширение .по-малко
2. След запазване се генерира автоматично .cssфайл в същата папка.

Всеки път, когато запишете промените, ПО-МАЛКОфайловете се компилират до cssфайлове. Браузърите все още не са се научили да разбират ПО-МАЛКО, те се нуждаят от cssкод.

ПО-МАЛКО променливи

Най-често използваните свойства се преместват в променливи. Сайтът обикновено използва повтарящи се цветове и семейства шрифтове. Въвеждаме всички цветове в променливи и след това заместваме в правилото не кода на цвета, а променливата. Вие питате: "Каква е уловката? Все пак трябва да предпиша нещо, каква е разликата?"

Основната характеристика е бърза промяна на цвета. Цветът се променя само веднъж, в променлива. Замяната на цвета в една променлива ще замени цвета на всички страници на сайта. Само тази функция е достатъчна, за да започнете да използвате ПО-МАЛКО. Обявяваме променливи в LESSи запазваме нужните ни стойности в тях, даваме смислени имена на променливите.

@основен: #194eb4;
@вторичен: #f2b834;
@успех: #4cb514;
@черно: #000;
@бяло: #fff;

Сега пишем обичайния код, както направихме в css, но заместваме променливи вместо стойности.

ПО-МАЛКО

div (
подплата: 0;

цвят черен;
}

След записване се компилира cssкод. Изобщо не се докосваме cssфайл, цялата работа се извършва в ПО-МАЛКОфайл. Можете да съхранявате всякакви често повтарящи се свойства в променливи.

css

div (
подплата: 0;
семейство шрифтове: Roboto, sans-serif;
цвят: #000;
}

Миксини в ПО-МАЛКО

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

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

бутон_шрифт(

преобразуване на текст: главни букви;
размер на шрифта: 18px;
}

Смесваме свойствата на селектора на бутоните.

Портфолио__бутон (
подложка: 15px 80px;
цвят: #344258;
.button_font;
}

На изхода получаваме:

Портфолио__бутон (
подложка: 15px 80px;
цвят: #344258;
семейство шрифтове: "DIN Pro Bold";
преобразуване на текст: главни букви;
размер на шрифта: 18px;
}

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

Вместо да дублираме името на селектора, използваме знака амперсанд.

Портфолио__елемент(
позиция: роднина;
цвят на фона: #3c3c3c;
}
&: задръжте (
цвят на фона: #ccc;
}
}

css

.portfolio__item (
позиция: роднина;
цвят на фона: #3c3c3c;
}
.portfolio__item:hover (
цвят на фона: #ccc;
}

Медийни заявки в ПО-МАЛКО

Можете да пишете медийни заявки направо в селектора.

ПО-МАЛКО

.header_title(
цвят: #344258;
размер на шрифта: 40px;

подложка: 020px;
екран само за @media и (максимална ширина: 320px)(
размер на шрифта: 22px;
}
}

css

.header_title(
цвят: #344258;
размер на шрифта: 40px;
семейство шрифтове: "DIN Pro", sans-serif;
подложка: 020px;
}
екран само за @media и (максимална ширина: 320px) (
.header_title(
размер на шрифта: 22px;
}
}

Заключение

Тази статия не разкрива дори 25% от всички възможности, които предлага ПО-МАЛКО. Да, това не е необходимо, целта на статията е да мотивира начинаещите да започнат да използват препроцесори. Започвайки с най-простите, постепенно преминавайки към по-сложните.