Ehdottomasti kaikki kokeneet konekirjoittajat käyttävätesiprosessorit. Ei ole poikkeuksia. Jos haluat menestyä tässä toiminnassa, älä unohda näitä ohjelmia. Ensi silmäyksellä ne voivat aiheuttaa hiljaisen kauhun aloittelijalle - tämä on jo liian paljon ohjelmoinnin tavoin! Itse asiassa voit selvittää kaikki CSS-esikäsittelylaitteiden ominaisuudet noin päivässä, ja jos yrität, sitten parissa tunnissa. Tulevaisuudessa ne yksinkertaistavat huomattavasti elämääsi.
Ymmärtääksesi paremmin tämän tekniikan ominaisuuksia, sukella lyhyesti verkkosivujen visuaalisen esityksen kehityksen historiaan.
Kun massasovellus juuri alkanutInternet, tyylitaulukoita ei ollut. Paperityöt riippuivat yksinomaan selaimista. Jokaisella heistä oli omat tyylinsä, joita käytettiin tiettyjen tunnisteiden käsittelemiseen. Sivut näyttivät siis erilaisilta sen mukaan, missä selaimessa avasit ne. Tuloksena on kaaos, sekavuus, kehittäjien ongelmat.
Vuonna 1994 norjalainen tiedemies Haakon Lee kehittyityylitaulukko, jota voidaan käyttää sivun ulkoasun muotoiluun erillään HTML-dokumentista. Idea kutsuttiin W3C-yhteenliittymän edustajille, jotka ryhtyivät heti työskentelemään sen valmistumisen puolesta. Useita vuosia myöhemmin julkaistiin CSS-spesifikaation ensimmäinen versio. Sitten sitä kehitettiin jatkuvasti, puhdistettiin ... Mutta käsite pysyi samana: jokaiselle tyylille on annettu tiettyjä ominaisuuksia.
CSS-taulukoiden käyttö on aina ollut ongelma. Esimerkiksi taittosuunnittelijoilla oli usein vaikeuksia ominaisuuksien lajittelussa ja ryhmittelyssä, eikä edes perinnössä kaikki ole niin yksinkertaista.
Ja sitten tuli kaksi tuhannes.Yhä useammat ammattimaiset käyttöliittymäkehittäjät alkoivat käsitellä merkintöjä, joille joustava ja dynaaminen työ tyylien kanssa oli tärkeää. Tuolloin CSS tarvitsi etuliitteitä ja seurantatukea uusille selainominaisuuksille. Sitten JavaScript- ja Ruby-asiantuntijat ryhtyivät toimintaan ja loivat esiprosessoreita - lisäosia CSS: ään, jotka lisäävät siihen uusia ominaisuuksia.
Niillä on useita toimintoja:
Lyhyesti:esiprosessori lisää ohjelmointilogiikan CSS-ominaisuuksiin. Nyt muotoilua ei suoriteta tavallisella tyylien lukemisella, vaan useilla yksinkertaisilla tekniikoilla ja lähestymistavoilla: muuttujat, funktiot, mikit, silmukat, ehdot. Lisäksi matematiikan käyttö oli mahdollista.
W3C alkoi nähdä tällaisten lisäosien suosionlisätä näiden ominaisuuksien asteittain CSS-koodiin. Esimerkiksi funktio calc () ilmestyi eritelmään, jota monet selaimet tukevat. On odotettavissa, että pian on mahdollista asettaa muuttujia ja luoda sekoituksia. Tämä tapahtuu kuitenkin kaukaisessa tulevaisuudessa, ja esiprosessorit ovat jo täällä ja toimivat jo hyvin.
Kehitetty vuonna 2007.Alun perin HTML-mallimoottorin Hamlin komponentti. Ruby on Rails -kehittäjät nauttivat CSS-elementtien manipuloinnin uusista ominaisuuksista ja alkoivat levittää sitä kaikkialle. Sassilla on valtava määrä ominaisuuksia, jotka sisältyvät nyt mihin tahansa esiprosessoriin: muuttujat, sisäkkäiset valitsimet, mikit (silloin et kuitenkaan voinut lisätä niihin argumentteja).
Muuttujat ilmoitetaan käyttämällä $ -merkkiä.Ne voivat tallentaa ominaisuuksia ja niiden sarjoja, esimerkiksi: "$ borderSolid: 1px kiinteä punainen;". Tässä esimerkissä olemme ilmoittaneet muuttujan nimeltä borderSolid ja tallentaneet sen 1px kiinteänä punaisena. Jos nyt CSS: ssä on luotava 1 kuvapistettä leveä punainen reunus, määritämme yksinkertaisesti tämän muuttujan ominaisuuden nimen jälkeen. Kun muuttujat on ilmoitettu, niitä ei voi muuttaa. Saatavilla on useita sisäänrakennettuja toimintoja. Ilmoitetaan esimerkiksi $ redColor -muuttuja arvolla # FF5050. Nyt CSS-koodissa jonkin elementin ominaisuuksissa käytämme sitä fontin värin asettamiseen: p {color: $ redColor; }. Haluatko kokeilla värejä? Käytä tummennus- tai vaalennustoimintoja. Tämä tehdään näin: p {color: darken ($ redColor, 20%); }. Tämä tekee redColorista 20% kevyemmän.
Sassilla on monia sisäänrakennettuja toimintoja. Suosittelemme, että ainakin tutustut niihin, tai parempi - opi.
Aikaisemmin pesiytymisen osoittamiseksi pitikäytä pitkiä ja epämiellyttäviä malleja. Kuvittele, että meillä on div, joka sisältää p, ja joka puolestaan sisältää span. Div: lle meidän on asetettava kirjasimen väri punaiseksi, p - keltaiseksi, span - vaaleanpunaiseksi. Normaalissa CSS: ssä tämä tehdään seuraavasti:
div {
väri punainen;
}
div p {
väri: keltainen;
}
div p alue {
väri: vaaleanpunainen;
}
CSS-esiprosessori tekee kaikesta yksinkertaisempaa ja kompaktimpaa:
div {
väri punainen;
p {
väri: keltainen;
.span {
väri: vaaleanpunainen;
}
}
}
Elementit ovat kirjaimellisesti sisäkkäin.
@Import-direktiivin avulla voit tuodatiedostot. Meillä on esimerkiksi fonts.sass-tiedosto, joka määrittelee fonttien tyylit. Sisällytämme sen tärkeimpään style.sass-tiedostoon: @import ‘fontit’. Tehty! Yhden suuren tyylitiedoston sijaan meillä on useita, joita voimme käyttää nopeasti ja helposti haluamiemme ominaisuuksien saamiseen.
Yksi mielenkiintoisimmista ideoista. Voit asettaa kokonaiset ominaisuudet yhdelle riville. Ne toimivat seuraavasti:
@mixin largeFont {
font-family: ”Times New Roman”;
fontin koko: 64px;
viivan korkeus: 80 kuvapistettä;
fontin paino: lihavoitu;
}
Jos haluat lisätä miksauksen sivun elementtiin, käytä @include -direktiiviä. Haluamme esimerkiksi soveltaa sitä otsikkoon h1. Osoittautuu seuraavaksi: h1 {@include: largeFont; }
Kaikki miksauksen ominaisuudet määritetään h1-elementille.
Sass-syntakse muistuttaa ohjelmointia.Jos etsit vaihtoehtoa, joka soveltuu paremmin aloittelijoille CSS-oppijoille, tutustu kohtaan Vähemmän. Se luotiin vuonna 2009. Tärkein ominaisuus on natiivin CSS-syntaksin tuki, joten suunnittelijan, joka ei tunne ohjelmointia, on helpompi oppia se.
Muuttujat ilmoitetaan @ -merkillä.Esimerkiksi: @fontSize: 14px;. Pesiminen toimii samalla tavalla kuin Sassissa. Mixinit ilmoitetaan seuraavasti: .largeFont () {font-family: ’Times New Roman’; fontin koko: 64px; viivan korkeus: 80 kuvapistettä; fontin paino: lihavoitu; }. Yhteyden muodostamiseksi ei tarvitse käyttää esikäsittelydirektiivejä - lisää vain uusi luettu miksaus valitun elementin ominaisuuksiin. Esimerkiksi: h1 {.largeFont; }.
Toinen esiprosessori. Luotu vuonna 2011 sama kirjailija, joka antoi maailmalle Jade-, Express- ja muita hyödyllisiä tuotteita.
Muuttujat voidaan ilmoittaa kahdella tavalla - nimenomaisestitai epäsuorasti. Esimerkiksi: font = ’Times New Roman’; Onko implisiittinen vaihtoehto. Mutta $ font = ’Times New Roman’ on selkeä. Mixins ilmoitetaan ja kytketään implisiittisesti. Syntaksi on redColor () väri punainen. Nyt voimme lisätä sen elementtiin, esimerkiksi: h1 redColor ();.
Ensi silmäyksellä Stylus saattaa tuntuakäsittämätön. Missä ovat "alkuperäiset" sulkeet ja puolipisteet? Mutta kun sukeltaa siihen, kaikki tulee paljon selvemmäksi. Muista kuitenkin, että tämän esiprosessorin pitkä kehitys voi saada sinut tottumaan käyttämään klassista CSS-syntaksia. Tämä aiheuttaa joskus ongelmia, kun sinun on työskenneltävä "puhtaiden" tyylien kanssa.
Sillä ei todellakaan ... ole väliä. Kaikki vaihtoehdot tarjoavat suunnilleen samat ominaisuudet, vain syntaksi on erilainen jokaiselle. Suosittelemme, että jatkat seuraavasti:
Kaikille vaihtoehdoille on valtava määrä vaihtoehtojamielenkiintoisia kirjastoja, jotka voivat edelleen yksinkertaistaa kehitystä. Sassin käyttäjiä kehotetaan tutustumaan Compassiin, joka on tehokas työkalu, jolla on monia sisäänrakennettuja ominaisuuksia. Esimerkiksi, kun olet asentanut sen, sinun ei tarvitse koskaan huolehtia toimittajan etuliitteistä. Verkkojen kanssa työskentely on yksinkertaistettua. On apuohjelmia värien, spritien kanssa työskentelyyn. Saatavilla on useita jo ilmoitettuja miksauksia. Vietä muutama päivä tämän työkalun avulla - näin säästät paljon aikaa ja energiaa tulevaisuudessa.
