Sass bringer standard programmeringsfunksjoner til CSS

Når du utvikler mer CSS, blir håndterbarheten til filene og elementene et problem. Lager du for eksempel ett stort stilark eller deler det opp i mindre filer, som introduserer spørsmål om katalogstruktur og så videre? Syntaktisk Awesome Stylesheets (Sass) forenkler administrasjon av filer (ressurs?) Sammen med mange andre ting.

Sass ser kjent ut

Sass ble opprettet av Hampton Catlin, som også brakte oss Haml for HTML-utvikling. Ruby-utviklere vil kjenne Sass godt, siden det er en standardfunksjon i Ruby on Rails. Sass bruker samme forutsetning som TypeScript, LESS og til og med CoffeeScript for JavaScript-utviklere.

Når du bruker Sass, utvikler du CSS som Sass-formaterte filer. Sass forbehandler eller kompilator godtar Sass-formatert kode og genererer standard CSS.

Hva Sass bringer til bordet

Sass har for mange funksjoner til å liste opp i denne artikkelen, så la oss se på de mer imponerende funksjonene det gir til CSS-utvikling.

nesting

Et av de kjedelige aspektene ved CSS bruker den samme velgeren igjen og igjen når du jobber med barnevalgere. Sass lar deg hekke barnevalg innen den delte forelderen. Følgende kodestykke demonstrerer denne funksjonen ved å spesifisere velgere for listeelementene i den uordnede listen, alt innenfor en velger.

 #navbar ul {margin-left: 20px; margin-høyre: 20px; farge: #FFF; .li {bakgrunnsfarge: #CCC; }} 

variabler

Denne funksjonen bringer en standard programmeringsfunksjon til CSS - den lar deg definere verdier som kan gjenbrukes gjennom et stilark. Du erklærer en variabel akkurat som en eiendom, bortsett fra at du bruker dollartegnet ($) for variabelnavn. Matematiske operasjoner kan også brukes på variabler. Videre kan variabler brukes i egenskapsnavn og velgere ved å bruke følgende format # {$ variabelnavn} (Sass kaller denne interpolasjonen). Sass støtter seks grunnleggende datatyper: tall, tekststrenger, farger, boolesk, null og lister (verdier atskilt med mellomrom eller komma).

 $ standardfarge: # C0C0C0; .h1 {bakgrunnsfarge: $ standardfarge; } 

mixins

Denne funksjonen letter gjenbruk av stiler eller velgere - du kan tenke på det som en forbedret variabel. I utgangspunktet definerer du noen CSS og tildeler den et navn med @mixin-direktivet. Mixin kan gjenbrukes i hele koden din via @include-direktivet. Kraften til mixins stopper ikke her, da den også tillater bruk av parametere; disse lar deg bruke variabler (parametrene) i blokken definert av mixin.

Jeg satte meg i hjernen for å komme med et eksempel, men jeg bestemte meg for å bruke det gode eksemplet på Sass-nettstedet, som definerer et par mixins som brukes til datavelgeren.

 @mixin table-base {th {text-align: center; font-vekt: fet; } td, th {polstring: 2px}} @ mixing venstre ($ dist) {float: left; margin-left: $ dist; } #data {@ inkluder venstre (10px); @ inkluder tabellbase; } 

Importere

Dette er en annen standard programmeringsfunksjon som Sass bringer til CSS. Import lar deg bryte store stilark i mindre, mer håndterbare filer. @Import-direktivet brukes til å referere til eller importere andre Sass-filer. Mens importuttalelser vanligvis er øverst i en Sass-fil, kan du plassere dem hvor som helst i en fil. Her er den grunnleggende syntaks.

 @import "filnavn uten utvidelse"; 

Forlenge

Du kan bruke en velger som grunnlag for en annen. I utgangspunktet utvider den andre velgeren den første, så den har alle funksjonene til den første velgeren, pluss det som er definert i sitt eget element.
 .baseSelector {farge: # 000; grense: 1px; } .extendSelector {@extend .baseSelector; @ bakgrunnsfarge: #fff; } 

kommenterer

Sass støtter multiline- og enkeltlinjekommentarer som kan opprettes ved bruk av standard CSS-syntaks (/ * comment * /) samt den Sass-spesifikke enkeltlinjekommentaren (// comment).

Bruke Sass som et kommandolinjeverktøy

Sass er tilgjengelig som et kommandolinjeverktøy, en Ruby-modul eller en plugin for et Rack-aktivert rammeverk (tenk på Ruby on Rails). Jeg fokuserer på kommandolinjealternativet i denne artikkelen.

Du starter med å installere Sass gem: gem install sass (Windows-brukere må installere Ruby først). Figur A viser installasjonen på MacBook Pro.

Figur A

Installere Sass i OS X

Når den er installert, kan du bruke kommandolinjen til å kompilere Sass-koden til CSS-motstykket. Dette oppnås ved å kjøre sass-kommandoen, etterfulgt av inputfilnavnet og outputfilnavnet slik:

 sass inputFile.scss outputFile.css 

Scss-filtypen er standard for Sass. En kul funksjon er at du kan ha Sass-klokke for endringer i scss-filen. Hvis det skjer endringer, oppdateres den tilsvarende CSS automatisk. Dette oppnås med kommandolinjeparameteren for klokken (to streker fulgt av søkeordet).

 sass - watch inputFile.scss: outputFile.css 

Figur B viser kommandoen i handling. Legg merke til at jeg skrev kommandoen feil første gang (den manglet tykktarmen). Du kan få en komplett liste over Sass-kommandolinjebrytere med –hjelp-bryteren (sass –hjelp).

Figur B

Samle og se på en scss-fil

Hvilket verktøy er bedre?

Mitt første prosjekt som faktisk brukte Ruby, introduserte meg for Sass. Jeg kan se hvorfor utviklere elsker å bruke Sass; det bringer mange utviklingsfunksjoner til den ville verdenen av CSS. Sass er imidlertid bare et annet alternativ i blandingen av verktøy som CoffeeScript, LESS og TypeScript, så hvilken bør du bruke?

Jeg har brukt MINDRE ganske mye på en Bootstrap-basert applikasjon og de andre verktøyene som testkjøringer, og de ser ut til å ha nyttige funksjoner og ganske mye overlapping. Jeg tror hvilket verktøy du bruker, avhenger av verktøyene du bruker; for eksempel vil Microsoft-utviklere sannsynligvis følge med TypeScript, Ruby-utviklere vil velge Sass, og så videre. Jeg vil sannsynligvis holde meg med MINDRE fordi jeg er en stor støtter av Bootstrap.

Liker du verktøy som gir CSS noe konsistens? I så fall, hvilket verktøy foretrekker du? Gi oss beskjed i diskusjonen.


© Copyright 2021 | pepebotifarra.com