Мундариҷа
- Просессори CSS чист?
- Sass чист?
- Чӣ тавр истифода бурдани Sass
- Синтаксис
- Тағирёбандаҳо
- Лона
- Қисмҳо
- Воридот
- Миксинҳо
- Васеъ / мерос
- Операторон
Sass чист? Ин саволест, ки мо дар ин ҷо ҷавоб медиҳем. Агар шумо дар тарроҳии веб нав ҳастед, шумо эҳтимолан истилоҳи шиноварро шунидаед, аммо шумо наметавонед ба суръате, ки Sass аст, чӣ кор мекунад ва оё шумо набояд онро истифода баред. Хулоса, Sass як препроцессори CSS мебошад, ки хусусиятҳои махсус ба монанди тағирёбандаҳо, қоидаҳои лона ва миксинҳоро (баъзан шакари синтаксисӣ номида мешавад) ба CSS-и муқаррарӣ илова мекунад. Ҳадаф аз он соддатар ва самараноктар кардани раванди рамзгузорӣ мебошад. Биёед ба таври муфассалтар биомӯзем.
Барои асбобҳои бештар, дастури моро ба чорчӯбаи беҳтарини CSS ва боло воситаҳои тарроҳии веб кӯшиш кардан.
- Беҳтарин муҳаррирони рамзӣ
Просессори CSS чист?
Препроцессори CSS ин забони скриптӣ мебошад, ки CSS-ро тавсеа медиҳад, ба таҳиягарон имкон медиҳад, ки дар як забон код нависанд ва сипас онро дар CSS тартиб диҳанд. Sass шояд маъмултарин препроцессори ҳозира бошад, аммо дигар намунаҳои маъруф шомили Less ва Stylus мебошанд.
Пеш аз он ки мо минбаъд бештар равем, эълони фаврии хидматрасонии ҷамъиятӣ ба тартиб дароварда мешавад: аксари веб-дизайнерҳо мегӯянд, ки агар шумо бо CSS нав ҳастед, беҳтар аст, ки шумо ҳангоми ҳаракат аз Sass (ё ҳама гуна просессорҳо, васеъшавӣ ё фреймворҳо) канорагирӣ кунед омӯзиш. Гарчанде ки ин дуруст аст, онҳо дар суръат ва самарабахшӣ бартариҳои зиёд доранд, муҳим аст, ки шумо воқеан бо асосҳои CSS сарфаҳм равед. Пеш аз оғози омӯхтани миёнабурҳо ва чизҳои печида, боварӣ ҳосил кунед, ки мафҳумҳои аслиро омӯхтед.
Sass чист?
Sass (ки маънояш 'Syntactically олӣ ҷадвалҳои стилӣ ») як тавсеаи CSS мебошад, ки ба шумо имкон медиҳад чизҳоеро ба монанди тағирёбандаҳо, қоидаҳои лона, воридоти ғайринизомӣ ва ғайра истифода баред. Он инчунин ба нигоҳ доштани чизҳо мусоидат мекунад ва ба шумо имкон медиҳад, ки варақаҳои услубро зудтар созед.
Sass бо ҳама версияҳои CSS мувофиқ аст. Ягона талабот барои истифодаи он ин аст, ки шумо бояд Ruby насб кунед. Аз корбарон инчунин хоҳиш карда мешавад, ки Дастурҳои ҷомеаи Sass -ро риоя кунанд.
Чӣ тавр истифода бурдани Sass
Дар боби оянда, мо бо истифода аз намунаҳо аз вебсайти расмии Sass баъзе маслиҳатҳои асосиро барои истифодаи Sass шарҳ медиҳем. Барои истинодҳо ва мисолҳои иловагӣ ба Ҳуҷҷати Sass назар кунед.
Синтаксис
Sass ду варианти синтаксисро дар бар мегирад:
- SCSS (Sassy CSS): Истифода мебарад .scss васеъкунии файл ва пурра ба синтаксиси CSS мувофиқат мекунад
- Чуқурӣ (ба истилоҳ 'Sass'): Истифода мебарад .сас васеъкунии файл ва дохилшавӣ ба ҷои қавс; он ба синтаксиси CSS пурра мувофиқат намекунад, аммо зудтар менависад
Дар хотир доред, ки файлҳоро бо истифода аз., Аз як синтаксис ба дигараш табдил додан мумкин аст sass-табдил фармон.
Тағирёбандаҳо
Мисли дигар забонҳои барномасозӣ, Sass ба истифодаи тағирёбандаҳо иҷозат медиҳад, ки метавонанд маълумотро дар тамоми ҷадвали услуби худ нигоҳ доранд. Масалан, шумо метавонед арзиши рангро дар тағирёбанда дар қисми болоии файл нигоҳ доред ва пас ин тағирёбандаро ҳангоми гузоштани ранги элементҳои худ истифода баред. Ин ба шумо имкон медиҳад, ки зуд рангҳои худро бидуни тағир додани ҳар як сатр алоҳида тағир диҳед.
Барои намуна:
$ font-stack: Helvetica, sans-serif; $ ибтидоии ранга: # 333; body {font: 100% $ font-stack; ранг: $ ибтидоӣ-ранг; }
CSS зерин истеҳсол карда мешавад:
бадан {font: 100% Helvetica, sans-serif; ранг: # 333; }
Лона
Лона шамшери дуҷониба аст. Гарчанде ки он усули аълои коҳиш додани ҳаҷми рамзи ба шумо навиштанро фароҳам меорад, он метавонад боиси CSS-и баландихтисос гардад, агар бодиққат иҷро карда нашавад. Ғоя ин аст, ки селекторҳои CSS-и худро тавре ҷойгир кунед, ки иерархияи HTML-и шуморо тақлид кунад.
Дар зер услуби навиигатсионие, ки лона истифода мебаранд, нишон дода шудааст:
nav {ul {margin: 0; андова: 0; сабки рӯйхат: ҳеҷ; } li {display: inline-block; } a {display: block; андова: 6px 12px; ороиши матн: ҳеҷ; }}
Натиҷаи CSS чунин аст:
nav ul {margin: 0; андова: 0; сабки рӯйхат: ҳеҷ; } nav li {display: inline-block; } nav a {display: block; андова: 6px 12px; ороиши матн: ҳеҷ; }
Қисмҳо
Қисматҳо файлҳои хурдтари Sass мебошанд, ки онҳоро ба дигар файлҳои Sass ворид кардан мумкин аст (ба боби оянда нигаред). Дар бораи қисмҳо ҳамчун пораҳои код фикр кунед. Бо ин порчаҳои рамзӣ, CSS-и шумо акнун метавонад модулӣ бошад ва нигоҳдории он осонтар шавад. Қисми номбаршуда бо гузоштани он бо зерхатти пешбар таъин карда мешавад: _partial.scss.
Воридот
Бо қисмҳо истифода мешавад (ба боби қаблӣ нигаред), @import директива ба шумо имкон медиҳад, ки файлҳои қисмии худро ба файли ҷорӣ ворид кунед, ва як файли CSS-и ягона созед. Дар хотир доред, ки чӣ қадар воридотро, ки шумо ҳамчун дархости HTTP истифода мекунед, барои ҳар яке тавлид карда мешавад.
// _reset.scss html, body, ul, ol {margin: 0; андова: 0; }
// basefile.scss @import 'reset'; бадан {font: 100% Helvetica, sans-serif; замина-ранг: #efefef; }
Ва баромади мувофиқи CSS:
html, бадан, ul, ol {margin: 0; андова: 0; } бадан {font: 100% Helvetica, sans-serif; замина-ранг: #efefef; }
Эзоҳ: Ҳангоми ворид кардани қисмҳо, ба шумо лозим нест, ки васеъкунии файл ё зеркасоро илова кунед.
Миксинҳо
Яке аз бартариҳои истифодаи препроцессорҳо қобилияти гирифтани рамзи мураккаб ва дарозмуддат ва содда кардани он мебошад. Дар ин ҷо омехтаҳо муфиданд!
Масалан, агар ба шумо пешвандҳои фурӯшандаро дохил кардан лозим ояд, шумо метавонед ба ҷои он миксинро истифода баред. Ба ин мисол нигаред радиус:
@mixin border-radius ($ radius) {-webkit-border-radius: $ radius; -moz-border-radius: $ радиус; -ms-border-radius: $ радиус; радиуссарҳад: $ радиус; } .box {@include border-radius (10px); }
Аҳамият диҳед @mixin дастур дар боло. Ба он ном гузошта шудааст радиус ва тағирёбандаро истифода мебарад $ радиус ҳамчун параметр. Ин тағирёбанда барои таъин кардани арзиши радиус барои ҳар як элемент истифода мешавад.
Баъдтар, @ дохил кардан директива дар якҷоягӣ бо номи миксин номида мешавад (радиус) ва параметр (10px). Ҳамин тавр .box {@include border-radius (10px); }.
CSS-и зерин истеҳсол карда мешавад:
.box {-webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; радиуси сарҳад: 10px; }
Васеъ / мерос
Дар @extend директива яке аз хусусиятҳои пурқудрати Сасс номида шудааст. Пас аз дидани он дар амал, маълум аст, ки чаро.
Ғоя ин аст, ки бо ин дастур ба шумо лозим нест, ки номи сершумори синфҳоро ба унсурҳои HTML-и худ дохил кунед ва метавонед коди худро DRY нигоҳ доред (худро такрор накунед). Интихобкунандагони шумо метавонанд сабкҳои дигар интихобкунандагонро ба мерос гиранд ва пас дар сурати зарурӣ ба осонӣ васеъ карда шаванд. Ҳоло ин тавоно аст.
Операторон
Доштани қобилияти ҳисобкунӣ дар CSS-и шумо ба шумо имкон медиҳад, ки бештар кор кунед, ба монанди табдил додани арзишҳои пиксел ба фоизҳо. Шумо ба функсияҳои стандартии математика, ба монанди илова, тарҳ, зарб ва тақсим дастрасӣ пайдо мекунед. Албатта, ин функсияҳоро барои эҷоди ҳисобҳои мураккаб якҷоя кардан мумкин аст.
Ғайр аз он, Sass якчанд функсияҳои дарунсохтро дар бар мегирад, ки барои идора кардани рақамҳо кӯмак мерасонанд. Вазифаҳо ба монанди фоиз (), фарш () ва мудаввар () чандеро номбар кардан мумкин аст.
