Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML & CSS
Code

Sass супраць МЕНШЫЯ супраць Стілус: препроцессора выбыванне

by
Difficulty:IntermediateLength:LongLanguages:

Belarusian (беларуская мова) translation by Władysław Łucyszyn (you can also view the original English article)

Валодаючы праўдзівую моц CSS препроцессора гэта прыгода. Ёсць незлічонае мноства моў, сінтаксіс і функцыі, усё гатова да выкарыстання прама цяпер.

У гэтым артыкуле мы будзем разглядаць розныя магчымасці і перавагі выкарыстання трох розных препроцессора-Sass, Less, і стілус.


Вядзенне

Препроцессора вырабляюць CSS, які працуе ва ўсіх браўзэрах.

CSS3 препроцессора мовы напісана з адзінай мэтай дадання прахалодных, вынаходніцкіх магчымасцяў у CSS без парушэння сумяшчальнасці браўзэра. Яны робяць гэта шляхам кампіляцыі коды мы пішам у рэгулярны CSS, якія могуць быць выкарыстаны ў любым браўзэры, усе шляхах назад да каменнага веку. Ёсць тысячы магчымасцяў, якія препроцессора прыносяць да стала, і ў гэтым артыкуле мы разгледзім некаторыя з іх агалоскі, і некаторыя не гэтак разрэкламаваных з іх. Давайце пачнем.


сінтаксіс

Найбольш важная частка напісання кода ў CSS препроцессора з'яўляецца разуменне сінтаксісу. На шчасце для нас, сінтаксіс (ці можа быць) ідэнтычны рэгулярнай CSS для ўсіх трох препроцессора.

Sass & МЕНШЫЯ

Sass і МЕНШЫЯ абодва выкарыстоўваюць стандартны сінтаксіс CSS. Гэта робіць яго вельмі лёгка пераўтварыць існуючы файл CSS альбо препроцессор. Sass выкарыстоўвае пашырэнне .scss файла і LESS выкарыстоўвае .less пашырэнне. Асноўная Sass або МЕНШЫЯ файл можа быць усталяваны, як паказана ніжэй:

Як вы ўжо заўважылі, гэта толькі рэгулярныя CSS, які кампілюе выдатна ў абодвух Sass і МЕНШЫЯ.

Важна адзначыць, што Sass таксама мае больш стары сінтаксіс, які апускае і кропку з коскай у фігурныя дужкі. Хоць гэта ўсё яшчэ вакол, яна старая, і мы не будзем выкарыстоўваць яго міма гэтага прыкладу. Сінтаксіс выкарыстоўвае пашырэнне .sass файла і выглядае наступным чынам:

стілус

Сінтаксіс для Stylus значна больш шматслоўны. З дапамогай пашырэння .styl файла Stylus прымае стандартны сінтаксіс CSS, але яна таксама прымае некаторыя іншыя варыянты, дзе дужкі, двукроп'е і кропка з коскі з'яўляюцца неабавязковымі. Напрыклад:

Выкарыстоўваючы розныя варыяцыі адной і той жа табліцы стыляў таксама справядліва, так што наступнае будзе кампілявацца без памылак.


зменныя

Зменныя могуць быць абвешчаныя і выкарыстаныя па ўсёй табліцы стыляў. Яны могуць мець любое значэнне, значэнне CSS (напрыклад, колеру, лічбы [ўключаны адзінкі], або тэкст.), І можа быць у любым месцы спасылацца на працягу ўсёй нашай табліцы стыляў.

спрачацца

Пераменная Sass папярэднічаецца з сімвалам $, а значэнне і імя падзяляюцца кропкай з коскі, гэтак жа, як ўласцівасць CSS.

МЕНШЫЯ

МЕНШЫЯ зменныя сапраўды гэтак жа, як і зменныя Сасс, за выключэннем таго, што імёны зменных папярэднічаюцца сімвалам @.

стілус

Стілус пераменнае нічога не патрабуе, каб далучаецца да іх, хоць гэта дазваляе сімвал $. Як заўсёды, заканчваючы кропкай з коскі не патрабуецца, але знак роўнасці паміж значэннем і зменнай. Адна рэч, каб адзначыць, што стілус (0.22.4) кампілюе калі папярэднічаць сімвал @ імя зменнай, але не будзе прымяняць значэнне пры спасылцы. Іншымі словамі, не рабіце гэтага.

укладальнік CSS

Кожны з пералічаных вышэй файлаў будзе кампіляваць ў тым жа CSS. Вы можаце выкарыстоўваць сваё ўяўленне, каб убачыць, наколькі карыснымі зменныя могуць быць. Мы не будзем больш не трэба мяняць адзін колер і прыйдзецца перадрукоўваць яго дваццаць разоў, або хочаце змяніць нашу шырыню сайта і вырыць вакол, каб знайсці яго. Вось CSS пасля кампіляцыі:


