CSS Preprocessor: Pregled, opcije, aplikacije

Apsolutno svi iskusni instalateri koriste predprocesore. Nema iznimaka. Ako želite uspjeti u ovoj aktivnosti, ne zaboravite na te programe. Na prvi pogled, mogu nazvati početnika tihim užasom - to je već previše slično programiranju! Zapravo, možete se baviti svim mogućnostima CSS predprocesora oko jednog dana, a ako pokušate, onda za par sati. U budućnosti, oni će uvelike pojednostaviti vaš život.

Kako su se pojavili CSS procesori

Kako bismo bolje razumjeli značajke te tehnologije, ukratko ćemo prodrijeti u povijest razvoja vizualnog prikaza web stranica. Kad je masovno korištenje Interneta tek počelo, nisu postojali stilski listovi. Obrada dokumenata u potpunosti je ovisila o preglednicima. Svaki od njih imao je svoje stilove koji su korišteni za rukovanje određenim oznakama. Sukladno tome, stranice su izgledale različito ovisno o pregledniku u kojem ste ih otvorili. Rezultat je kaos, konfuzija, problemi za programere.


Godine 1994, norveški znanstvenik, Hookon, razvio je stilsku ploču koja se mogla koristiti za izradu izgleda stranice odvojeno od HTML dokumenta. Ideju su zajednički sponzorirali predstavnici konzorcija W3C, koji su se odmah obvezali da će ga finalizirati. Nekoliko godina kasnije izdana je prva verzija CSS specifikacije. Tada je konstantno usavršavana, usavršena. Ali koncept je ostao isti: svakom stilu se daju određena svojstva.Korištenje CSS tablica uvijek je uzrokovalo neke probleme. Na primjer, dizajneri često imaju poteškoća s sortiranjem i grupiranjem svojstava, a uz nasljedstvo, nije sve tako nedvosmisleno. I sada su došle dvije tisuće. Oznaku su sve više počeli koristiti profesionalni front-end programeri, za koje je bio važan fleksibilan i dinamičan rad sa stilovima. U to je vrijeme CSS zahtijevao postavljanje prefiksa i praćenje podrške za nove mogućnosti preglednika. Zatim su stručnjaci za javascript i Ruby preuzeli pitanje stvaranjem predprocesora - dodataka za CSS, dodajući mu nove značajke.


CSS za početnike: značajke predprocesora

