Sass pentru cei mici - un ghid detaliat. Iată câteva dintre avantajele SCSS. Descărcați și instalați SASS

Salutare tuturor! Cât de repede zboară timpul. Nici nu am observat cum am trecut de la stilurile de scriere de la Css obișnuit la preprocesorul Sass. Dar nu am înțeles înainte - ce fel de Sass este, pentru ce este nevoie, probabil că este pentru profesioniști super avansați în aspect. Da, folosirea preprocesoarelor este un pas înainte nou nivelîn dezvoltarea web, dar nu este nimic înfricoșător sau complicat aici și veți vedea singur citind acest articol până la sfârșit.

Deci, ce este bun la preprocesor și în special la Sass? Voi spune imediat că mai sunt și altele, precum Less, Stylus etc. Toate funcționează după același principiu, dar fiecare are propriile caracteristici. Sass a câștigat o mare popularitate în rândul profesioniștilor, făcând învățarea mult mai ușoară. Doar că, cu cât tehnologia este mai populară, cu atât mai multă comunitateși cu atât mai mult, documentația este extinsă.

Preprocesoarele sunt proiectate pentru a scuti dezvoltatorul de majoritatea sarcini de rutină la scrierea codului, crescând astfel viteza și calitatea muncii. Pe lângă preprocesoarele CSS, există și preprocesoare HTML, de exemplu, Pug (Jade).

Structura articolului

Documentare

Dezvoltatorul Sass este francezul Hugo Giraudel, care locuiește de ceva vreme în Germania. Firește documentația pentru engleză, dar eu personal o înțeleg bine (este important să știu engleza tehnică). Dar există și o traducere în rusă. As recomanda totusi Versiunea în engleză, asta pentru a ne obișnui și a studia engleza din ce în ce mai profund. Dar nici cel rusesc nu este mai rău.

Documentație în limba engleză: http://www.sass-lang.com
Documentație rusă: https://sass-scss.ru

Compilarea Sass la Css

Ca software Pentru a compila Sass în Css, folosesc pluginul Sass task manager. În general, Sass este o aplicație (Gem) a limbajului Ruby. Prin urmare, dacă doriți să faceți fără Gulp, atunci pentru a compila în Css va trebui să instalați platforma de limbaj Programare Ruby. Nu vă voi arăta cum se face acest lucru acum, puteți citi despre asta pe site-ul oficial.

Sintaxă - Sass, Scss

Permiteți-mi să notez imediat că există 2 sintaxe pentru scrierea codului: Sass și Scss.

Sintaxa lui Sass diferă ușor de Scss. Scss arată mai mult ca codul Css obișnuit, iar Sass elimină acoladele și punctele și virgulă dintre reguli. Există, de asemenea, diferențe în ceea ce privește modul în care sunt scrise unele funcții și trebuie să fii atent la ce sintaxă alegi. Extensii de fișiere pentru Sass − *.sass,și pentru Scss - *.scss. Sintaxa Sass este mai veche, iar Scss a venit mai târziu pentru a facilita învățarea începătorilor. Eu însumi am început să studiez acest preprocesor în Scss, era mai ușor de înțeles așa. Acum am trecut la Sass, este mai convenabil pentru mine.

Dacă vorbim despre Sass, atunci structura sa de cod este construită pe baza indentărilor (la urma urmei, nu există acolade în ea) și ar trebui să fii atent aici, deoarece atât un tabulator (TAB - 4 spații) cât și spații obișnuite ( de obicei este un spațiu dublu). Eu folosesc întotdeauna un tabulator.

Ține minte! Dacă utilizați o filă ca indentare, atunci spațiile ar trebui excluse, astfel încât totul să fie la fel. Și invers - dacă utilizați spații, atunci tabulatorul ar trebui exclus. În caz contrar, compilatorul va arunca o eroare.

Sass

.maincontent .main-title font-size: 30px font-weight: 700 margin: 0 0 30px .description margin-bottom: 30px p color: #444444 font-size: 16px line-height: 22px

Scss

