logo

Bootstrap 4 alpha

Mega Menue Sidebar


Sass & SCSS

Der Sass Pre-Processor hat in Bootstrap4 den Less-Processor ersätzt. Schlüsselmerkmale sind (nested rueles) verschachtelte Regeln. Durch Sass Und SCSS wird die Schreibweise von CSS stark vereinfacht und feste Variablen definiert. Hierdurch wird eine übersichtlichere Darstellung mit weniger Schreibarbeit und eine einfachere Bearbeitung durch festgelegte Variablen erreicht.

Nähere Informationen finden Sie unter Sass.

Einfaches Beispiel

css-code


#article {
margin: 0;
border: 1px solid blue;
}

#article p {
font-size: 1.5rem;
font-weight: bold;
color: blue;
}

#article a {
text-decoration: none;
}
							  
							  

SCSS Code


$colorRed: blue;
#article {
margin: 0;
border: 1px solid $colorBlue;

p {
color: $colorBlue;
font: {
size: 1.5rem;
weight: bold;
}
}

a {
text-decoration: none;
}
}
							  
							  

Sass Code


$colorBlue: blue
#article
margin: 0
border: 1px solid $colorBlue

p
color: $colorBlue
font:
size: 1.5rem
weight: bold

a
text-decoration: none
							  
							  

 

Weiter Beispiele mit Mixins, Verschachtelungen, Funktionen und Operationen folgen !

Sass (Syntactically Awesome Stylesheets) ist ein Pre-Prozessor der die Erzeugung con Cascading Stylesheets erleichtert. Ursprünglich an der Auszeichnungssprache YAML orientiert, unterstützt es die heute weit verbreitete SCSS-Syntax.

Tags

Sass SCSS Bootstrap Compiler Node Pre Processor