Plasarea serverelor în centre de date fiabile din Europa. Deschideți serverul VPS / VDS bazat pe cloud pe SSD-uri rapide în 1 minut!
Cel mai bun Gazduire:
- protejează datele de accesul nedorit într-un centru de date european protejat
- va accepta plata cel puțin în taxe.
- vă va permite să vă distribuiți distribuția
- protecția împotriva atacurilor DDos
- copie de rezervă gratuită
- Uptime 99.9999%
- Centrul de date - TIER III
- furnizor - TIER I
Sprijinim în limba rusă 24/7/365 Lucrăm cu persoane juridice și persoane fizice. Acum aveți nevoie de 24 nuclee și 72 GB de memorie RAM. Vă rog!
Tarifele noastre avantajoase vor dovedi că nu ați știut încă ieftinul de găzduire!
Minute: selectați configurația, plătiți și CMS de pe VPS este gata.
Banii înapoi - 30 de zile!
Carduri bancare, e-valută, prin intermediul terminalelor Qiwi, Webmoney, PayPal, Novoplat etc.
Puneți o întrebare la sprijinul 24/7/365
Găsiți răspunsuri în baza noastră de date și cunoașteți recomandările
Ofertă de la 8host.com
Sass este un preprocesor CSS care accelerează și simplifică foarte mult procesul de creare a unei foi de stil în comparație cu utilizarea CSS-ului convențional. Componentele dinamice ale Sass vă permit să reduceți codul și să îl faceți mai versatil. Sintaxa Sass este similară cu sintaxa CSS ușor îmbunătățită.
Acest ghid va arăta cum să instalați și să rulați Sass pe Ubuntu VPS. Pentru a rula ghidul, trebuie să aveți un server Ubuntu preconfigurat (și un server web dacă aveți nevoie de un browser).
Rețineți că Sass poate fi instalat pe Windows și pe OS X.
Pentru instrucțiuni despre inițializarea serverului, consultați acest articol.
Instalarea Sass
Pentru a instala Sass, trebuie să instalați mai întâi Ruby. În plus, trebuie să instalați rubygems (sistem de management al pachetelor Ruby). Pentru aceasta, utilizați următoarele comenzi:
sudo apt-get update
sudo apt-get instala rubygems ruby-full
Acum folosiți comanda bijuterie pentru a instala Sass:
sudo gem instala sass
Gata! Proprocesorul Sass este instalat, puteți începe să lucrați cu acesta.
Folosind Sass
Deci, creați o foaie de stil de testare. Mergeți în directorul rădăcină al serverului web (în Apache acesta este / var / www) și creați un fișier stil.scss în el:
cd / var / www
nano style.scss
În acest fișier, introduceți regula css:
caseta de umplere: 20 pixeli;
fundal-culoare: roșu;
>
După cum puteți vedea, acesta este css de bază. Salvați și închideți fișierul. Acum Sass ar trebui să traducă acest fișier în formatul css obișnuit (cu extensia .css):
sass - vizionează stil.scss: style.css
Cu această comandă, Sass va genera un fișier .css și va verifica dacă există modificări ale fișierului .scss. Când faceți modificări în fișierul .scss, fișierul .css va fi actualizat automat.
Prima dată când executați comanda, primiți o eroare:
[Alertă ascultă]:
Lipsa dependenței "rb-inotify" (versiunea "
> 0,9 ')!
Rulați următoarele pentru a satisface dependența:
gem install --version '
> 0,9 'rb-inotify
Pentru ao rezolva, după instalarea dependenței, executați comanda:
gem install --version '
> 0,9 'rb-inotify
Când lucrați cu mai multe fișiere Sass, executați comanda -watch pentru a compila un întreg fișier .scss:
sass - vizionează stiluri / sass: stylesheets / css
Această comandă îi spune lui Sass să urmărească toate fișierele .scss din dosarul stiluri / sass, să le compileze automat și să le convertească la echivalentele din folderul stylesheets / cs. După ce ați pornit această comandă, Sass va rămâne în modul ceas, până când este dezactivat.
Pentru a dezactiva modul de așteptare, apăsați Ctrl + C. După aceasta, toate modificările aduse fișierelor .scss se vor opri automat la fișierele .css până când se va executa următoarea comandă de vizionare.
Deci, totul este destul de simplu: trebuie doar să adăugați regulile css la un fișier, iar conținutul său va fi copiat într-un alt fișier. Dar nu sunt toate funcțiile Sass.
Atașamente (hrănire)
Folosirea atașamentelor este o modalitate excelentă de a economisi timp pentru rescrierea constantă a aceluiași selector. De exemplu, în acest moment există trei selectori care încep în același mod. cutie ul. caseta li și .box li a. Ca regulă, pentru acești selectori trebuie să creați trei reguli separate:
Dar Sass le permite să investească:
După cum puteți vedea, acest lucru elimină necesitatea de a înregistra de trei ori o parte din .box în selector. În plus, acest cod pare simplu și simplu. Acum, comanda -watch creează automat trei blocuri echivalente de .css:
caseta de umplere: 20 pixeli;
fundal-culoare: roșu;
>
.cutie margine: 10px;
>
.caseta li flot: stânga;
>
.caseta li o culoare: #eee;
>
În plus, puteți investi, de asemenea, proprietăți în același mod. De exemplu, puteți scrie ceva de genul:
Acest lucru va economisi timp, deoarece acum nu trebuie să scrieți patru straturi.
variabile
O altă funcție convenabilă Sass, care poate salva timpul de dezvoltare - variabilele sale. La fel ca limbile de programare precum PHP sau Java, Sass vă permite să setați o dată variabilele și să le utilizați în cod, dacă este necesar. De exemplu, puteți scrie ceva de genul:
Apoi Sass va înlocui toate valorile variabilei $ color în întregul fișier cu noul cod de culoare #eee setat.
Mixuri (amestecuri)
Dimensiunea @mixin box-size: 200px;
înălțime: 200px;
padding: 10px;
margine: 0px;
>
margine @ mixin (lățime $): $ width solid #eee;
>
După cum puteți vedea, în primul muxin nu există argumente. Acest lucru poate fi folosit după cum urmează:
caseta @ include mărimea casetei;
>
Rezultatul este următorul css:
lățimea casetei: 200px;
înălțime: 200px;
padding: 10px;
margine: 0px;
>
Puteți specifica argumente pentru al doilea mixin:
box2 @ include border (1px);
>
Aceasta va folosi regula definită în mixin, care îi va da mărimea argumentului, ceea ce îl va face și mai flexibil. Rezultatul este următorul css:
caseta 2: 1px solid #eee;
>
Acestea sunt doar principalele caracteristici ale Sass; Din nefericire, este imposibil să acoperim toate funcțiile acestui preprocesor în cadrul unui articol. Pentru mai multe informații, consultați site-ul web Sass.
Sass formate de ieșire
Când executați comanda -watch, Sass afișează datele CSS rezultate într-un fișier .css în mod standard (imbricate). În general, există 4 tipuri de ieșire Sass:
- Inserate (imbricate): Afișează structura foilor de stil CSS și documentul HTML.
- Extensie (avansată): adaugă linii cu proprietăți și reguli.
- Compact: fiecare regulă CSS cu toate proprietățile are o singură linie.
- Comprimat: fără spații (cu excepția spațiilor necesare pentru separarea selectorilor și a unei linii noi la sfârșitul fișierului).
Mai multe despre aceste formate de ieșire pot fi citite din acest link.
Cea mai ușoară modalitate de a modifica formatul de ieșire este comanda -watch, care începe cu steagul corespunzător la sfârșit. De exemplu, pentru a utiliza formatul extins:
sass - vizionează stil.scss: style.css --style = extins
Sass este un preprocesor foarte puternic; învățând să o utilizați productiv, puteți petrece mult mai puțin timp și efort pe front. Acesta completează sintaxa CSS, o face mai flexibilă și, de asemenea, îmbunătățește performanța.
Articole similare
Trimiteți-le prietenilor: