Едно от нещата, които CSS Той няма по подразбиране използването на структури в стил програмиране, където можем да използваме повторно кода по логичен начин. тези промени.
Този подход означава, че в края на деня получаваме дълги таблици със стилове и въпреки че този резултат няма да варира в зависимост от използването По -малко.js, ако начинът, по който стигаме до посочените листа, се променя, това благодарение на Миксини и наследяване, където можем да декларираме и използваме някои компоненти, за да избегнем ръчно разработване на структурите.
Изисквания1- За да изпълним този урок, ние ще изискваме някои неща предварително, трябва да имаме папка, в която да съхраняваме файловете си .по-малко Y .css, трябва да имаме разрешения за него, за да можем да правим промени, ако е необходимо.
2- Трябва да имаме функционална инсталация на По -малко.js, както и всички негови предпоставки, каквито са Node.js Y npm, за да можем да компилираме нашите генерирани стилови таблици.
3- Накрая ще ни трябва и текстов редактор, за да можем да направим кода, който можем да използваме Възвишен текст o NotePad ++, въпреки че класическият бележник също ще работи за нас, всичко зависи от това дали искаме помощ с кода или разширените функции.
Задайте CSS свойства с MixinЕдно от първите неща, за които трябва да знаем Миксини, е, че те са методи, които ни помагат да установим свойствата CSS за нашия проект, по начин, който да ни помогне да използваме повторно кода и да постигнем по -последователни стилове. Особеността на Mixin е, че при компилирането на нашия код По-малко Това не се взема предвид, в смисъл, че таблица със стил на Mixins не се генерира, това се постига чрез включване на скоби при тяхното дефиниране, след като имаме Mixin, трябва да импортираме изходния му файл и по този начин просто неговите стойности са прехвърлени в основния ни лист, който ще включим на нашата страница.
Създаване на нашата първа Миксин
Нека създадем a Миксин което ни позволява да установим собственост CSS за закръгляване на ръбовете на елемент в нашия HTML, за това трябва да изпълним следните стъпки:
1- Ще създадем в папката на проекта файл, наречен mixins.less, а вътре ще поставим следното съдържание:
.rounded-edge () {border-radius: 7px; }2- Сега ще създадем файл, наречен project.less, тук ще установим начина, по който ще се прилагат различните стилове на нашата страница HTML, за да свикнем да работим По-малко ще създадем няколко правила CSS за да можем да видим как МиксиниНека да видим кода, който трябва да поставим в този файл.
@import "mixins.less"; @ header-background-color: син; @ content-background-color: зелен; @ footer-background-color: red; заглавка {. заоблени ръбове (); background-color: @ header-background-color; цвят: контраст (@ header-background-color); } p {.rounded-edge (); background-color: @ content-background-color; цвят: контраст (@ content-background-color); } долен колонтитул {. заоблени ръбове (); background-color: @ footer-background-color; цвят: контраст (@ footer-background-color); }Както виждаме, започваме с импортиране на файла, който сме генерирали в предишната стъпка, след това установяваме 3 променливи, на които даваме цвят като стойност, накрая започваме да създаваме класовете за елементите HTML, първото нещо, което правим, е да извикаме нашата функция Заоблени ръбове (), и след това присвояваме цветовете на елементите с променливите.
3- В тази стъпка ще създадем файла HTML, които можем да наречем както искаме, стига да има структура като следната:
Миксини с по -малко La cabeceraКакто виждаме, ние просто направихме включването на нашия файл .по-малко като .js, който съдържа инструмента, ние избрахме тази опция, така че да не се налага да компилираме, но трябва да помним, че това не трябва да се прилага в производството. В тялото на HTML Ние генерираме различните елементи, които бяхме дефинирали в CSS, за да видим приложението на стиловете.Съдържанието
Долен колонтитул
4- И накрая, ако искаме да видим резултата, просто отворете нашия документ в браузър като Firefox и за да можем да видим как изглежда всичко, нека видим на следващото изображение какво имаме:
Ако отидем малко по -далеч и видим изходния код, който браузърът интерпретира, ще видим как различните променливи и Миксин приложен, той всъщност е заменен с код CSS, което означава, че дори да сме написали имота само веднъж По-малко поставя го там, където съвпадението съответства, да видим:
Наследството в нашите стилове
Работата с наследства е нещо, което ни помага и поради тази причина можем да създадем превъзходни елементи, които предават някои свойства на техните по -ниски или съдържащи елементи, тоест има общи характеристики, които няма да се налага да повтаряме в елементи, които искаме да ги има.
Както винаги, целта да не се повтаря кодът е да ни спести работа и време, както и да намали грешките и да увеличи поддържаемостта на нашия код благодарение на последователността и централизирането на неговите ресурси.
Един от най -основните, но ефективни начини за работа с наследяване е с вложени елементи, да речем, че имаме раздел HTML и вътре ще имаме няколко елемента, ако използваме CSS Класически да се каже, че всички елементи на този раздел имат някои свойства, но те са различни, би било необходимо да се направи поне един ред за всеки стил, нека видим какво имаме предвид:
раздел елемент1 {съдържание1: xx; } елемент елемент 2 {content2: zz; }Както виждаме, ние правим повече код, отколкото би трябвало, вместо това, ако използваме наследяване и вмъкване По-малко можем да постигнем нещо като следното:
раздел {елемент1 {съдържание1: xx; } item2 {content2: zz; }}Както виждаме, ние не само пишем по -малко, но и представянето на това, което искаме да постигнем, е много по -логично, което ни помага да разберем и правилно да разделим елементите, които ще използваме в нашите стилове.
Създаване вложени стилове
Сега ще приложим това, което току -що обяснихме в предишната точка, трябва да създадем файл .по-малко където правим стил, който е вложен, за да спестим работата и да я направим по -логична. За да постигнем тази задача, трябва да изпълним следните стъпки:
1- Нека създадем файл.по-малко какво можем да наречем наследство.лез, тук ще създадем вложените стилове, за да разберем това, просто ще видим кода, който ще поставим и по този начин концепцията ще дойде при нас по по -добър начин.
раздел {h1 {font-size: 4em;} p {padding: 0 5px;}}Виждаме, че сме създали стил за елемента раздел, и че всичко h1 или стр в този елемент на контейнера той трябва да работи с установените правила, които сме вложили.
2- Сега трябва да създадем нашия файл HTML което ще прилича много на предишното упражнение, какви промени са имената на файловете, които да се включат, и структурата в тяло, но ако го виждаме по абстрактен начин, говорим за едно и също нещо, нека да разгледаме кода.
Наследяване в по -малкоКакто виждаме просто като включим нашия файл По-малко е, че ще генерираме необходимите стилове, ако видим как изглежда в браузъра, ще получим нещо като следното:Нашето съдържание
Ако обаче забележим какво се случва с CSS Когато бъде интерпретиран или компилиран, ще видим, че вложената форма, която сме изградили, не се спазва, но тъй като компилаторът прави тази негнездена форма директно, не е нужно да се притесняваме, че това е по този начин, нека видим какво кодът, който браузърът ни вижда, изглежда така:
С това можем да завършим този урок, както видяхме По-малко не е само писане CSS по различен начин, е да направим тези различия полезни, което ни кара да спестим време, да направим приложенията по -приятелски за нашия екип за разработка и да спестим усилия, като мислим по -логично и използваме повторно компоненти. Начинът, по който всичко това има най -голям смисъл за нас, е, че продължаваме да практикуваме и прилагаме тези примери в практически и реални случаи, за да можем да свикнем с този начин на работа.
Хареса ли ви и помогнахте на този урок?Можете да възнаградите автора, като натиснете този бутон, за да му дадете положителна точка
