SCSS и Sass

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

За краткост Haml и Sass бяха единствените препроцесори, разгледани в този урок. Те също бяха избрани, защото са изградени с Ruby и се вписват директно в Ruby on Rails приложения. Те също получиха огромна подкрепа от общността.

Когато става въпрос за избор кой препроцесор да използвате, важно е да прецените какво е най-добро за вашия екип и проект. Проектите, изградени в Node.js, вероятно могат да се възползват повече от Jade и Stylus. Най-важният аспект, който трябва да вземете предвид обаче, е това, което вашият екип е свикнал да използва. Направете проучване за всеки проект и изберете най-информираното решение.

Ресурси и връзки

• Haml - Език за маркиране на HTML абстракции
• Sass - Синтактично страхотни таблици със стилове
• Sass Playground на SassMeister

26.07.2017

5 най-добри CSS препроцесора за 2017 г. за ускоряване на вашия работен процес.

CSS препроцесорите са специално проектирани да направят работата на CSS програмистите по-забавна. Те ви позволяват да пишете лесен за редактиране и надежден код с възможност за повторно използване.

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

В тази статия ще говоря за топ 5 CSS препроцесора за 2017 г.

01. Сас

SASS е най-популярният препроцесор с огромна общност и мощна функционалност. Работи само във връзка с Ruby и е много лесен за научаване. Повечето предни рамки като Bootstrap, Foundation и materialize са изградени с помощта на SASS.

SASS има два синтаксиса:

• .sass
• .scss

02. Стилус

Stylus е друг чудесен препроцесор за динамично генериране на CSS. Ако искате да пропуснете фигурни скоби, запетаи и точки и запетая, тогава това може да е за вас. най-добрият избор. Stylus се захранва от Node.js и е много лесен за инсталиране и използване. Има много персонализирани функции, като например насищане (). Можете също да използвате всички функции, предоставени от други водещи компилатори.

03.По-малко

Less, известен още като Less.js или Less CSS, е друг водещ CSS препроцесор. Това е чудесен избор, ако имате нужда стандартни функциикато променливи, вложени стилове и т.н. Тази Javascript библиотека първоначално е написана на Ruby.

• Прочетете също:

04 Stylecow

Stylecow е препроцесор, написан на Node, който може да се инсталира с помощта на npm. Има мощен API, с който можете лесно да създавате плъгини.

05. CSS Crush

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

Заключение

Ако търсите най-добрият cssпрепроцесор, ще намерите голямо разнообразие различни опциина линия. По мое мнение, най-добрите вариантиза начинаещи това са SASS и Stylus.

Имате въпроси?

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

Въпреки това, ако някой отвори единичния ви CSS файл и се опита да промени нещо, сигурни ли сте, че кодът ще бъде четим, редактиран, структуриран и разбираем? Ако вашият проект е огромен, с много части, сигурни ли сте, че можете лесно да го поддържате в бъдеще? Ако използвате CSS препроцесор, тогава отговорът е да, освен това това е начинът да автоматизирате оформлението на сайтовете. Защо? Сега ще разберем.

Какво е CSS препроцесор?

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

• стилус

Всички горепосочени препроцесори имат почти идентична функционалност, има само малки разлики в синтаксиса. Сега да се върнем към въпроса, повдигнат по-рано: какви предимства ни дават препроцесорите, за да направим нашия код по-удобен и поддържаем? Това е преди всичко гнездене. Тази функция ни дава възможност да структурираме елементи, лесно да намираме родителя на елемент, бързо да пишем псевдо-класове и псевдо-елементи и дори да използваме BEM! например:
.следа
цвят: #fff
&__заглавие
подложка: 10px
&:задръжте, &:фокус
цвят: син

Разгледайте този кодов фрагмент, написан на Sass. Всичко това се превежда в следния CSS:

Песен (цвят: #FFF;)
.track_title (подложка: 10px;)
.track__title:hover, .track-title:focus (цвят: син)

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

$btn-цвят: син;
$font-main-size: 16px;

И използването ще изглежда така:

Блокиране (
размер на шрифта: $font-main-size;
}

Само си представете колко е удобно. Ако трябва да промените цвета на бутоните в целия сайт, то това трябва да стане само на едно място! Е, да продължим. Третото и най-голямо нещо, което CSS препроцесорите могат да ни предложат, е използването на миксини. Според нашето обичайно разбиране миксините са функции, които могат да се използват няколко пъти, без да се повтарят едни и същи части от кода (помнете един от принципите на програмиране - DRY - Don’t repeat yourself). Честно казано, не използвам миксини толкова често, очевидно нямаше такава спешна нужда, но все пак ще покажа няколко примера. Една от най-използваните от мен функции изглежда така:

@function em($pixels, $context: $browser-context) (
@if (без единици ($ пиксела)) (
$пиксела: $пиксела * 1px;
}
@if (unitless($context)) (
$контекст: $контекст * 1px;
}
@return $pixels / $context * 1em;
}

И приложението му е както следва:

тяло (
размер на шрифта: em(14px);
}

Да, както разбирате, това е просто преобразуване на размера на шрифта от PX в Em (да живеят онези времена, когато сте използвали специални услуги за такава дреболия или сте се броили на калкулатор). Следният пример също спестява много време:

@mixin input-placeholder(
&.placeholder ( @content; )
&:-moz-placeholder ( @content; )
&::-moz-placeholder ( @content; )
&:-ms-input-placeholder ( @content; )
&::-webkit-input-placeholder ( @content; )
}

Неговите приложения:

въвеждане, текстово поле (
@include input-placeholder (
цвят: $сив;
}
}

Има още много примери, но си струва да започнете сами да използвате mixins, за да разберете колко полезен е този инструмент. Може би има още една причина, която ще ви накара да обикнете CSS препроцесорите и нейното име е модулност. 2018 г. е и имаме модулност навсякъде - от машини за HTML шаблони до различни 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 например.

Тяхната работа си струва да се изучава, ако трябва да намалите времето, изразходвано за разработване на анимации потребителски интерфейс, например за създаване на trobber. Между другото, вече говорим за това в една от статиите. Но в този случай това ще бъде код, а не 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 препроцесорите

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

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

През 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, мощен инструмент с много вградени функции. Например, след като го инсталирате, никога повече няма да се притеснявате за префиксите на доставчици. По-лесна работа с мрежи. Има помощни програми за работа с цветове, спрайтове. Налични са редица вече обявени миксини. Дайте на този инструмент няколко дни - по този начин ще спестите много време и усилия в бъдеще.