Sp:sass
Version vom 2. August 2016, 12:41 Uhr von Veltrup (Diskussion | Beiträge) (Die Seite wurde neu angelegt: „==Name== <sp:sass> - Kompiliert SASS Scripte ==Syntax== <source lang="xml"> <sp:compasscompiler name="variable" source="mycode" options="options" /> </s…“)
Name
<sp:sass> - Kompiliert SASS Scripte
Syntax
<sp:compasscompiler
name="variable"
source="mycode"
options="options"
/>
Beschreibung
Sass (Syntactically Awesome Stylesheets) ist eine Stylesheet-Sprache, die als Präprozessor die Erzeugung von Cascading Stylesheets erleichtert.
Dieser Tag nimmt Sass-Skripte entgegen, kompiliert sie in CSS. Der CSS-Code wird in einer Variable zur weiteren Verarbeitung abgelegt.
Attribute
Name | Type | Required | Default | ab IES Version |
---|---|---|---|---|
name
|
Variable | Ja | None | 2.17 |
source
|
Attribute | Ja | None | 2.17 |
options
|
Map | Ja | None | 2.17 |
name
- Name der Variable für den Zugriff auf das erzeugte CSS.
source
- Text der das Sass-Skript enthält.
options
- Die Optionen sind
- outputStyle
- nested, compact, expanded, compressed
- includePath
- Liste von Pfaden in denen nach SCSS-Scripten gesucht werden soll
- precision
- Genauigkeit von Mathematischen Rundungen
Beispiele
Textbild erzeugen
Template Quelltext
<sp:set name="_source">
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
</sp:set>
<sp:map name="_sassOptions" action="new"/>
<sp:map name="_sassOptions" action="put" key="outputStyle" value="compressed"/>
<sp:collection name="_sassOptions.includePath" action="add" value="${_base}node_modules/reset.css"/>
...
<sp:sass name="_styles" source="_source" options="_sassOptions"/>
<sp:print name="_styles"/>