Vienkārša un vienkārša rokasgrāmata, lai saprastu Sassu
Pirms kāda laika Thoriq Firdaus rakstīja lielisku rakstu par Sass uzsākšanu, kas parādīja, kā instalēt un izmantot šo ļoti noderīgo CSS priekšapstrādes valodu (iespējams, vēlēsities to pārbaudīt, zināt, lai sāktu).
Šajā rakstā es domāju, ka dotu jums mazliet vairāk ieskatu par to, ko jūs varat darīt ar Sass un kā izstrādātāji to izmanto katru dienu, lai izveidotu labāku un modulārāku CSS kodu. Pāriet uz vēlamo sadaļu:
- Tirdzniecības instrumenti
- Mainīgie
- Ligzdošana
- Noteikumu paplašināšana
- Mixins
- Vietu atlasītāju izvēle
- Darbības
- Funkcijas
Tirdzniecības instrumenti
Thoriq parādīja, kā jūs varat izmantot Sass no komandrindas, izmantojot sass - pulkstenis komandu.
Ja vēlaties izmantot GUI rīkus, varat doties kopā ar savu personīgo iecienīto lietotni, Codekit, tīmekļa izstrādātāja rīku Sass apkopošanai, samierināšanai, automātiskai korekcijai un daudz ko citu. Prepros ir vēl viena ļoti spējīga lietojumprogramma, ko var izmantot visās sistēmās. Abi ir apmaksātiem pieteikumiem bet ir tā vērts, ja jūs tos izmantosiet ilgtermiņā.
Ja jūs vienkārši vēlaties izmēģināt Sassu nemaksājot neko jūs varat izmantot terminālu, vai Koala (šeit ir mūsu pārskats), bezmaksas pārrobežu platformu iezīme bagātu lietotni, kas var uzturēt savu pamatu pret prēmijām.
Mainīgie
Viena no pirmajām lietām, kas jums būs nepieciešams, lai apvītu galvu, ir mainīgie. Ja jūs nāksiet no PHP vai cita līdzīga koda valodas fona, tas būs jums otrais raksturs. Mainīgie ir atkārtoti izmantojamas informācijas bitu un gabalu uzglabāšana, piemēram, krāsu vērtība, piemēram:
$ original_color: # 666666; . taustiņš krāsa: $ primārā_krāsa; .nozīmīgs krāsa: $ primārā_krāsa;
Tas nešķiet noderīgs šeit, bet iedomājieties, ka jums ir 3000 koda rindas. Ja jūsu krāsu shēma mainās, katrai krāsu vērtībai būs jānomaina CSS. Ar Sassu jūs varat vienkārši mainīt vērtību no $ original_color mainīgs un ar to tiek darīts.
Tiek izmantoti mainīgie lielumi fonta nosaukumu, izmēru, krāsu un citas informācijas glabāšana. Lielākiem projektiem var būt vērts iegūt visus mainīgos lielumus atsevišķā failā (mēs apskatīsim, kā tas tiek darīts drīz). Tas, ko jūs varat darīt, ir atjaunot visu savu projektu un mainīt fontus un citus galvenos aspektus nekad nepieskaroties faktiskajiem CSS noteikumiem. Viss, kas jums jādara, ir mainīt dažus mainīgos.
Ligzdošana
Vēl viena pamata iezīme Sass dod jums spēja ligzdot noteikumus. Pieņemsim, ka jūs veidojat navigācijas izvēlni. Jums ir nav elements, kas satur neierobežotu sarakstu, saraksta vienumus un saites. CSS jūs varat darīt kaut ko līdzīgu:
#header nav / * Nav navigācijas zonas noteikumi * / #header nav ul / * Noteikumi izvēlnei * / #header nav li / * Noteikumi saraksta vienumiem * / #header nav a / / Noteikumi saitēm * /
Selektoros mēs daudz atkārtojam. Ja elementiem ir kopīgas saknes, mēs varam izmantot ligzdošanu rakstiet mūsu noteikumus daudz tīrākā veidā.
Lūk, kā iepriekš minētais kods varētu izskatīties Sass:
#header nav / * Noteikumi nav zonas * / ul / * Noteikumi izvēlnei * / li / * Noteikumi saraksta vienumiem * / a / * Noteikumi par saitēm * /
Ligzdošana ir ļoti noderīga, jo tā padara stilu (daudz) vieglāk lasāmus. Izmantojot ligzdošanu kopā ar pareizu ievilkumu, jūs varat sasniegt ļoti salasāmas koda struktūras, pat ja jums ir taisnīgs kods.
Viens ligzdošanas trūkums ir tas, ka tas var radīt nevajadzīgu specifiku. Iepriekš minētajā piemērā es atsaucos uz saitēm ar #header nav a. Varat arī izmantot #header nav ul li a kas varētu būt pārāk daudz.
Sassā ir daudz vieglāk būt ļoti specifiski, jo viss, kas jums jādara, ir ligzdot savus noteikumus. Turpmāk ir daudz mazāk lasāms un diezgan specifisks.
#header nav / * Noteikumi nav zonas * / ul / * Noteikumi izvēlnei * / li / * Noteikumi saraksta vienumiem * / a / * Noteikumi par saitēm * /
Noteikumu paplašināšana
Paplašināšana būs pazīstama, ja jūs strādājat ar objektorientētām valodām. To vislabāk saprast, izmantojot piemēru, izveidosim 3 pogas, kas ir nelielas viena otras variācijas.
.poga displejs: inline-bloks; krāsa: # 000; fons: # 333; robežu rādiuss: 4px; polsterējums: 8px 11px; . taustiņš-primārais @extend .button; fons: # 0091C2 .button-small @xtxt. poga; fonta lielums: 0.9em; polsterējums: 3px 8px;
The .poga-primārā un .poga - maza klases visas paplašina .poga tas nozīmē, ka viņi uzņemas visas savas īpašības un pēc tam definē savu.
Tas ir ļoti noderīgi daudzās situācijās, kad var izmantot elementa variācijas. Ziņas (trauksmes / veiksmes / kļūdas), pogas (krāsas, izmēri), izvēlņu tipi utt. Varētu izmantot paplašināšanas funkcionalitāti lielai CSS efektivitātei.
Viens no izvērsumiem ir tas, ka tie nedarbosies mediju vaicājumos kā jūs varētu sagaidīt. Tas ir nedaudz vairāk uzlabots, bet jūs varat izlasīt visu par šo rīcību, saprotot vietnes dalībnieku atlasītājus - vietas īpašnieku atlasītāji ir īpaša veida paplašinājums, par kuru mēs drīz runāsim.
Mixins
Mixins ir vēl viena priekšprocesoru lietotāju iecienīta iezīme. Mixins ir atkārtoti izmantojami noteikumi - ideāli piemēroti pārdevēja specifiskiem noteikumiem vai ilgstošiem CSS noteikumiem.
Kā izveidot pārejas noteikumu lidojošiem elementiem:
@miestēšanas efekts -webkit-pāreja: fona krāsa 200ms; -moz-pāreja: fona krāsa 200ms; -o-pāreja: fona krāsa 200ms; pāreja: fona krāsa 200ms; a @ ietveriet hover-effect; . taustiņš @ ietver hover-efektu;
Mixins arī ļauj izmantot mainīgos lielumus definēt vērtības maisījumā. Mēs varētu pārrakstīt iepriekš minēto piemēru dot mums kontroli pār precīzu pārejas laiku. Mēs, piemēram, varam vēlēties, lai pogas pārietu mazliet lēnāk.
@mixin hover-effect ($ speed) -webkit-pāreja: fona krāsu $ ātrums; -moz-pāreja: fona krāsu $ ātrums; -o-pāreja: fona krāsu $ ātrums; pāreja: fona krāsu $ ātrums; a @ ietvert hover-effect (200ms); . taustiņš @ ietver hover-effect (300ms);
Vietu atlasītāju izvēle
Ar Sass 3.2 tika ieviesti placeholder atlasītāji un atrisināta problēma, kas var radīt jūsu ģenerētā CSS koda mazliet uzpūsties. Apskatiet šo kodu, kas rada kļūdas ziņojumus:
.ziņojums font-size: 1.1em; polsterējums: 11px; robežu platums: 1px; robežu stils: ciets; . ziņojuma briesmas @extend .message; fons: # C20030; krāsa: #fff; rāmja krāsa: # A8002A; . ziņu panākumi @extend .message; fons: # 7EA800; krāsa: #fff; rāmja krāsa: # 6B8F00;
Visticamāk, ka ziņu klase nekad netiks izmantota mūsu HTML: tā ir bijusi izveidots, lai to pagarinātu, neizmanto kā tādu. Tas rada mazliet uzpūsties jūsu radītajā CSS. Lai padarītu jūsu kodu efektīvāku, varat izmantot vietas vārda selektoru, kas norādīts ar procentuālo zīmi:
% message font-size: 1.1em; polsterējums: 11px; robežu platums: 1px; robežu stils: ciets; . ziņojuma bīstamība @extend% poga; fons: # C20030; krāsa: #fff; rāmja krāsa: # A8002A; .message-success @extend% poga; fons: # 7EA800; krāsa: #fff; rāmja krāsa: # 6D9700;
Šajā posmā jums var būt jautājums, kāda ir atšķirība starp paplašinājumiem un maisījumiem. Ja izmantojat vietniekvārdus, viņi rīkojas kā bezparametri. Tas ir taisnība, bet CSS izeja atšķiras. Atšķirība ir tā mixins dublē noteikumus kamēr vietnieki var pārliecināties, ka tie paši noteikumi kopīgo atlasītājus, rezultātā samazinās CSS.
Darbības
Grūti šeit ir grūti pretoties, bet tagad es atturēšos no jebkādiem medicīniskiem jokiem. Operatori ļauj jums veikt kādu matemātiku savā CSS kodā un var būt diezgan noderīgi. Piemērs Sass ceļvedī ir ideāls, lai to demonstrētu:
.tvertne platums: 100%; raksts float: pa kreisi; platums: 600px / 960px * 100%; malā float: right; platums: 300px / 960px * 100%;
Iepriekš minētais piemērs rada 960px balstītu tīkla sistēmu ar minimālu problēmu. Tā labi apkopos šādu CSS:
.tvertne platums: 100%; raksts float: pa kreisi; platums: 62,5%; malā float: right; platums: 31,25%;
Viena lieliska lietošana, ko es atradu operācijām, ir faktiski sajaukt krāsas. Ja jūs aplūkojat panākumu vēstījumu Sass, nav skaidrs, vai fona un robežas krāsa ir kaut kādas attiecības. Atņemot pelēkas nokrāsu, varam tumšāku krāsu, padarot attiecības redzamas:
$ primārā: # 7EA800; .message-success @extend% poga; fons: $ primārais; krāsa: #fff; rāmja krāsa: $ primārais - # 111;
Jo vieglāk atņemta krāsa, jo tumšāks būs nokrāsojums. Gaišāka pievienotā krāsa, jo vieglāks ir nokrāsa.
Funkcijas
Ir daudz izmantojamo funkciju: ciparu funkcijas, virknes funkcijas, saraksta funkcijas, krāsu funkcijas un daudz ko citu. Apskatiet garo sarakstu izstrādātāja dokumentācijā. Es apskatīšu pāris šeit, lai parādītu, kā viņi strādā.
The vieglāk un tumšāks funkciju var izmantot, lai mainītu krāsas vieglumu. Tas ir labāks nekā toņu atņemšana, tas padara visu vēl modulāru un acīmredzamu. Apskatiet mūsu iepriekšējo piemēru, izmantojot tumšāku funkciju.
$ primārā: # 7EA800; .message-success @extend% poga; fons: $ primārais; krāsa: #fff; rāmja krāsa: tumšāka ($ primārā, 5);
Otrs funkcijas arguments ir vajadzīgā tumšuma procentuālā daļa. Visām funkcijām ir parametri; apskatiet dokumentāciju, lai redzētu, kas viņi ir! Šeit ir dažas citas pašsaprotamas krāsu funkcijas: desaturāts, piesātināts, apgriezt, pelēktoņu.
The ceil funkcija, tāpat kā PHP, atgriež skaitli, kas noapaļots līdz nākamajam veselam skaitlim. To var izmantot, aprēķinot kolonnas platumu vai, ja nevēlaties, lai galīgajā CSS izmantotu daudz decimāldaļu.
.nosaukums font-size: ceil ($ title_size * 1.3314);
Pārskats
Sass iezīmes dod mums lielas spējas rakstīt labāku CSS ar mazāku piepūli. Pareiza maisījumu, paplašinājumu, funkciju un mainīgo izmantošana ļaus mūsu stillapām uzturēt labāk, lasāmāk un vieglāk rakstīt.
Ja jūs interesē kāds cits līdzīgs CSS priekšprocessors, es iesaku aplūkot LESS (vai pārbaudiet mūsu iesācēja rokasgrāmatu) - pamatā esošais pamatsumma ir daudz vienāda!