гнездаванне

Калі нам трэба спасылацца некалькі элементаў з тым жа бацькам у нашым CSS, гэта можа быць стомна, каб пісаць бацька зноў і зноў.

Замест гэтага, выкарыстоўваючы препроцессор, мы можам запісаць дзетак селектараў ўнутры дужак з бацькоў. Акрамя таго, сімвал & спасылаецца на бацькоўскі селектар.

Sass, LESS, і стілус

Усе тры препроцессора маюць аднолькавы сінтаксіс для гнездавання селектараў.

укладальнік CSS

Гэта скампіляваны CSS з кода вышэй. Гэта сапраўды гэтак жа, як і калі мы пачыналі, як зручна!


прымешкі

Прымешкі з'яўляюцца функцыямі, якія дазваляюць паўторнае выкарыстанне уласцівасцяў ўсёй нашай табліцы стыляў. Замест таго, каб ісці на працягу ўсёй нашай табліцы стыляў і змяніць ўласцівасць некалькі разоў, зараз мы можам проста змяніць яго ў нашым Mixin. Гэта можа быць вельмі карысным для канкрэтнага стылю элементаў і прэфіксаў. Калі Прымешкі называюцца ўнутры селектара CSS, аргументы Змешванне распазнаюцца і стылі ўнутры Mixin прымяняюцца да селектары.

Sass

LESS

Stylus

укладальнік CSS

Усе препроцессора кампіляваць ў той жа код ніжэй:


ўспадкоўванне

Пры напісанні CSS старамодным спосабам, мы маглі б выкарыстоўваць наступны код, каб прымяніць тыя ж стылі да некалькім элементам адразу:

Гэта выдатна працуе, але калі нам трэба дадаткова ўкладваць элементы паасобку, іншы селектар павінен быць створаны для кожнага, і ён можа хутка атрымаць хаатычны і цяжэй падтрымліваць. Для таго, каб супрацьстаяць гэтаму, атрыманне ў спадчыну можа быць выкарыстана. Ўспадкоўванне з'яўляецца магчымасцю для іншых CSS селектараў успадкаваць ўласцівасці іншага выбару.

Sass & Stylus

Укладальнік CSS (Sass & Stylus)

LESS

МЕНШЫЯ на самай справе не падтрымлівае атрыманне ў спадчыну стыляў, такіх як Sass і стілус. Замест таго каб дадаваць некалькі селектараў у адзін набор уласцівасцяў, ён разглядае ўспадкоўванне як прымешка без аргументаў і імпартуе стылі ў іх уласныя селектары. Недахоп з'яўляецца тое, што ўласцівасці паўтараюцца ў скампіляваных табліцах стыляў. Вось як вы б ўсталяваць яго:

Укладальнік CSS (LESS)

Як вы можаце бачыць, стылі з .block былі ўстаўленыя ў селектары, якія мы хацелі даць ўдзелы. Важна адзначыць, што прыярытэт можа стаць праблемай тут, так што будзьце асцярожныя.


імпарт

У CSS супольнасці, імпартаванне CSS незадавальненне, паколькі яна патрабуе некалькі запытаў HTTP. Імпарт з препроцессором працуе па-рознаму, аднак. Калі вы імпартуеце файл з любога з трох препроцессора, ён будзе літаральна ўключаць імпарт падчас кампіляцыі, ствараючы толькі адзін файл. Майце на ўвазе, аднак, што імпартуюць рэгулярныя .css файлы кампілюе з @import "file.css"; код. Код. Акрамя таго, Прымешкі і зменныя могуць быць імпартаваныя і выкарыстаны ў асноўны табліцы стыляў. Імпарт дазваляе ствараць асобныя файлы для арганізацыі вельмі варта.

Sass, LESS, & Stylus

укладальнік CSS


Функцыі кіравання колерам

Каляровыя функцыі ўбудаваныя функцыі, якія зменяць колер пры кампіляцыі. Гэта можа быць вельмі карысна для стварэння градыентаў, больш цёмныя колеру пры навядзенні курсора мышы, і многае іншае.

Sass

Гэта толькі кароткі пералік даступных каляровых функцый у Sass, поўны спіс даступных каляровых функцый Sass можна знайсці, прачытаўшы дакумент Сасс.

Каляровыя функцыі можна выкарыстоўваць у любым месцы, што колер з'яўляецца сапраўдным CSS. Вось прыклад:

LESS

Спіс усіх LESS функцый можна знайсці, прачытаўшы LESS дакументацыі.

Вось прыклад таго, як выкарыстоўваць функцыю колеру ў LESS:

Stylus

Поўны спіс усіх каляровых функцый стілус можна знайсці, прачытаўшы Stylus дакументацыі.

Вось прыклад выкарыстання каляровых функцый Stylus:


аперацыі

