Sass

Den aktuelle version af siden er endnu ikke blevet gennemgået af erfarne bidragydere og kan afvige væsentligt fra den version , der blev gennemgået den 25. december 2021; checks kræver 4 redigeringer .
Sass
Type Kompilere skabelonprocessor
Udvikler Nathan Weizenbaum , Chris Eppstein , Hampton Catlin
Operativ system Cross-platform
Første udgave 28. november 2006
nyeste version Dart Sass: 1.53.0 ( 22. juni 2022 ) [1]
Licens MIT-licens
Internet side sass-lang.com

Sass (Syntactically Awesome Stylesheets) er et modul, der følger med Haml . Sass er et CSS - baseret metasprog designet til at øge abstraktionsniveauet af CSS-kode og forenkle cascading style sheet- filer .

Sass-sproget har to syntakser:

Indlejrede regler

En af nøglefunktionerne i Sass er indlejrede regler, som gør det nemmere at oprette og redigere indlejrede vælgere.

# header baggrund : # FFFFFF . fejlfarve : # FF0000 _ en tekst-dekoration : ingen & : svæv tekst-dekoration : understregning

Vil blive udsendt på:

# header { baggrund : #FFFFFF ; } #header . _ fejl { farve : #FF0000 ; } # header a { text-decoration : none ; } # header a : hover { text-decoration : underline ; }

Variabler i CSS

Sass tilføjer konstanter og mixins til CSS . Dette gør det nemmere at bevare dataintegriteten inden for et stort sæt stilarter. Konstanter giver dig mulighed for at indstille en værdi og bruge den i stilarter, med mixins kan du gøre det samme med en stilattributblok.

$ linkFarve : # 00F a farve : $ linkColor

Vil blive udsendt på:

a { farve : #00F ; }

Et eksempel på brugen af ​​urenheder, ligheden mellem funktioner:

@mixin border-radius ( $radius , $border , $color ) { -webkit-border-radius : $radius ; -moz-border-radius : $radius ; -ms-border-radius : $radius ; border-radius : $radius ; border : $border solid $color } .box { @ include border-radius ( 10px , 1px , red ); }

Vil blive udsendt:

. box { -webkit -border -radius : 10 px ; -moz- grænse-radius : 10 px ; -ms- grænse-radius : 10 px ; kant - radius : 10px kant : 1 px fast rød ; }

Se også

Litteratur

Noter

  1. ↑ Dart Sass 1.53.0 .

Links

 Stylesheet-sprog ( sammenlign , list )
Tilstande
Standard
ikke standard