Olet ehkä kuullut CSS: n esikäsittelystä ja ihmettelevät, mistä kaikesta huhu on. Saatat jopa kuulla nenäkkyys tai VÄHEMMÄN .
Lyhyesti sanottuna CSS-esikäsittelyn avulla voit kirjoittaa tarkempia tyylitiedostoja, jotka on muotoiltu kauniisti ja vaativat vähemmän toistuvia tekniikoita, joita tavallisesti löytyy kirjoitettaessa CSS-koodia. Tulos on dynaamisempi muotoilu ja runsaasti aikaa tallennettuja sivustoja tai sovelluksia kehitettäessä.
Jos kirjoitat jo CSS-koodia, voit helposti oppia ennakoimaan CSS: ää. Kun ymmärrät Sassin laajuuden, ihmettelet, miksi et vaihdon aikaisemmin.
Sass näyttää samanlaiselta kuin CSS, mutta sen ilmeiset erot ovat, kun sukellat sisään. Sass on kirjoittamassa kahdella tavalla ja viime kädessä se riippuu sinulle sopivasta tyylistä. Käytän sisennettyä ja suljettua tyyliä (.scss) projekteissani, koska haluan todella kuvitella, missä lohko päättyy ja alkaa, kun paljon koodia asetetaan päällekkäin. Sasskoodi kootaan automaattisesti perinteisen CSS: n avulla esikäsittelyohjelmalla.
Saatavilla on monia sovelluksia, joiden avulla Sassin esikokoaminen on saumatonta ja suorastaan helppoa. Voit asentaa komentorivin, kunhan Ruby on asennettu laitteeseen. Jos et ole tyytyväinen komentorivillä, on muita vaihtoehtoja (lisätietoja tästä alla) ja jos tämä on pääsi käydä Sass-lang.com-sivustossa, voit oppia tekemään tämän helposti ja helposti vaiheittain. Lopulta minkä tahansa menetelmän avulla se on komentoriviltä tai -sovellukselta, Sass-asennuksessa katsotaan muutoksesi ja lasketaan automaattisesti perinteiseen CSS-versioon.
Suosittelen käyttämään esimerkiksi seuraavia sovelluksia: Codekit , LiveReload , tai seos jotka auttavat sinua luomaan Sass-projektin Mac-tietokoneelta tyhjästä tai jos olet Windows-käyttäjä, jonka suosittelen PrePros . Codekit, minun esikäsittelyohjelmani valinta, auttaa minua esikäsittelyssä Sassin avulla sekä vahvistamalla ja minimoimalla koodisi, jotta sivustosi voi ajaa nopeasti ja tehokkaasti. (Kyky luoda Kompassi tai Bourbon pohjaiset hankkeet Codekitin sisällä on myös mahtava piirre, mutta ei kuulu tämän artikkelin soveltamisalaan.) Kun olet mukavampaa Sassin kanssa, muista käyttää Compassia ja Bourbonia Sass-projekteissasi.
Sass tarkoittaa syntaktisesti mahtavia tyyliheitteitä ja luotiin Hampton Catlin . Sass esittelee uusia käsitteitä, kuten muuttujia, mixins, ja pesää CSS-koodiin, jonka tunnet ja rakastat. Nämä käsitteet lopulta tekevät CSS: stä mahtavin, helpompi kirjoittaa ja dynaamisempi. Kaikki nämä ominaisuudet yhdistyvät ja nopeuttavat suunnittelijan tai kehittäjän työnkulkua.
Yleensä ihmiset sekoittavat ovat vaihtoehtoisia tapoja kirjoittaa Sass. Näet muita Sassin tutoriaaleja tai selityksiä käyttämällä .SCSS- tai .Sass-laajennusta Sass-tiedostoille. Tämä on ilmeistä, koska koodilla on kaksi tapaa tuottaa saman tuoton. Yleisimmistä olen nähnyt, ja nykyisin käytössä oleva menetelmä on suljettu versio, joka tunnetaan nimellä .SCSS. Toinen tapa on .Sass-laajennus, joka nojautuu voimakkaammin sisennykseen pikemminkin kuin täsmällisiä elementtejä ja on valkoisen tilan riippuvainen. Tällä syntaksilla ei ole tarvetta puolipisteissä tai suluissa, kuten näet CSS: ssä ja .SCSS-syntaksissa.
Katso seuraava esimerkki.
#container {width:960px;margin:0 auto;}#container p {color: black;}/* Same as CSS but has variables and nesting. */$black: #000000;#container {width:960px;margin:0 auto;p {color :$black;}}/* Same as SCSS without semicolons, brackets, and more dependent on indentation. */$black: #000000#containerwidth:960pxmargin: 0 autopcolor:$blackOkei, joten nyt olet luultavasti miettimässä, miten saat Sassin asetukset omille projekteillesi. Prosessi on melko helppoa, varsinkin jos käytät Codekit tai vastaavaa sovellusta, joka auttaa sinua matkan varrella.
Tyypillinen Sass-projektin tiedostorakenne näyttää alla olevasta ääriviivasta. Tämä saattaa näyttää pelottavalta, mutta lupaan, että työnkulkusi paranee, kun päätäsi pään ympäri, miten asiat toimivat yhdessä. Lopulta kaikki Sasssi kootaan yhteen CSS-tiedostoon, joka on tiedosto, jonka sisällytät työasiakirjojesi sisälle, kuten HTML, PHP jne.
stylesheets/||-- modules/ # Common modules| |-- _all.scss # Global level styles| |-- _utility.scss # Basic utility styles| |-- _colors.scss # Global Colors| ...||-- partials/ # Partials - use these to target specific styles and @import on _base.scss| |-- _base.scss # imports for all mixins + global project variables| |-- _buttons.scss # buttons| |-- _figures.scss # figures| |-- _grids.scss # grids| |-- _typography.scss # typography| |-- _reset.scss # reset| ...||-- vendor/ # CSS or Sass from other projects| |-- _colorpicker.scss| |-- _jquery.ui.core.scss| ...||-- main.scss # primary Sass file - where your main Sass code will likely be.Miten asetat rakenteenne viime kädessä riippuu sinusta. Aloita perusrakenne ja hienosäätää omia tarpeitasi ja työnkulkua.
Sass laajentaa CSS @ import- sääntöä, jotta se voi tuoda Sass- ja SCSS-tiedostoja. Kaikki tuodut tiedostot yhdistetään yhdeksi tulostetuksi CSS-tiedostoksi. Lisäksi tuoduissa tiedostomuodoissa määritellyt muuttujat tai sekoitukset siirtyvät päätiedostoon, mikä tarkoittaa, että voit lähes sekoittaa minkä tahansa tiedoston ja olla varmoja, että kaikki tyylisi säilyvät maailmanlaajuisesti.
@import tuo tiedostonimen tuoda. Viimeisenä keinona Sass- tai SCSS-tiedostot tuodaan valitun tiedostonimen kautta. Jos laajennusta ei ole, Sass yrittää löytää tiedoston kyseisellä nimellä ja .scss tai .Sass -laajennuksella ja tuoda sen.
Jos sinulla on tyypillinen Sass-projektin asetukset, huomaat joitakin @import-sääntöjä perustiedostoon. Tämä yksinkertaisesti mahdollistaa useiden tiedostojen synkronoinnin tehokkaasti, kun ne on koottu, esimerkiksi:
@import "main.scss";tai:
@import "main";@PartialsJos sinulla on SCSS- tai Sass-tiedosto, jonka haluat tuoda mutta jota ei voi kääntää CSS: ään, voit lisätä aliverkon tiedostonimen alkuun, joka tunnetaan Osittaisena. Kun koodi kootaan, Sass sivuuttaa osia, kun käsitellään CSS: ään. Esimerkiksi sinulla saattaa olla _buttons.scss, ei _buttons.css-tiedostoa luodaan ja voit @ importata "-painikkeita";
Paras käytäntö on luoda osittainen hakemisto ja sijoittaa kaikki osittaiset Sass-tiedostot sen sisälle. Näin varmistetaan, että sinulla ei ole kaksoiskappaleita, joita Sass ei salli, esimerkiksi osittaiset _painikkeet.scss ja tiedostonpainikkeet.scss ei voi olla samassa hakemistossa. Osittaisten käyttäminen on loistava tapa pysyä järjestäytyneenä maailmanlaajuisesti. Niin kauan kuin @ tuodaan tiedostoa, kirjoittamasi Sass on käytettävissä koko projektin ajan. Tyypillisesti sisäosien sisällä luon sekoituksia tai muuttujia käytettäväksi koko hankkeen ajan. Minä nimeän heidät niiden sisällön ja elementtien mukaan.
CSS: n muuttujat ovat läpimurto nykyaikaisessa web-kehityksessä. Sassilla voit luoda muuttujia esimerkiksi kirjasimia, värejä, kokoja, marginaaleja, pehmusteita jne. Varten. Lista on loputon. Jos kirjoitat JavaScript tai PHP, käsite on melko samanlainen muuttujien ja konventioiden määrittelyssä.
Joten miksi muuttujia käytetään? Helppo, muuttujien avulla voit käyttää elementtiä useammin kuin kerran, samanlainen kuin luokka HTML tai muuttuja JavaScript. Oletetaan esimerkiksi, että määrität useita hauvoja, joilla on tietty taustaväri. Voit käyttää muuttujan, joka on helpompi muistaa perinteisen hex-koodin tai RGB-laskennan sijasta. Muuttujan tekeminen helposti muistettavan nimen avulla tekee vähemmän kopioinnista ja liittämisestä sekä tuottavammasta työnkulusta. Sama konsepti pätee aina, kun muuttuja voidaan toteuttaa ja Sass, joka on käytännöllisesti katsoen missä tahansa, esimerkiksi tämä .scss:
#container {/* Here we define our variables */$basetextsize: 12px;$container-space: 10px;$red: #C0392B;/* Variables are applied */font-size: $basetextsize;padding: $container-space;color : $red;}tuloksena on tämä .css-tiedosto:
#container {font-size: 12px;padding: 10px;color: #C0392B;}Osaan muuttujista on, että ne ovat hyvin samankaltaisia kuin komentosarjakielissä käytetyt. Sassin sisältämiä muuttujia voidaan käyttää sekä toiminnan että toimintojen sisällä. Numerotuki tukee tavanomaisia matemaattisia operaatioita (+, -, *, / ja%). Väreissä on Sassin sisäänrakennettuja toimintoja, jotka kohdistavat keveyttä, värisävyä, kylläisyyttä ja paljon muuta.
Tämän toiminnon ansiosta koodisi on dynaamisempi kuin koskaan. Jos esimerkiksi haluat vaihtaa sivustosi yleisen linkin värin, voit yksinkertaisesti muuttaa muuttujan, kääntää sen uudelleen ja sivustosi päivittyvät dynaamisesti koko ajan. Katso uudestaan käytettävästä navigointiluettelosta toinen esimerkki tästä .scss:
nav{$nav-width: 900px;$nav-links: 5;$nav-color: #ce4dd6;width: $nav-width;li{float: left;width: $nav-width/$nav-links - 10px;background-color:lighten($nav-color, 20%);&:hover{background-color:lighten ($nav-color, 10%);} }} johtaa tähän .css:
nav {width: 900px;}nav li {float:left;width: 170px;background-color: #E5A0E9;}nav li:hover {background-color: #D976E0;}Pesiminen on valtava syy, miksi rakastan Sassia. Kirjoitat vähemmän koodiriviä loppuun ja kaikki koodisi on helppo lukea sisäkkäisen muotoilun takia. (Sama pesimen käsite löytyy myös vähemmän.)
Pylväässä on kaksi tyyppiä:
Valitsimen pesu Sassissa on samanlainen kuin haluat nestettä HTML:
Main Content
Sidebar Content
Sassin pesän versio:
#container {.main {width:600px;h1 {color: $red;}}.sidebar {width: 300px;h3 {margin: 0;}}}seuraisi seuraavaa CSS: tä:
#container .main {width: 960px;}#container .main h1 {color: #C0392B;}#container .sidebar {width: 300px;}#container .sidebar h3 {margin: 0;}Toinen pesäntyyppi on omaisuuden pesintä. Voit upottaa ominaisuuksia, joilla on sama etuliite parempiin kohdetietoihin, jotka johtavat vähemmän riviin koodia, esimerkiksi:
#container {.main {font:weight: bold;size: 12px;.intro {font:size: 20px;}}}johtaisi tähän CSS:
#container .main {font-weight:bold;font-size: 12px;}#container .main .intro {font-size:20px;}Kaikista Sassin ominaisuuksista Mixinsin on oltava tehokkain. Sekoot ovat samankaltaisia kuin muuttujat, mutta steroidit. Voit määrittää elementin täydellisen tyylin ja käyttää niitä uudelleen koko hankkeen ajan.
Mixins määritellään käyttäen @mixin -direktiiviä, jossa on käytetty aikaisemmin luotuja tyylejä ja käytä sitä valitsimelle @include -direktiivillä. Alla on yleinen CSS-malli, jota käytetään horisontaalisen navigointivalikon luomiseen. Sen sijaan, että kirjoittaisit saman koodin kaikille navigointiesimerkille, käytä vain sekoitusta ja lisää se tarvittaessa mukaan. Tämä konsepti voidaan tehdä kaiken mitä käytät uudestaan ja uudestaan, kuten painikkeita, typografiaa, kaltevuuksia jne.
/* Here we define the styles */@mixin navigate {list-style-type:none;padding:0;margin:0;overflow:hidden;> li {display:block;float:left;&:last-child{margin-right:0px;}}}Ja tässä me sisällytämme mixin yhdellä rivillä koodia:
ul.navbar {@include navigate;}mikä johtaa tähän koottuun CSS: ään:
ul.navbar {list-style-type: none;padding:0;margin:0;overflow: hidden;}ul.navbar li {display: block;float: left;}ul.navbar li:last-child {margin-right: 0px;}Voit jopa mennä niin pitkälle kuin luoda mukautettavia mixins, jotka käyttävät argumentteja päivittää dynaamisesti. Sen lisäksi voit sisällyttää sekoittimia muiden mixinssien sisällä tai luoda toimintoja mixinien ja muiden kanssa. Näiden valta on aivan valtava.
On olemassa joitain suosittuja ennalta määriteltyjä mixin-kokoelmia, joista mainitsin aikaisemmin nimellä Compass ja Bourbon. Yksinkertaisella @import- projektilla voit käyttää jo syntyneitä miksauksia, joita käytetään yleisesti koko verkossa. On niin paljon vaihtoehtoja, että on vaikea kattaa kaikkea käytettävissä, mutta on ehdottomasti hauskaa kokeilla ja saada kätesi likainen kehittää mukautettuja animaatioita tai siirtymiä muutamalla rivillä koodia eikä näyttö koko. Sekoittajat tekevät rajat selaimen kehityksen tuulta, jos et halua kirjoittaa selaimesi määriteltyjä etuliitteitä yhä uudelleen CSS: n sisällä.
Esimerkiksi tässä luodaan mixini ja argumentit, joiden avulla se voidaan räätälöidä.
@mixin my-border($color, $width) {border: {color: $color;width: $width;style: $dashed;}}p { @include my-border (blue, lin); }joka antaa meille tämän CSS: n, kun se on koottu:
p {border-color: blue;border-width: lin;border-style: dashed;}Sassilla on oppimiskäyrä, mutta uskon todella, että kun ymmärrät menetelmät ja syntaksin, et koskaan halua enää palata kirjalliseen CSS: ään.
Sass on erittäin voimakas ja olen vain käsitellyt perusasiat täällä. Perinteisellä CSS: llä me kaikki olemme kohdanneet kopioinnin ja liittämisen tai etsimme ja korvataksemme tehtäviä, jotka tuhlaavat niin paljon aikaa projektin kehittämisvaiheessa. Anna Sassille yrittää löytää ratkaisu tehokkaaseen työnkulkuun tulevissa projekteissasi.
Käytätkö Sassia vai edes muuta CSS-esikäsittelyjärjestelmää? Onko sinulla suosikki mixiniä? Kerro meille kommentit.
Esitetty kuva / pienoiskuva, käyttää nollaa sankarikuvaan kautta Shutterstock.