Робячы матэматыку ў CSS з'яўляецца вельмі карысным, і цяпер цалкам магчыма. Гэта проста, і гэта, як гэта зрабіць:

Sass, LESS, & Stylus


практычнае прымяненне

Мы разгледзелі шмат асаблівасцяў і новых рэчаў, якія препроцессор могуць зрабіць, але мы не пакрылі што заўгодна практычныя або непрактычна. Вось кароткі пералік рэальных прыкладанняў, дзе выкарыстанне препроцессора з'яўляецца выратавальнікам.

прыстаўкі

ПрадавецГэта адна з разадзьмутых прычын выкарыстоўваць препроцессор і для вельмі добрай прычыны, што эканоміць процьму часу і слёз. Стварэнне падмяшаць для апрацоўкі прэфіксаў лёгка і эканоміць шмат паўтораў і хваравітага рэдагавання. Вось як гэта зрабіць:

Sass

LESS

Stylus

укладальнік CSS

3D Text

Падробка 3D тэкст з дапамогай некалькіх text-shadows разумная ідэя. Адзіная праблема заключаецца ў тым, што змяненне колеру пасля факту з'яўляецца цяжкім і грувасткім. Выкарыстанне Прымешкі і каляровыя функцыі, мы можам стварыць 3D тэкст і змяніць колер на лету!

Sass

LESS

Stylus

Я вырашыў напісаць стілус text-shadows на адной лініі, таму што я апусціў фігурныя дужкі.

укладальнік CSS

канчатковы вынік

калоны

Выкарыстанне лічбавых аперацый і зменныя для слупкоў ідэя, якую я прыдумаў, калі я першы гуляў з CSS препроцессором. Абвясціўшы патрэбную шырыню у пераменным, мы можам лёгка змяніць яго ўніз па дарозе без якога-небудзь ментальнага-мата. Вось як гэта робіцца:

Sass

LESS

Stylus

укладальнік CSS


прыкметныя Quirks

Ёсць даволі шмат дзівацтваў ў выкарыстанні CSS препроцессора. Я збіраюся перайсці на некаторых з пацешных іх, але калі вы сапраўды зацікаўлены ў пошуку іх усіх я рэкамендую вам гойсаць дакументацыю ці, яшчэ лепш, проста пачаць выкарыстоўваць препроцессор ў вашым штодзённым кадаванні.

Паведамленні пра памылкі

Калі вы напісалі CSS для любога прыстойнага колькасці часу, я ўпэўнены, што вы дасягнулі кропкі, дзе была памылка дзесьці і проста не мог знайсці яго. Калі вы што-небудзь накшталт мяне, вы, верагодна, правёў дзень выцягваць вашы валасы і каментуючы розныя рэчы, каб паляваць на памылку ўніз.

CSS препроцессор паведамляць пра памылкі. Гэта проста. Калі нешта не так з вашым кодам ён кажа вам, дзе, і калі вам пашанцуе: чаму. Вы можаце праверыць гэты блог, калі вы зацікаўлены ў тым, як памылкі прадстаўлены ў розных препроцессора.

каментары

Пры кампіляцыі з CSS препроцессора, любы двайны слэш каментар атрымлівае выдалены (напрыклад //comment) і любыя слэш-зорачка каментар знаходжання (напрыклад, /* comment */). Гэта, як гаворыцца, выкарыстоўвайце двайны слэш для каментароў вы хочаце на нескомпилированной баку і слэш-зорачка для каментароў, якія вы хочаце бачныя пасля кампіляцыі.

Толькі заўвага: калі вы збіраеце паменшанымі, усе каментары будуць выдаленыя.


выснову

Кожны CSS препроцессор мы разгледзелі (Sass, Less, і стілус) мае свой уласны унікальны спосаб дасягнення тых жа Задачи- падае распрацоўнікам магчымасць выкарыстоўваць карысныя, непадтрымоўваныя функцыі, захоўваючы пры гэтым сумяшчальнасць браўзэра і чысціню кода.

Хоць не з'яўляецца абавязковым патрабаваннем для развіцця, препроцессора могуць зэканоміць шмат часу і маюць некаторыя вельмі карысныя функцыі.

Я заклікаю вас, каб паспрабаваць, як многія з препроцессора, як гэта магчыма, так што вы можаце эфектыўна выбраць любімы і даведацца, чаму ён выступае за многімі іншымі. Калі вы яшчэ не спрабавалі выкарыстоўваць препроцессор напісаць CSS, я настойліва рэкамендую вам паспрабаваць.

У вас ёсць любімы CSS препроцессора асаблівасць, якую я не згадаў? Ці ёсць што-то можна зрабіць, што іншы не можа? Дайце нам ведаць у каментарах ніжэй!

Асобнае дзякуй Karissa Сміт, супер-таленавіты сябар мой, які стварыў мініяцюру папярэдняга прагляду для гэтага артыкула.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.