.maincontent ( .main-title ( dimensiunea fontului: 30px; greutatea fontului: 700; marginea: 0 0 30px; ) .description ( margin-bottom: 30px; p ( culoare: #444444; dimensiunea fontului: 16px; linie) -înălțime: 22px;

Majoritatea editorilor de cod (de exemplu, Sublime Text) au marcaje de indentare sub formă de dungi, ceea ce ne împiedică să ne confundăm. În exemplele de mai jos voi folosi sintaxa Sass.

Simplifică-ți viața cu Sass

Imbricarea regulilor

Asta mi-a plăcut la Sass încă de la început, a fost tocmai imbricarea regulilor CSS una în alta. Acest lucru economisește mult timp, iar codul este structurat și ușor de citit. De exemplu, dacă vrem să scriem stiluri pentru elemente de un anumit container părinte, atunci trebuie să specificăm clasa părinte în Css de fiecare dată, de exemplu astfel:

.title principal (dimensiunea fontului: 30px; culoare: #444; ) .subtitle principal (dimensiunea fontului: 20px; ) .descrierea .principală (dimensiunea fontului: 14px; marginea inferioară: 30px; )

Adică specificăm clasa părinte.principal peste tot, iar acest lucru, la rândul său, nu este în întregime convenabil. Folosind Sass, îl puteți scrie astfel:

Scss

.main ( .title ( dimensiunea fontului: 30px; culoare: #444; ) .subtitle (dimensiunea fontului: 20px; ) .descriere (dimensiunea fontului: 14px; marginea inferioară: 30px; ) )

Sass

.principal .title dimensiunea fontului: 30px culoare: #444 .subtitle font-size: 20px .description dimensiunea fontului: 14px margin-bottom: 30px

De acord, arată mult mai îngrijit și poți scrie codul mai repede, deoarece scriem class.main părinte o singură dată. Dacă doriți să mă urmăriți fără a instala Ruby și orice software similar, puteți utiliza compilatorul online pentru o demonstrație.

Proprietăți imbricate

În plus față de regulile de cuibărit în Sass, există posibilitatea unor proprietăți de cuibărit. De exemplu, iată cum să scrieți valorile marjelor:

Sass

.main .title margin: sus: 10px dreapta: 15px jos: 10px stânga: 15px

Css

.principal .title ( margine-sus: 10px; margine-dreapta: 15px; margine-jos: 10px; margine-stânga: 15px; )

Selector de legare sau concatenare - & semn

Putem accelera scrierea codului și îl putem face și mai compact utilizând concatenarea (conexiunea) folosind simbolul - & . Cum funcţionează asta? De exemplu, avem clase precum: .main-title, .main-subtitle, .main-description. În Sass, aceste clase pot fi scrise după cum urmează:

Dimensiunea fontului principal &-titlu: 30px Culoare: #444 Dimensiunea fontului &-subtitle: 20px Dimensiunea fontului &-descrierea: 14px margin-bottom: 30px

Titlu principal (dimensiunea fontului: 30px; culoare: #444; ) .subtitrare principală (dimensiunea fontului: 20px; ) .descrierea principală (dimensiunea fontului: 14px; margin-bottom: 30px; )

Folosind un simbol & ne conectăm la clasa rădăcină, adică în în acest caz, nu este nevoie să repeți în continuare root.main . În același timp, rețineți că nu am creat niciun element copil.

/* Link */ a ( culoare: roșu; ) a:hover ( culoare: albastru; ) /* Pseudo-elemente */ .main::before ( conținut: ""; afișare: bloc; dimensiunea fontului: 20px; ) .main ::after (conținut: ""; afișare: bloc; dimensiunea fontului: 30px; )

Uneori trebuie să specificați un lanț de selectori până la elementul curent. Puteți, desigur, să o mutați la rădăcină, dar pentru a nu rupe cuibărirea, o puteți scrie după cum urmează:

.container principal și lățime: 700px

Container.main (lățime: 700px)

Prin mutare & după selector, am schimbat ordinea de andocare, adică class.container în acest caz este părintele.

Legare la selectorul părinte, dar cu un nivel mai sus

Mai sus, ca exemplu, am demonstrat codul Sass:

Dimensiunea fontului principal &-titlu: 30px Culoare: #444 Dimensiunea fontului &-subtitle: 20px Dimensiunea fontului &-descrierea: 14px margin-bottom: 30px

Acum imaginați-vă că în blocul .main-title există un alt element care trebuie să fie stilat în mod explicit folosind întregul lanț de părinți. Multă vreme am specificat pur și simplu numele rădăcinii (în acest caz - .main), dar acest lucru nu este foarte convenabil. Am început să caut documentația Sass și am găsit o soluție. De fapt, totul este simplu - trebuie să declarăm un link către părinte și să îl folosim acolo unde este necesar.

Asa am facut inainte:

Main &-title font-size: 30px color: #444 .main__icon // specificați root.main, în caz contrar, dacă utilizați & se va conecta la .main-title color: #444 width: 20px &-subtitle font-size : 20px & -description font-size: 14px margin-bottom: 30px

Și acum poți face asta:

Principal $self: & // link către părintele &-title font-size: 30px culoare: #444 #($self)__icon // în loc de & utilizați un link către culoarea părinte: #444 width: 20px &-subtitle dimensiunea fontului: 20px și descriere dimensiunea fontului: 14px margin-bottom: 30px

Dacă ați observat, am declarat o referință la părinte - $self: & . Acest lucru îmi amintește puțin de o referință la obiectul (acest lucru) care a declanșat evenimentul în javaScript. Acum, în locul potrivit, îl putem numi pur și simplu #($self) . Se dovedește cât de simplu este totul, dar mă scarpinam în cap și mă gândeam că nu există nicio soluție la această problemă în Sass.

Titlu principal ( dimensiunea fontului: 30px; culoare: #444; ) .titul principal .pictograma__principal (culoare: #444; lățime: 20px; ) .subtitrarea principală (dimensiunea fontului: 20px; ) .descrierea principală ( dimensiunea fontului: 14px; marginea inferioară: 30px)

Șabloane

Se întâmplă adesea ca mai multe elemente să aibă aceeași bază de stil, dar să difere între ele doar prin câteva reguli. Să luăm butoanele de exemplu. Dacă luăm butoane de aceeași dimensiune, atunci aceștia pot diferi unul de celălalt doar prin culoare: roșu, verde, gri etc. Dacă utilizați css pur, atunci va trebui să specificați toate culorile butoanelor în stilurile de bază, separate prin virgule, sau să creați clasa de bază. Dar în Sass este mult mai ușor:

%buton-culoare fundal: #666 chenar: 1px solid #666 padding: 0 20px font-size: 15px line-height: 40px înălțime: 40px .button-green @extend %button background-color: verde chenar-culoare: verde . buton-roșu @extend %button culoare de fundal: roșu culoare-chenar: roșu

Buton-verde, .button-rosu (culoare de fundal: #666; chenar: 1px solid #666; umplutură: 0 20px; dimensiunea fontului: 15px; înălțimea liniei: 40px; înălțimea: 40px; ) .button-verde ( culoarea de fundal: verde; culoarea chenarului: verde;

Șablonul în acest caz este selectorul de buton % (acest lucru este indicat de semnul - %). Acest lucru este convenabil deoarece selectorul de șablon în sine nu este implicat nicăieri, iar stilurile sale sunt moștenite de alți selectori prin directiva - @extinde. Acest șablon poate fi folosit de câte ori se dorește, reducând astfel cantitatea de cod.

SassScript

În Sass, ca și în limbajele de programare, există caracteristici precum: crearea de variabile, operatii aritmetice(adunare, scădere, împărțire, înmulțire etc.), iterații (bucle), funcții (mixine) și multe altele. Adică, Sass este un fel de limbaj de programare, care este din nou conceput pentru a simplifica scrierea codului și pentru a accelera semnificativ munca.

Variabile

O variabilă în Sass începe cu un semn $ , iar numele este scris în latină, de exemplu: $culoare . Trebuie remarcat faptul că semnele: „ — " Și " _ » sunt interschimbabile. De exemplu, dacă ați apelat $color-red , puteți apela și $color_red . Variabila este definită după cum urmează: $nume: valoare, de exemplu: $culoare: #f6f6f6 .

O variabilă declarată în afara oricăror niveluri de imbricare este disponibilă la nivel global, de exemplu. poate fi folosit peste tot. Dacă definiți o variabilă la orice nivel de imbricare al selectorului, atunci aceasta va fi disponibilă numai la acest nivel. Pentru ca acesta să funcționeze la nivel global în tot documentul, trebuie să specificați un cuvânt cheie !global.

Titlu $font-size: 10px !global font-size: $font-size .subtitle font-size: $font-size

În general, variabilele sunt un lucru minunat, trebuie doar să le declarați și să introduceți o valoare, iar apoi le puteți folosi cât doriți, oriunde. De exemplu, putem defini culorile dându-le nume specifice, dimensiunea fontului, familia de fonturi etc. și orice semnificații în general.

Directive

@extinde

Am atins această directivă mai sus când am studiat șablonul gol. Să ne consolidăm din nou cunoștințele. Prin utilizarea @extinde putem copia regulile oricărui selector. De exemplu, în timpul aspectului este posibil ca elementul „ O"și elementul" B» poate fi asemănător în aspect. În acest caz, puteți scrie reguli pentru elementul „A”, iar pentru „B” puteți copia pur și simplu stilurile elementului „A”, redefinind ușor proprietățile necesare.

Block_a culoare de fundal: #cccccc chenar: 5px solid #999999 padding: 20px font-size: 30px înălțime: 150px lățime: 150px .block_b @extend .block_a padding: 15px

Block_a, .block_b (culoare fundal: #cccccc; chenar: 5px solid #999999; umplutură: 20px; dimensiunea fontului: 30px; înălțime: 150px; lățime: 150px; ) .block_b (padding: 15px; )

ÎN în acest exemplu am facut 2 patrate identice. Pentru pătratul „B” am redefinit doar căptușeală: 15px. Așa funcționează @extend. Folosesc această directivă destul de des.

@import

Această directivă vă permite să combinați mai multe fișiere de stil într-unul singur. Acest lucru este foarte convenabil, mai ales dacă proiectul este mare. A nu se confunda cu directiva care există în Css - @import. În Css, atributul necesar este − url().

De fapt, este mai convenabil să scrieți stiluri fișiere diferiteși fiecare are propriul său scop. De exemplu, întregul cadru al paginii poate fi împărțit în regiuni: header.sass, sidebar.sass, footer.sass. Puteți colecta totul din fișierul principal main.sass folosind @import. Fișierele de regiune pot fi, de asemenea, specificate folosind un caracter de subliniere la începutul numelui fișierului, de exemplu: _header.sass, _sidebar.sass, _footer.sass. Astfel de fișiere se numesc fragmente. Când importați fragmente, nu este necesar să specificați extensia fișierului.

Import simplu

@import "header.sass" @import "sidebar.sass" @import "footer.sass"

Importul fragmentelor

@import „antet” @import „bară laterală” @import „subsol”

Fișierele fragmente pot avea următoarele extensii: *.imbrutis, *.scss sau *.css. De exemplu, fișierul principal ar putea avea extensia *.imbrutis, și antetul site-ului, de exemplu, cu extensia *.scss. Adică, nu contează ce extensie are fișierul principal. Trebuie remarcat faptul că la import, toate variabilele și mixurile (vom vorbi despre ele mai jos) sunt transferate în fișierul principal în care are loc importul.

De asemenea, puteți specifica importul mai multor fișiere separate prin virgule: @import „header”, „sidebar”, „footer”.

Rețineți că importul are loc în locul în care ați specificat directiva @import. Acest lucru se face de obicei la începutul documentului.

@la-rădăcină

Directivă @la-rădăcină vorbește de la sine și dacă este tradus în rusă, va suna așa - „de la rădăcină”. Cu alte cuvinte, mutăm selectorul la rădăcină, anulând lanțul de selectori părinte. Aici, desigur, puteți pune întrebarea: „De ce este necesară această directivă dacă puteți muta manual selectorul la rădăcină?” Răspunsul este simplu - comoditatea de a scrie cod fără a rupe structura. Când înveți să lucrezi cu Sass la maximum, vei înțelege acest lucru.

Dimensiunea fontului principal &-titlu: 30px culoare: #444 @at-root .main__icon color: #444 lățime: 20px

Titlu principal (dimensiunea fontului: 30px; culoare: #444; ) .main__icon (culoare: #444; lățime: 20px; )

Directive și expresii de control

directiva @if

Această directivă execută stiluri dacă expresia inclusă în ea returnează orice valoare, cu excepția falsŞi nul.

$culoare: verde .header @if $culoare == culoare de fundal verde: verde @else if $culoare == culoare de fundal albastru: albastru @else culoare de fundal: #f6f6f6

Antet (culoare de fundal: verde; )

Cei care sunt familiarizați cu cel puțin elementele de bază ale unui limbaj de programare (de exemplu, javaScript sau Php) nu le va fi greu de înțeles. Esența aici este aceeași, principalul lucru este să cunoașteți sintaxa de scriere a codului.

@pentru directivă

Într-un limbaj de programare (din nou în Javascript sau Php) folosind Pentru poți seta un ciclu. În Sass, această directivă face același lucru - creează o buclă. Pentru fiecare iterație (repetiție), este utilizată o variabilă contor care modifică datele de ieșire.

Directiva are 2 forme de scriere: 1. @for $var from<начало>prin<конец>și 2. @pentru $var de la<начало>la<конец>. Dacă doriți ca ultima cifră să fie inclusă în buclă, atunci utilizați „ prin". Să ne uităm la un exemplu:

@for $i de la 1 la 6 .elem-item-#($i) background-image: url("images/image-#($i).jpg")

Element-elem-1 ( imagine de fundal: url("imagini/imagine-1.jpg"); ) .elem-item-2 ( imagine de fundal: url("imagini/imagine-2.jpg"); ) . elem-item-3 ( imagine de fundal: url("imagini/imagine-3.jpg"); ) .elem-item-4 ( imagine de fundal: url("imagini/imagine-4.jpg"); ) . elem-item-5 ( imagine de fundal: url("imagini/imagine-5.jpg"); )

Pentru a indica valoarea finală Am folosit cuvântul cheie " la". În această situație, ciclul se termină la numărul - 5 . Observați cât de compact arată codul Sass.

@fiecare directivă

Directivă @fiecare la fel ca @for, afișează valorile într-o buclă și este convenabil deoarece, pe lângă numere, puteți itera peste anumite valori. Să luăm bucla de mai sus și să o schimbăm cu niște valori.

@each $bgItem în animal, lac, mare, peisaj, natură .elem-item-#($bgItem) background-image: url("images/image-#($bgItem).jpg")

Elem-item-animal ( imagine de fundal: url("imagini/imagine-animal.jpg"); ) .elem-item-lake ( imagine de fundal: url("imagini/imagine-lac.jpg"); ) . elem-item-sea ( imagine de fundal: url("imagine/image-sea.jpg"); ) .elem-item-landscape ( imagine de fundal: url("imagini/image-landscape.jpg"); ) . elem-item-nature ( imagine de fundal: url("imagini/imagine-nature.jpg"); )

În acest caz, o variabilă contor nu este creată, iar numărul de iterații depinde de numărul de valori create după cuvânt cheie « în". Valorile sunt transmise printr-o variabilă (în acest exemplu - $bgItem), al cărei nume poate fi arbitrar.

Mixine (funcții)

Mixin-urile (mixin-urile) sunt un fel de funcție, ca într-un limbaj de programare, care este conceput pentru a scăpa de codul repetitiv. Mixin-urile pot conține fragmente întregi de stil, care sunt permise în Sass. Să ne uităm la un exemplu pentru o mai mare claritate.

@mixin align-center poziție: absolut sus: 50% stânga: 50% transform: translate(-50%, -50%) .container @include align-center

Un mixin este creat cu directiva @mixin, urmată de numele mixin-ului, precum și parametrii trecuți opțional, despărțiți de un spațiu. Permiteți-mi să notez imediat că cratima (-) și caracterele de subliniere (_) din numele mixului sunt interschimbabile. Un mixin poate conține nu numai reguli, ci și selectori. Mai sus am dat un exemplu de mixin elementar fără parametri.

Mixin-ul este apelat cu directiva @include și apoi, separat de un spațiu, indicăm numele mixin-ului creat. În exemplul de mai sus, aceasta este centrarea blocului de-a lungul axei X și a axei Y folosind poziționarea absolută. Dacă trebuie să utilizați acest lucru des, atunci veți fi de acord că este mai ușor să apelați un mixin decât să scrieți stiluri de centrare din nou și din nou.

Acum să ne uităm la un mixin cu parametri (argumente).

@mixin border($width, $color) border: width: $width stil: culoare solidă: $culoare .square @include border(2px, #ccc)

Pătrat (lățime chenar: 2px; stil chenar: solid; culoare chenar: #ccc; )

După cum puteți vedea, după numele mixin-ului din paranteză precizăm argumentele, în acest caz lățimea și culoarea chenarului. Acesta este cel mai simplu mix pe care l-am oferit pentru claritate. În practică, puteți găsi mixine mai complexe folosind diverse conditiiși variabile. Dar să nu complicăm totul acum, ar trebui să începem întotdeauna cu ceva mic și simplu și apoi să mergem în sus pe măsură ce ne îndreptăm.

Cu asta vreau să-mi completez scurtă recenzie Preprocesor Sass. De ce mic? Da, pentru că asta nu este tot ce ți-am spus. În general, folosind cele de mai sus, puteți începe în siguranță să utilizați Sass în loc de Css acum. Puteți afla mai multe despre Sass, referindu-vă la documentația pe care am furnizat-o mai sus.

Ei bine, vă mulțumesc tuturor pentru atenție! Ca de fiecare dată, pune întrebări în comentarii și abonează-te fie la canalul telegram, fie la newsletter-ul de e-mail (formular din bara laterală din dreapta) pentru a nu pierde nimic interesant.

Ne vedem în celelalte postări ale mele...

Dacă ați vrut să treceți de la CSS la Sass, dar întrebarea este „Cum să compilați fișierele Sass în CSS brut?”, atunci există multe metode pentru care, iar acum vă voi spune despre cele mai simple dintre ele - programul Koala .

Acesta este un program multiplatform pentru compilarea Less, Sass, Compass și CoffeeScript. Funcționează pe Win, Mac OS și Linux.

Programul este gratuit și se bazează pe donații generoase. Cu toate acestea, când am încercat să transfer câțiva bănuți băieților de pe Paypal acum câțiva ani, nu a ieșit. Comercianții cu amănuntul sunt localizați în China, iar Paypal acolo funcționează doar pentru a trimite bani. Prote, programul nu a devenit mai rău. Să ne uităm la raport.

Avantaje

Suport pentru multe limbi: Koala funcționează cu Less, Sass (*.scss), CoffeeScript și framework-ul Compass. În plus, poate compila CSS și JS nativ care nu sunt asociate cu un preprocesor.
Compilare în ora realaі : Koala detectează modificările fișierelor și le compilează automat. Toate acțiunile sunt efectuate în fundal și nu necesită livrare de la comerciant.
Compilare ajustată: Puteți specifica diferite compilatoare pentru fișierul skin. Cu toate acestea, este puțin probabil să aveți nevoie de el.
Comprimare: Koala poate comprima automat codul după compilare. Această funcție nu poate fi ignorată.
Un memento despre amendamente: Dacă programul a făcut modificări în cod în timpul compilării, va afișa o notificare. Nu există scuze, trebuie doar să reîncărcați fișierul rezultat.
Multiplatformă: Koala rulează pe Windows, Mac și Linux.

Interfață

Practic, programul poate localiza toate proiectele active (în stânga) și principalele elemente de management. După cum puteți vedea, interfața este minimalistă, puteți începe cu una nouă în câteva minute.

Principalele elemente de control sunt întotdeauna la vedere. Axă pentru ce miros este nevoie:

Când schimbați tipurile de fișiere din lista principală, numai fișierele de tipul selectat se vor pierde.

Configurarea Sass și LESS

Ascultătorii au primit discursuri. Să luăm fila Setări Sass:

În două clicuri, Koala vă va salva fișierele Sass din nou în CSS, nu vor fi necesare pluginuri suplimentare pentru Sass.

Koala poate adăuga automat prefixe între browsere pentru autoritățile CSS, salvând comentariile. Pentru tipul de fișier CSS, recomand întotdeauna să alegeți comprimat, astfel încât intrarea să fie minimă, iar pentru ușurința dezvoltării, dezactivați hărțile sursă.

Prefixe automate - aceasta este adăugarea automată a prefixelor pentru a sprijini puterea CSS3 în browserele versiunilor mai vechi.

De exemplu, pentru a rotunji marginile cu 3 pixeli, va trebui să scrieți:

Chenar-rază: 3px;

...și după ce lucrați cu autoprefixul eliminați:

Webkit-border-radius: 3px; -moz-border-radius: 3px; chenar-rază: 3px;

În plus, setările pentru fiecare tip de fișier sunt disponibile în panoul din dreapta. Pentru a face acest lucru, selectați un fișier din listă și în partea dreaptă veți vedea setările pentru fișierele de acest tip.

Înainte de a vorbi, cu versiunea 4 a Bootstrap și LESS pe Sass, acesta este un moment bun pentru a începe să învățați.

Ajustarea JavaScript și CoffeeScript

Pentru JS există doar două setări:

Comprimare - porniți-l mai întâi pentru a elimina fișierul js prin strângerea acestuia.
Păstrați comentariile privind drepturile de autor

Pentru CoffeeScript, în 99% din cazuri vei șterge setările din culise, așa că nu are sens să te plângi de ele.

Descarcă

Descărcați programul din offsite-ul comerciantului - koala-app.com. Există și mesaje pentru Linux, Mac, Ubuntu.

În pungă

Pe scurt, pot numi Koala cea mai simplă și corectă soluție pentru un consumator care nu are nevoie de setări și funcții complexe. Dacă aveți nevoie de o interfață grafică care să funcționeze, compilând doar Sass / Less / CSS și nu trebuie să căutați în linia de comandă, atunci Koala este alegerea dvs.

Am scris deja despre cei care sunt așa și despre cum le vor face viața mai ușoară tâlharilor. Recomand să vă familiarizați cu el, este foarte ușor.

Koala este bun pentru dezvoltatorii începători sau pentru cei care lucrează la un proiect mic și nu doresc să irosească o nouă versiune a Gulp sau Grunt.js.

Faceți clic pe „Like” pentru a ne urmări pe Facebook

Sass este o extensie CSS care adaugă reguli imbricate, variabile, mixuri, funcții și multe altele. Folosirea acestuia ușurează sarcina de a crea CSS. După procesarea codului Sass, obțineți codul CSS formatat corespunzător.

Compass este un cadru CSS open-source cod sursă, permițându-vă să utilizați CSS3 și modele de design populare. Compass funcționează exclusiv cu Sass, care vă ajută să scrieți cod CSS mai curat și mai rapid.

Acest articol oferă o selecție instrumente utile pentru a lucra cu Sass și Compass, care vă vor ajuta să creați aplicații web dinamice rapid și ușor.

1.Aplicația.busolă

Compass este un cadru care facilitează crearea și menținerea stilurilor și a marcajului. Folosind Compass veți genera stiluri în Sass în loc de CSS obișnuit. Compass.app este o aplicație pentru bara de meniu care funcționează numai cu Sass și Compass.

Utilizarea sa le permite designerilor să compileze stiluri foarte ușor, fără a utiliza interfața de linie de comandă. Compass.app este scris în Java ( JRuby) și funcționează pe Mac, Linux și PC. Pentru a-l folosi, nu este nevoie să instalați mediul Ruby.

2. Cercetaș

Scout este o aplicație multiplatformă care rulează Sass și Compass printr-un cadru Ruby încorporat, facilitând gestionarea tuturor proiectelor dvs. Sass. Acum nu trebuie să vă faceți griji cu privire la instalarea Ruby sau pentru a vă ocupa de alte probleme tehnice.

3. Kit de coduri

Codekit este un compilator puternic care procesează automat fișierele Sass, Compass, Less, Stylus, Jade, Haml, Slim, CoffeeScript și Javascript la salvare.

Folosind reîmprospătarea interactivă a browserului, optimizarea imaginii și depanarea rapidă, Compass și Sass sunt incredibil de ușor de utilizat. Această aplicație acceptă, de asemenea, posibilitatea de a lucra colectiv/echipă pe un proiect și ajută la reducerea timpului de încărcare a resurselor prin combinarea și minimizarea fișierelor.

4. Arhetip

Archteype este un cadru Compass/Sass pentru crearea de șabloane personalizabile, interoperabile și componente de interfață. Archteype vine cu o documentație extinsă și folosește sintaxa originală a limbajului de programare.

5. Susy

Susy oferă utilizatorilor grile adaptive pentru Compass. Umplând astfel golul rămas după ce grilele au fost îndepărtate din Compass. Puteți adăuga rapid pentru noi aspecte puncte de control interogări media sau setați propriile parametri folosind matricea grilă Susy. Acest instrument vă permite să creați un site web mic sau o bibliotecă scalabilă de grile pentru utilizare în proiecte mari în câteva minute.

6. Sassway

Sass Way oferă o privire de ansamblu cele mai recente știriși evoluții în dezvoltarea CSS cu Sass și Compass. Resursa publică articole, resurse descărcabile și mijloace didactice, care va fi util atât pentru începători, cât și pentru utilizatorii avansați.

7. Sassaparilla

Sassaparilla vă permite să lansați proiecte web responsive mult mai rapid folosind Sass și Compass. Instrumentul este conceput în primul rând pentru a lucra cu machete verticale.

Vă permite să specificați dimensiunile elementelor în pixeli, iar în momentul compilării acestea sunt traduse în Em, eliminând nevoia proiectanților de a efectua calcule matematice complexe. Sassaparilla acceptă variabilele utilizate de Sass, de exemplu pentru a defini culoarea sau alți parametri.

8.LivingStyleGuide

LivingStyleGuide Gem este un instrument conceput pentru a facilita crearea de ghiduri de stil pentru Sass și Compass. Pentru a crea un ghid de stil, pur și simplu adăugați comentariile dvs. la Sass într-unul dintre formatele Markdown.

9. Pondasee

Instrumentul Pondasee a fost conceput pentru a accelera procesul de creare a aplicațiilor web. Are toate caracteristicile și funcționalitățile SCSS și Compass și este proiectat pentru a facilita crearea șablonului.

10. LiveReload

LiveReload este încorporat în bara de meniu și monitorizează toate modificările aduse sistemului de fișiere. De îndată ce salvați fișierul, acesta este procesat conform parametrilor specificați și fereastra browserului este reîmprospătată. LiveReload funcționează cu motoarele SASS, Compass, LESS, Stylus, CoffeeScript, IcedCoffeeScript, Eco, SLIM, HAML și Jade. Poate fi configurat cu doar două casete de selectare, astfel încât să nu vă răniți mintea un număr mare opțiuni.

11. Koala

Koala este o aplicație GUI pentru compilarea CoffeeScript, Compass, Less și Sass, care face procesul dvs. de dezvoltare web design mai eficient. Aplicația rulează pe Mac, Linux și Windows și include caracteristici precum compilarea în timp real, suport pentru mai multe limbaje de programare și multe altele.

12. Bootstrap Sass

Bootstrap-Sass este o versiune Sass a Bootstrap care este ideală pentru dezvoltarea aplicațiilor Sass. Instrumentul poate fi instalat numai cu șine, busolă sau Sass.

13. Forja

Forge este un set gratuit de instrumente de linie de comandă. Este conceput pentru a fi descărcat și dezvoltat în mediul adecvat Teme WordPress folosind limbaje de programare precum Sass, LESS și CoffeeScript.

Forge creează un folder sursă structurat cu o ierarhie clară și simplă ( fișiere șablon de bază, fișiere SCSS și opțiuni de temă). Când se fac modificări în timpul dezvoltării, folderul sursă este compilat automat local sistem instalat WordPress.

14.Prepros

Prepros este o aplicație concepută pentru a ușura compilarea codului. Compilează codul Sass, Scss, Compass, Less, Jade, Haml și CoffeeScript în timp real, cu actualizare automată fereastra browserului. Aplicația nu are dependențe și are caracteristici precum un server HTTP încorporat, urmărirea fișierelor fundal, notificări de eroare și includere interactivă CSS.

Buna ziua! Astăzi încep o serie de articole despre preprocesoarele CSS. Și aș dori să încep cu o revizuire a programului Koala, care ajută la compilarea codului de la LESS sau SASS la CSS.

Koala este un program multiplatform pentru compilarea Less, Sass, Compass și CoffeeScript. Funcționează pe Win, Mac OS și Linux.

Programul este gratuit și se bazează pe donații caritabile. Cu toate acestea, când am încercat să transfer niște bani băieților în urmă cu câțiva ani, nu a ieșit. Dezvoltatorii sunt localizați în China, iar Paypal funcționează acolo doar pentru a trimite bani. Cu toate acestea, acest lucru nu a înrăutățit programul. Să aruncăm o privire mai atentă.

Avantaje

Suport în mai multe limbi: Koala funcționează cu Less, Sass (*.scss), CoffeeScript și cadrul Compass. În plus, poate compila CSS și JS obișnuite care nu sunt asociate cu preprocesoare.
Compilare în timp real: Koala monitorizează modificările fișierelor și le compilează automat. Toate acțiunile au loc în fundal și nu necesită intervenția dezvoltatorului.
Setări de compilare: puteți specifica compilatoare diferite pentru fiecare fișier selectat. Cu toate acestea, este puțin probabil să aveți nevoie de acest lucru.
Comprimare: Koala poate comprima automat codul după compilare. Această funcție poate fi omisă dacă se dorește.
Mesaje de eroare: Dacă programul întâmpină o eroare în cod în timpul compilării, va afișa o notificare. Dacă nu există erori, fișierul rezultat va fi pur și simplu recreat.
Multiplatformă: Koala rulează pe Windows, Mac și Linux.

Interfață

Fereastra principală a programului conține toate proiectele active (în stânga) și controalele principale. După cum puteți vedea, interfața este minimalistă, vă puteți da seama în câteva minute.

Principalele comenzi sunt întotdeauna vizibile. Iată pentru ce sunt acestea:

Când schimbați tipurile de fișiere din lista generală, vor rămâne doar fișierele de tipul selectat.

Setări SASS și LESS

Sunt câteva lucruri frumoase în setări. Să luăm fila Setări Sass:

În două clicuri, Koala va începe să vă salveze fișierele Sass în CSS, nu va trebui să instalați niciun plugin Sass suplimentar.

Koala poate adăuga automat prefixe între browsere pentru proprietățile CSS și poate salva comentarii. În tipul de fișier CSS, recomand întotdeauna să alegeți comprimat, astfel încât greutatea acestuia va fi minimă, iar pentru ușurința dezvoltării, lăsând Hărți sursă activate.

Autoprefixele sunt adăugare automată prefixe pentru a accepta proprietățile CSS3 în browserele vechi.

De exemplu, pentru a rotunji colțurile cu 3 pixeli, va trebui doar să scrieți:

Chenar-rază: 3px;

... și după ce funcționează autoprefixul, veți obține:

Webkit-border-radius: 3px; -moz-border-radius: 3px; chenar-rază: 3px;

În plus, setările pentru fiecare tip de fișier sunt disponibile în panoul din dreapta. Pentru a face acest lucru, selectați un fișier din listă și setările pentru fișierele de acest tip se vor deschide în partea dreaptă.

Setări JavaScript și CoffeeScript

Pentru JS există doar două setări:

Comprimare - activați întotdeauna astfel încât fișierul js rezultat să fie comprimat.
Păstrați comentariile privind drepturile de autor

Pentru CoffeeScript, în 99% din cazuri vei părăsi setările implicite, așa că nu are rost să te oprești acolo.

Unde se descarcă

Descărcați programul de pe site-ul oficial al dezvoltatorilor - koala-app.com. Există link-uri separate pentru Linux, Mac, Ubuntu.

În cele din urmă

Drept urmare, pot numi Koala cea mai simplă și mai corectă soluție pentru un dezvoltator care nu are nevoie de setări și funcții complexe. Dacă aveți nevoie de o interfață grafică pentru munca dvs., compilați numai Sass/Less/CSS și nu doriți să cercetați linie de comandă, atunci Koala este alegerea ta.

Koala este bun pentru dezvoltatorii începători sau cei care fac un proiect mic și nu doresc să se implementeze versiunea completă Gulp sau Grunt.js.

24 martie 2012 la 13:22

SCSS - puțină practică, partea I

Există deja o mulțime de articole despre SASS (SCSS), Less on Habrahabr, dar în opinia mea nu există suficient unul care să conțină puțină practică reală. Voi încerca să umplu acest gol. Cu aproximativ un an în urmă, unul dintre articolele SASS m-a „prins” și de atunci mi-a plăcut atât de mult această tehnologie, încât introducerea manuală a codului CSS obișnuit mi se pare o pierdere de timp. Acest articol este dedicat acelor designeri de layout (sau programatori web) care nu au auzit încă de SCSS sau nu l-au încercat încă în practică. Tovarășii mai experimentați, cred, nu au ce să prindă în asta.

Ce este SCSS

SCSS este un „dialect” al limbajului SASS. Ce este SASS? SASS este un limbaj similar cu HAML (un motor de șablon foarte concis), dar conceput pentru a simplifica crearea codului CSS. Pur și simplu, SASS este un limbaj al cărui cod este tradus în cod CSS obișnuit printr-un program special Ruby. Sintaxa acestui limbaj este foarte flexibilă, ia în considerare multe dintre lucrurile mărunte care sunt atât de dorite în CSS. Mai mult, are chiar și logică (@dacă,), matematică (puteți adăuga numere, șiruri și culori). Poate că unele caracteristici SCSS ți se vor părea redundante, dar, în opinia mea, nu vor fi de prisos, vor rămâne „în rezervă”.

Diferența dintre SCSS și SASS este că SCSS este mai asemănător cu codul CSS obișnuit. Exemplu de cod SASS:

$blue: #3bbfce $margin: 16px .content-navigation border-color: $blue color: darken($blue, 9%) .border padding: $margin / 2 margin: $margin / 2 border-color: $blue
Și același lucru pe SCSS:

$albastru: #3bbfce; $marja: 16px; .conținut-navigație ( chenar-culoare: $albastru; culoare: întunecat ($albastru, 9%); ) .border (padding: $margin / 2; margine: $margin / 2; chenar-culoare: $albastru; )
Am ales SCSS pentru că este mai ușor de înțeles pentru colegii care încă nu sunt familiarizați cu el. De asemenea, ar fi de remarcat faptul că codul CSS obișnuit se potrivește bine în sintaxa SCSS.

Instalare și utilizare

Mai întâi trebuie să instalați ruby. Apoi trebuie să instalați sass-gem (gem install sass în consolă). Dacă totul a decurs fără probleme, atunci programul Sass console vă este acum disponibil. Puteți citi despre toate nuanțele utilizării sale aici - sass --help. Voi vorbi doar despre două caracteristici de bază:

--ceas

Dacă rulați sass cu comutatorul --watch, programul va monitoriza fișierele pe care le specificați. Dacă se schimbă, va reconstrui automat toate fișierele css necesare (nu toate, ci doar cele asociate cu cele modificate).

Să presupunem că aveți următoarea structură de proiect:

Css ---- scss ------ style.scss ---- style.css
Este necesar ca sass să urmărească toate modificările în css/scss/* și să salveze rezultatul în css/*.css . În acest caz, rulați sass astfel: sass --watch css/scss:css/. . Aceste. sass --watch [ce]:[unde] .

--actualizare

Dacă trebuie să actualizați fișierele CSS o dată, atunci utilizați --update în loc de --watch. Nu va exista supraveghere, precum și verificări pentru necesitatea actualizării.

Este de remarcat faptul că, spre deosebire de Less, SASS nu știe cum să-și compila codul direct în browser. După părerea mea, această abordare (compilare pe un server sau un designer de layout pentru PC) este singura corectă.

Practica

Așadar, ajungem la cel mai important lucru. Să începem cu @import .

@import

Inițial, înainte de a folosi SCSS, tot codul CSS al motorului, cu care trebuia să lucrez la serviciu, era localizat într-un fișier uriaș style.css. IDE-ul meu (Netbeans (apropo, aici este un plugin pentru evidențierea sintaxei)) a funcționat cu el cu încetiniri semnificative. Nimeni nu a vrut să-l împartă în multe fișiere mai mici și, dacă este necesar, să le îmbine în 1. SCSS tratează automat această problemă.

Merită remarcat 1 nuanță. Dacă alimentați sass nu cu un fișier sursă specific, ci cu un director, atunci fișiere css nu va fi generat pentru fișierele care încep cu _ . Aceste. prezența unui fișier style.scss va avea ca rezultat crearea unui fișier style.css , dar prezența unui fișier _some.scss nu.

Deci, pentru a include conținutul fișierului _template.scss sau template.scss scriem

@import „șablon”; // șabloane
În cele din urmă, în loc de 1 fișier style.css mare, am ajuns să am mai mult de o sută de fișiere scss mici. La prima vedere, poate părea că această sumă este prea mare și va duce la un chin teribil. Cu toate acestea, găsesc fișierul de care am nevoie imediat pe baza structurii de directoare convenabile. În plus, cred că datorită stocării în cache, această „schemă” este mai performantă.

@cuibări

Una dintre cele mai dorite caracteristici pentru CSS este imbricarea selectoarelor. Exemplu:

#unii ( chenar: 1px roșu continuu; .unii ( fundal: alb; ) ) /* => */ #unii ( chenar: 1px roșu continuu; ) #unii .unii ( fundal: alb; )
Un alt exemplu:

Intrare ( chenar: 1px gri solid; fundal: alb; & ( culoare: negru; ) &.some_class ( display: none; ) ) ) /* => */ input ( chenar: 1px solid gri; fundal: alb; ) input ( culoare: negru ) input.some_class ( display: none; )
Caracterul & este echivalent cu selectorul părinte. Să spunem eticheta avem clasa ie_7 , in cazul in care avem ca browser Internet Explorer 7. Următorul cod vă permite să scăpați de toate „hack-urile” și comentariile speciale:

$IE_7: "body.ie_7"; //... .some ( afișare: inline-block; #($IE_7) & ( zoom: 1; display: inline; ) ) /* => */ .some ( display: inline-block; ) body.ie_7 .unele (zoom: 1; afișare: inline; )

$variabile

Variabilele sunt un lucru la îndemână. Ele sunt definite astfel:

$unii:rosu;
Variabilele nu sunt constante, pot fi modificate pe măsură ce codul progresează :) Unul dintre primele mele gânduri a rezultat în fișierul _const.scss, care conține totul culorile de bază, dimensiunile fonturilor etc.

$link: #15157d; $link_bottom: $link; $input_font_size: 13px; $content_bg: #F1F1F1; $input_color: #4E4D4D; $input_color_placeholder: #959595; $text_color: negru; ...
Se presupune că culoarea linkurilor de pe site este $link .

A ( culoare: $link; ) span.link ( culoare: $link; text-decor: subliniere; )
Dacă mai târziu se dovedește că culoarea legăturilor s-a schimbat, este suficient să schimbați 1 variabilă (în cazul CSS, ar trebui să înlocuiți automat fișierele, poate chiar selectiv). Să presupunem că, brusc, se dovedește că în unele module de contacte, culoarea legăturilor este diferită. Există cel puțin două soluții.

$contacts_link: portocaliu; // codul modulului folosind $contacts_link în loc de $link
Doilea

$__link: $link; $link: portocaliu; // cod modul $link: $__link;
Variabilele noastre nu sunt tastate, deci pot conține la fel de bine șiruri, numere și culori.

@matematică

Să împărțim matematica în 2 categorii - culori și numere. Să începem cu cifrele. Exemplu simplu:

Bloc ( $block_width: 500px; umplutură: 5px; chenar: 1px negru solid; lățime: $block_width - (5px * 2) - (1px * 2); )
Dacă doriți, puteți seta și umplutura cu chenar folosind variabile. Totul depinde de complexitatea aspectului.

Un alt exemplu:

Bloc ( $număr: 10; $margin_left: 5px; $all_width: 1000px; lățime: $all_width; .sub_element ( lățime: ($all_width / $count) - $margin_left; margin: 0 0 0 $margin_left; ) )
Aș dori să notez că acest gen manipulările sunt folosite foarte des. Fără ele sunt ca și fără picioare.

Și acum culorile. Culorile pot fi adăugate și multiplicate:

Unele ( $culoare: #010203; culoare: $culoare; chenar-culoare: $culoare - #010101; &:hover (culoare: #010203 * 2; ) ) /* => */ .unele (culoare: #010203; border-color: #000102 .some:hover (culoare: #020406; )
Un lucru destul de la îndemână atunci când ești prea leneș să alegi culori. Sunt disponibile și funcții precum opacify și transparentize (mai mult