Просто и лесно ръководство за разбиране на Sass
Преди време Thoriq Firdaus написа страхотна статия за началото на Sass, която ви показа как да инсталирате и използвате този изключително полезен CSS препроцесорен език (може да искате да го проверите, знаете ли, за да започнете).
В тази статия си помислих, че ще ви дам малко повече информация за това какво можете да правите с Sass и как разработчиците го използват всеки ден, за да създадат по-добър и по-модулен CSS код. Преминете напред до желания раздел:
- Инструменти на търговията
- Променливи
- Разполагане
- Разширяване на набор от правила
- Mixins
- Селектори за място
- Операции
- Функции
Инструменти на търговията
Thoriq ви показа как можете да използвате Sass от командния ред, използвайки sass - часовник команда.
Ако предпочитате GUI инструменти, можете да отидете с моето лично любимо приложение, Codekit, инструмент за уеб разработчици за компилиране на Sass, конкатенация, автоматична корекция и много други. Prepros е друго много способно приложение, което може да се използва във всички системи. И двете са платени заявления но си струва, ако ги използвате в дългосрочен план.
Ако просто искате да изпробвате Sass без да плащате за нищо можете да използвате терминала, или Koala (тук е нашия преглед), безплатно приложение за многофункционални функции, което може да задържи позициите си срещу колегите от премиите.
Променливи
Едно от първите неща, които ще ви трябват, за да обгърнете главата си, са променливите. Ако идвате от PHP или друг подобен фон за кодиране, това ще бъде второ естество за вас. Променливите са за съхраняване на битове и части от информация за многократна употреба, като стойност на цвят например:
$ primary_color: # 666666; .button color: $ primary_color; . важен color: $ primary_color;
Това може да не изглежда толкова полезно тук, но представете си, че имате 3000 реда код. Ако вашата цветова схема се промени, ще трябва да замените всяка стойност на цвета в CSS. С Sass можете просто променете стойността от $ primary_color променлива и да се направи с нея.
За променливите се използват съхраняване на имена на шрифтове, размери, цветове и множество други данни. За по-големи проекти може да си струва да извлечем всичките си променливи в отделен файл (ще разгледаме как се прави това скоро). Това ви позволява да преоцветете целия си проект и да промените шрифтовете и други ключови аспекти без да докосвате действителните CSS правила. Всичко, което трябва да направите, е да промените някои променливи.
Разполагане
Друга основна функция, която Ви дава Sass, е способността да се гнездят правила. Да предположим, че изграждате навигационно меню. Имате навигация елемент, който съдържа неподреден списък, елементи от списъци и връзки. В CSS можете да направите нещо подобно:
#header nav / * Правила за навигационната зона * / #header nav ul / * Правила за менюто * / #header nav li / * Правила за елементи от списъка * / #header nav a / * Правила за връзки * /
В селекторите се повтаряме много. Ако елементите имат общи корени, можем да използваме гнездене напишете нашите правила по много по-чист начин.
Ето как горният код може да изглежда в Sass:
#header nav / * Правила за навигационната зона * / ul / * Правила за меню * / li / * Правила за елементите от списъка * / a / * Правила за връзки * /
Гнезденето е изключително полезно, защото то прави стиловете (много) по-четливи. Чрез използване на гнездене и правилно отстъпване можете да постигнете силно четливи кодови структури, дори ако имате доста голяма част от кода.
Един недостатък на гнезденето е, че може да доведе до ненужна специфичност. В горния пример споменахме връзки с #header nav a. Можете също да използвате #header nav ul li a което вероятно би било твърде много.
В Sass е много по-лесно да бъдете много специфични, тъй като всичко, което трябва да направите, е да поставите правилата си. Следното е далеч по-малко четливо и доста специфично.
#header nav / * Правила за навигационната зона * / ul / * Правила за менюто * / li / * Правила за елементите от списъка * / a / * Правила за връзките * /
Разширяване на набор от правила
Разширяването ще бъде познато, ако работите с обектно-ориентирани езици. Най-добре е да се разбере чрез пример, да създадем 3 бутона, които са леки различия.
.бутон display: inline-block; цвят: # 000; фон: # 333; граничен радиус: 4 пкс; подложка: 8px 11px; .button-primary @extend .button; фон: # 0091C2 бутон-малък @extend .button; шрифта: 0.9em; пълнеж: 3px 8px;
Най- .бутон-първичен и .бутон-малък всички класове удължават .бутон клас, което означава, че те поемат всичките му свойства и след това определят собствените си.
Това е изключително полезно в много ситуации, където могат да се използват вариации на даден елемент. Съобщенията (предупреждение / успех / грешка), бутоните (цветове, размери), типовете менюта и т.н. могат да използват разширяващата се функционалност за голяма ефективност на CSS.
Едно предупреждение за удължаването е това те няма да работят в медийни заявки както бихте очаквали. Това е малко по-усъвършенствано, но можете да прочетете всичко за това поведение в „Разбиране на селекторите на резервиращи места“ - селекторите за заместители са специален вид разширение, за което скоро ще говорим..
Mixins
Mixins са друга любима функция на потребителите на препроцесор. Mixins са набор от правила, които могат да се използват многократно - идеални за специфични за производителите правила или за кратки правила за CSS.
Какво ще кажете за създаването на правило за преход за елементите за навързване:
@mixing hover-effect -webkit-transition: фонов цвят 200ms; -moz-transition: фонов цвят 200ms; -о-преход: фонов цвят 200ms; преход: фонов цвят 200ms; a @ включи ефект на завиване; .бутон @ включва hover-ефект;
Mixins също ви позволяват да използвате променливи за дефинирайте стойностите в миксина. Можем да пренапишем примера по-горе дават ни контрол върху точното време на прехода. Може да се наложи бутоните да преминат малко по-бавно, например.
@mixin hover-effect ($ speed) -webkit-transition: фонов цвят $ speed; -moz-transition: фонов цвят $ speed; -о-преход: фонов цвят $ скорост; преход: фонов цвят $ скорост; a @ включва ефекта на завиване (200ms); .бутон @ включи ховер-ефект (300ms);
Селектори за място
Селекторите със запазени места бяха въведени с Sass 3.2 и решават проблем, който може да предизвика малко подуване във вашия генериран CSS код. Разгледайте този код, който създава съобщения за грешки:
.съобщение font-size: 1.1em; подложка: 11 пкс; гранично-ширина: 1px; граница в стил: твърда; .message-danger @extend .message; фон: # C20030; Цвят: #fff; граничен цвят: # A8002A; .message-success @extend .message; фон: # 7EA800; Цвят: #fff; граничен цвят: # 6B8F00;
Най-вероятно класът на съобщенията никога няма да бъде използван в нашия HTML: той е бил създаден, за да бъде разширен, не се използва както е. Това причинява малко подуване в генерирания ви CSS. За да направите вашия код по-ефективен, можете да използвате селектора за задържане, който е обозначен със знак за процент:
% message font-size: 1.1em; подложка: 11 пкс; гранично-ширина: 1px; граница в стил: твърда; .message-danger @extend% бутона; фон: # C20030; Цвят: #fff; граничен цвят: # A8002A; .message-success @extend% бутона; фон: # 7EA800; Цвят: #fff; border-color: # 6D9700;
На този етап може да се чудите каква е разликата между разширенията и миксините. Ако използвате заместители, те се държат като миксин без параметри. Това е вярно, но изходът в CSS се различава. Разликата е в това миксините дублират правила докато Защитените места ще се уверят, че същите правила споделят селекторите, което в крайна сметка води до по-малко CSS.
Операции
Трудно е да се съпротивляваме на каламбура тук, но засега ще се въздържам от всякакви медицински шеги. Операторите ви позволяват да правите някаква математика във вашия CSS код и може да бъде доста помагаща. Примерът в ръководството на Sass е идеален за показване на това:
.контейнер ширина: 100%; статия плувка: наляво; ширина: 600px / 960px * 100%; встрани float: right; ширина: 300px / 960px * 100%;
Примерът по-горе създава система, базирана на 960px, с минимални проблеми. Тя ще се компилира добре до следните CSS:
.контейнер ширина: 100%; статия плувка: наляво; ширина: 62.5%; встрани float: right; ширина: 31,25%;
Една голяма употреба, която намирам за операции, е действително да смесвам цветовете. Ако погледнете по-горното съобщение за успех, не е ясно, че цветът на фона и границата имат някаква връзка. Чрез изваждане на нюанс на сивото можем да потъмним цвета, което прави връзката видима:
$ primary: # 7EA800; .message-success @extend% бутона; фон: $ primary; Цвят: #fff; border-color: $ primary - # 111;
Колкото по-светъл е изваденият цвят, толкова по-тъмен ще бъде полученият оттенък. Колкото по-лек е добавеният цвят, толкова по-лек е полученият цвят.
Функции
Има голям брой функции, които можете да използвате: Функции с цифри, функции с низове, функции за списък, цветови функции и др. Разгледайте дългия списък в документацията на разработчика. Ще разгледам двойка тук, само за да ви покажа как работят.
Най- олекоти и помрачавам функцията може да се използва за промяна на лекотата на даден цвят. Това е по-добре от изваждането на нюанси, това прави всичко още по-модулно и очевидно. Обърнете внимание на предишния ни пример, като използвате функцията за затъмняване.
$ primary: # 7EA800; .message-success @extend% бутона; фон: $ primary; Цвят: #fff; граничен цвят: потъмнява ($ primary, 5);
Вторият аргумент на функцията е необходимото затъмняване. Всички функции имат параметри; погледнете документацията, за да видите какви са те! Ето няколко други функции за оцветяване: десатурира, насищам, инвертна, нива на сивото.
Най- достигам пределна точка функция, точно както в PHP, връща число, закръглено до следващото цяло число. Това може да се използва при изчисляване на ширината на колони или ако не искате да използвате много десетични знаци в окончателния CSS.
.title font-size: ceil ($ title_size * 1.3314);
Преглед
Функциите на Sass ни дават голяма сила да пишем по-добре CSS с по-малко усилия. Правилното използване на mixins, extends, функции и променливи ще направи нашите стилове по-поддържаеми, по-четливи и по-лесни за писане.
Ако се интересувате от друг подобен CSS препроцесор, предлагам да погледнете LESS (или да проверите нашето ръководство за начинаещи) - основната принципала е почти същата!