Oni obavljaju nekoliko funkcija:
  • objedinjuju prefiksi preglednika i kaki;
  • pojednostavljuju sintaksu;
  • omogućuju rad s ugrađenim selektorima bez grešaka;
  • poboljšavaju logiku stilizacije.
  • Ukratko: Preprocesor dodaje logiku programiranja u CSS sposobnost. Sada se stilizacija ne izvodi uobičajenim prenošenjem stilova, već nekoliko jednostavnih tehnika i pristupa: varijabli, funkcije, miješalice, ciklusi, uvjeti. Osim toga, postojala je i mogućnost korištenja matematike.
    Vidjevši popularnost ovih dodataka, W3C je počeo postupno dodavati svoje mogućnosti u kod CSS-a. Na primjer, u specifikaciji pojavila se funkcija calc (), koju podržavaju mnogi preglednici. Očekuje se da će uskoro biti moguće odrediti varijable i stvoriti miksiny. Međutim, to će se dogoditi u dalekoj budućnosti, a predprocesori su već ovdje i već su izvrsni.

    Popularni predprocesori CSS. Sass

    Razvijen 2007. godine. To je izvorno bila Haml komponenta HTML predloška. Nove značajke za upravljanje CSS elementima došle su do voćnih programera na Ruby on Rails, koji su je počeli širiti svugdje. U Sassu je postojao veliki broj značajki koje su sada uključene u svaki procesor: varijable, selektore privitaka, miksin (tada, međutim, nisu mogli dodati argumente).

    Deklaracija varijable u Sassu

    Varijable se deklariraju korištenjem simbola $. Mogu pohraniti svojstva i njihove skupove, primjerice: "$ borderSolid: 1px solid red;". U ovom primjeru, najavili smo varijablu pod nazivom borderSolid i spremili 1px čvrsto crveno. Sada, ako u CSS-u trebamo stvoriti crvenu granicu širine 1px, ona jednostavno specificira ovu varijablu iza imena svojstva. Nakon deklaracije, varijable se ne mogu mijenjati. Dostupno je nekoliko ugrađenih funkcija. Na primjer, proglasimo $ redColor s vrijednošću # FF5050. Sada u CSS kodu, u svojstvima elementa, koristimo ga za određivanje boje fonta: p {color: $ redColor;}. Želite li eksperimentirati s bojom? Koristite funkcije zamračene ili posvijetlite. Ovo se radi ovako: p {color: potamni ($ redColor, 20%);}. Kao rezultat, boja crvene boje će biti 20% lakša.
    Sass ima mnogo ugrađenih značajki. Preporučamo da se barem upoznate s njima i po mogućnosti ih proučite.

    Prilog

    Ranije je za označavanje gniježđenja morao koristiti dugačke i neugodne nacrte. Zamislite da imamo div, u kojem leži p, iu njemu, okret, nalazi se raspon. Za div moramo postaviti crvenu boju fonta, za p - žutu, za raspon -ružičasta. U uobičajenom CSS-u to je učinjeno na sljedeći način: div {color: red; } div p {boja: žuta; } div p span {boja: ružičasta; } S CSS pretprocesorom sve je lakše i kompaktnije: div {color: red; p (boja: žuta; .span {boja: ružičasta; }}} Elementi su doslovno "ugrađeni" jedan na drugi.

    Direktiva preprocesora

    Možete uvoziti datoteke koristeći @import direktivu. Primjerice, imamo datoteku fonts.sass, u kojoj se deklariraju stilovi fontova. Spojite ga na glavnu datoteku style.sass: @import 'fonts'. Gotovo! Umjesto jedne velike stilske tablice, imamo nekoliko koje možete koristiti za brzo i jednostavno pristupanje potrebnim svojstvima.

    Miksini

    Jedna od najzanimljivijih ideja. Omogućuje jednom retku da odredi skup svojstava. Oni rade ovako: @mixin bigFont {font-family: 'Times New Roman'; veličina fonta: 64px; visina linije: 80px; font-weight: bold; } Da biste primijenili miksin na stavku na stranici, koristite @include direktivu. Na primjer, želimo ga primijeniti na zaglavlje h1. Dobiven je sljedeći dizajn: h1 {@include: largeFont;}
    Sva svojstva mxina bit će dodijeljena h1.

    Preprocesor manje

    Sintaksa Sass podsjeća na programiranje. Ako tražite opciju koja je najprikladnija za početnike CSS-a, obratite pozornost na Less. Nastala je 2009. godine. Glavna značajka - podrška izvorne CSS sintakse, tako da nisu upoznati s programiranjem daktilografa bit će lakše svladati. Varijable se deklariraju pomoću simbola @. Na primjer: @fontSize: 14px;. Prilog radi na istim načelima kao u Sassu. Miksini su objavljeni na sljedeći način: .largeFont (){font-family: 'Times New Roman'; veličina fonta: 64px; visina linije: 80px; font-weight: bold;}. Da biste se povezali, ne trebate koristiti predprocesorske upute - samo dodajte svježe oblikovan miksin u svojstva odabrane stavke. Na primjer: h1 {.largeFont;}.

    Stylus

    Još jedan procesor. Stvoren je 2011. godine od strane istog autora koji je svijetu predstavio Jade, Express i druge korisne proizvode. Varijable se mogu deklarirati na dva načina - eksplicitno ili implicitno. Na primjer: font = 'Times New Roman'; - ovo je implicitna opcija. Ali $ font = 'Times New Roman' je očigledan. Miksini su najavljeni i implicitno povezani. Sintaksa je: redColor () crvena. Sada možemo dodati njegov element, na primjer: h1 redColor ();. Na prvi pogled Stylus može izgledati nejasan. Gdje su roditeljske zagrade i zarez? Ali isplati se umočiti u sve, sve postaje mnogo jasnije. Međutim, imajte na umu da produljeni razvoj s ovim pretprocesorom može "odbaciti" korištenje klasične CSS sintakse. To ponekad uzrokuje probleme s potrebom za radom s "čistim" stilovima.

    Koji je predprocesor izabrao?

    Zapravo, to nije važno. Sve opcije pružaju otprilike iste mogućnosti, samo sintaksa je različita za svakoga. Preporučujemo da učinite sljedeće:
  • ako ste programer i želite raditi sa stilovima poput koda, koristite Sass;
  • ako ste webmaster i želite raditi sa stilovima poput uobičajenog izgleda, obratite pozornost na Less;
  • Ako volite minimalizam, koristite Stylus.
  • Za sve varijante postoji ogromna količina zanimljivih knjižnica koje mogu dodatno pojednostaviti razvoj.Sass korisnicima savjetujemo da obratite pozornost na kompas - moćan alat s mnogo ugrađenih značajki. Na primjer, nakon instalacije nikada nećete morati brinuti o prefiksima dobavljača. Pojednostavljeni rad s rešetkama. Postoje alati za rad s bojama, duhovi. Dostupan je i broj već najavljenih mixina. Dajte mu par dana - tako ćete uštedjeti mnogo vremena i truda u budućnosti.

    Povezane publikacije