Innhold
- Den ydmyke blandingen
- SCSS
- CSS
- SCSS
- CSS
- Ulemper og duplisering
- Tørking av vår med Extend
- SCSS
- CSS
- Så lykkelige sammen
- SCSS
- CSS
- Å finne en balanse
Sass har et velfortjent rykte blant frontend-utviklere for å slå sammen kompleks CSS til smart, gjenbrukbar kode. Dette er utvilsomt verdifullt for skalering og vedlikehold, og lar utviklere utvide manglene som presenteres av tradisjonell CSS.
To av Sass ’mest grunnleggende funksjoner er mixins og extends. Selv om de ofte er samlet for deres evne til å generere flere stiler, tilbyr hver en unik tilnærming for å løse vanlige CSS-ulemper.
Når du utvikler Sass-ferdigheter, er det viktig å vite når du skal bruke en mixin eller utvide. Men mixins og extends er på ingen måte eksklusive, og når de brukes sammen, kan de produsere renere, mer robust markering. For å bedre forstå hvordan disse to funksjonene kan fungere sammen, la oss begynne med å se nærmere på deres unike oppførsel.
Den ydmyke blandingen
Mixins er en av de grunnleggende byggesteinene i Sass. Bare pakk en gruppe egenskaper eller velgere i en mixin, og koden kan brukes på nytt ved å inkludere mixin senere.
Å skrive den vanlige delte koden en gang sikrer at fremtidige redigeringer kan gjøres på ett sted - en kjerneleietaker av DRY-metoden. Dette eksemplet på knappemiks inneholder delte randeegenskaper som er inkludert i to forskjellige knappeklasser:
SCSS
@mixin-knapp {border-radius: 4px; kant: 4 px solid sort; } .søk-knapp {@ inkluderer-knapp; bakgrunnsfarge: blå; }. avbryt-knapp {@ inkluderer knapp; bakgrunnsfarge: rød; }
CSS
.søk-knapp {border-radius: 4px; kant: 4 px solid sort; bakgrunnsfarge: blå; }. avbryt-knapp {border-radius: 4px; kant: 4 px solid sort; bakgrunnsfarge: rød; }
Inkluder mixin med verdiene for hvert argument for å generere unik CSS for hver klasse:
SCSS
@ inkluderer knapp (‘søk’, blå); @include-knapp ('avbryt', rød);
CSS
.søk-knapp {bakgrunnsfarge: blå; border-radius: 4px; kant: 4 px solid sort; }. avbryt-knapp {bakgrunnsfarge: rød; border-radius: 4px; kant: 4 px solid sort; }
Selv i dette lille eksemplet er det lett å se den skalerbare kraften til Sass.
Ulemper og duplisering
Selv om det er en grei prosess å bruke mixins til å gjenta blokker av CSS, er det ikke alltid det smarteste å gjøre. CSS-utgang generert av miksen inneholder nå to klasser, hver med identiske grenseegenskaper.
Stadig bruk av mixins på denne måten vil generere mindre enn optimal markering og en oppblåst CSS-utgang full av duplikatkode. Heldigvis kan vi bruke utvide for å plukke opp hvor mixin slipper av.
Tørking av vår med Extend
Utvidelsesfunksjonen gjør at klasser kan arve alle egenskapene til en annen klasse ved å gruppere velgerne. I stedet for å duplisere CSS hver gang som en mixin, er velgeren gruppert med klassen den utvidet:
SCSS
.knapp {border-radius: 4px; kant: 4 px solid sort; }. søkeknapp {@ utvide .knapp; bakgrunn: blå; }
CSS
.button, .search-button {border-radius: 4px; kant: 4 px solid sort; }. søkeknapp {bakgrunn: blå; }
Nå har produksjonen vår bare en forekomst av grenseegenskapene som deles av knappene våre. Vi kan bruke denne konvensjonen til å effektivisere mixin-produksjonen.
Så lykkelige sammen
Mixin-only-tilnærmingen var oppblåst fordi hver gang vi ringte mixin, dupliserte vi grenseegenskapene unødvendig. I stedet for å skrive disse delte egenskapene direkte i miksen, kan vi utvide en eksisterende klasse som inneholder dem, og redusere mengden duplikatkode:
SCSS
.knapp {border-radius: 4px; kant: 4 px solid sort; } @mixin-knapp ($ navn, $ bakgrunnsfarge) {. # {$ navn} -knapp {bakgrunnsfarge: $ bakgrunnsfarge; @ utvide .knapp; }} @ inkluderer knapp (’søk’, blå); @include-knapp ('avbryt', rød);
Klassene som arver de delte knappegenskapene, er gruppert med .button-klassen, slik at de dupliserte kantegenskapene elimineres.
CSS
.buton, .search-button, .cancel-button {border-radius: 4px; kant: 4 px solid sort; }. søkeknapp {bakgrunnsfarge: blå; }. avbryt-knapp {bakgrunnsfarge: rød; }
Denne blanding / utvidelseskombinasjonen kan brukes til å generere mange knapper samtidig som mengden dupliserte CSS reduseres.
Mer avanserte Sass-funksjoner, for eksempel plassholdervelgere, kan bidra til å øke renheten til denne koden ytterligere.
Å finne en balanse
Intelligent bruk av mixins og utvidelser har ført til noen bemerkelsesverdige Sass-moduler, men husk å alltid sjekke CSS-utgangen. Sass er ikke et universalmiddel for hvert CSS-problem, og vil kreve litt finesse for å oppnå den forventede produksjonen.
Eksperimenter med forskjellige teknikker og se hvordan disse funksjonene kan veves sammen for å skape kraftige mixins og rene stilark. Sass ’aktive samfunn betyr at det alltid er nye ideer å utforske, oppdage og bidra med.
Ha det gøy!
Ord: Anthony Dispezio
Anthony Dispezio er en innholdsingeniør og ekspert på HTML, CSS, Sass, JavaScript, WordPress og N64. Følg ham på Twitter på @adsipezio. Denne artikkelen dukket opp først i nummer 261 av nettmagasinet.
Som dette? Les dette!
- De beste gratis skripttypene
- Gratis graffiti skriftvalg
- Illustrator tutorials: fantastiske ideer å prøve i dag!
