Die Stylesheetsprache Sass

CSS

Mit der Formatierungssprache CSS wird im Prinzip der Inhalt einer Seite von seinem Design getrennt. Dadurch können Internetseiten einfach umgestaltet und angepaßt werden. Eine interressante Demonstration der Eigenschaften von HTML-Elementen bietet die Seite w3schools.com .

Zum Beispiel Animationen von:

• fonts
• columns
• flex

Was ist SASS?

SASS versteht sich als Präprozessor und erzeugt Cascading Style Sheet (CSS) aus den Dateien *.sass (Syntactically Awesome Style Sheet) oder *.scss (Sassy CSS).

Durch SASS oder SCSS wird die Schreibweise von CSS vereinfacht und Variablen fest definiert. Hierdurch ist eine übersichtlichere Darstellung, weniger Schreibarbeit und eine einfachere Überarbeitung durch die Verwendung von Variablen gewährleistet. (↗SASS )

Wichtig: Um Sass in einem Gohugo Projekt einzusetzen, muß die Extended Version von gohugo.exe verwendet werden.

Was ist der Unterscheid zwischen *.sass und *.scss

Der größte Unterschied ist die Verwendung von Klammern und Semikolons in Sassy CSS (*.scss), die mit der Version 3 von Sass als offizielle Syntax festgelegt wurde.

 #header {
   margin: 0;
   border: 1px solid red;
 }
 #header p {
   font-size: 12px;
   font-weight: bold;
   color: red;
 }

 $colorRed: red
 #header
   margin: 0
   border: 1px solid $colorRed
   p
     color: $colorRed
     font:
       size: 12px
       weight: bold

 $colorRed: red;
 #header {
   margin: 0;
   border: 1px solid $colorRed;
   p {
     color: $colorRed;
     font: {
       size: 12px;
       weight: bold;
     }
   }
 }

Einbinden von Sass

In einem Gohugo-Theme werden Sass-Dateien *.sass im Verzeichnis ./themes/<themename>/assets/sass/ abgelegt. Im Kopf einer Html-Datei (z.B. ./layouts/partials/header.html) werden Sass-Dateien definiert.

 # Beispiel 1
 {{ $style := resources.Get "sass/main.scss" | toCSS | minify | fingerprint }}
 <link href="{{ $style.RelPermalink }}" rel="stylesheet">

 # Beispiel 2 aus dem Theme newsroom
 {{- $options := (dict "targetPath" "css/styles.css" "outputStyle" "expanded" "enableSourceMap" "true") -}}
 {{ $mainSassFile :=  "sass/main.sass" }}
 {{- $styles := resources.Get $mainSassFile | resources.ExecuteAsTemplate $mainSassFile . | resources.ToCSS $options | resources.Fingerprint "sha512" }}
 <link rel="stylesheet" href="{{ $styles.Permalink }}" integrity="{{ $styles.Data.Integrity }}">

 # Beispiel 3 aus head.html
 <link rel="stylesheet" type="text/css" href="{{.Site.BaseURL}}/emacs.orig.css"/>
 <link rel="stylesheet" type="text/css" href="{{.Site.BaseURL}}/style701.css"/>
 <link rel="stylesheet" type="text/css" href='{{ (resources.Get "sass/chroma_overwrite.scss" 	| toCSS).Permalink }}'>
   

Verifizierung über Fingerabdruck und Subressourcenintegrität (SRI)

Subressourcenintegrität (SRI ) ist eine Sicherheitsfunktion, mit der Browser überprüfen können, ob die von ihnen abgerufenen Ressourcen ohne Manipulation bereitgestellt werden. Gohugo verwendet dieses Future in der Extended Version (hugo*extended.exe) mit der Funktion Fingerprint . Beim erzeugen der statischen Html-Seite werden im Verzeichnis ./resources/_gen/assets/scss/sass/ die entsprechenden Dateien (*.content, *.json) angelegt.

 # Beispiel ohne Integritätstest
 {{ $stylemain := (resources.Get "sass/main.sass") 	| toCSS }}
 <link rel="stylesheet" type="text/css" href='{{ $stylemain.Permalink }}'>


 # Beispiel mit Integritätstest
 {{ $stylemain := (resources.Get "sass/main.sass") 	| toCSS | fingerprint "sha256" }}
 <link rel="stylesheet" type="text/css" href='{{ $stylemain.Permalink }}' integrity='{{ $stylemain.Data.Integrity }}' crossorigin="anonymous">
   

Beispiel scss - Sassy Sass

Anlegen eines Stylesheets für die Hintergrundfarbe.

 body{
	background-color: #AAAAAA;
 }

Einbinden der Stylesheetdatei *.scss im Kopf deiner Html-Datei.

 # Einfach
 <link rel="stylesheet" type="text/css" href='{{ (resources.Get "sass/template.scss" | toCSS).Permalink }}'>	

 # Oder kompliziert mit Fingerprint	
 {{ $sassTemplate := resources.Get "sass/template.scss" }}
 {{ $style := $sassTemplate | resources.ExecuteAsTemplate "mystyle.css" . | resources.ToCSS }}
 <link href="{{ $style.RelPermalink }}" rel="stylesheet">

Hinweis: Durch die Funktion resources.ExecuteAsTemplate "mystyle.scss" wird die Datei mystyle.css im abschließenden Verzeichnis ./public erzeugt.

Beispiel sass - Syntactically Awesome Style Sheet

Anlegen der folgenden Dateien im Verzeichnis: */themes/<themename>/assets/sass/

 body
	margin: 0
	font-family: Helvetica, sans-serif
	background-color: var(--Farbe_Body)

 html
	--Farbe_Body: #FFFFFF 

 @import "variables"
 @import "base" 

Einbinden der Datei main.sass im Kopf deiner Html-Datei.

 # Einfach
 <link rel="stylesheet" type="text/css" href='{{ (resources.Get "sass/main.sass" | toCSS).Permalink }}'>

 # Oder kompliziert mit Fingerprint	
 {{ $mainSassFile := "sass/main.sass" }}
 {{ $styles := resources.Get $mainSassFile | resources.ExecuteAsTemplate $mainSassFile . | resources.ToCSS | resources.Fingerprint "sha512" }}	
 <link rel="stylesheet" type="text/css" href="{{ $styles.RelPermalink }}" integrity="{{ $styles.Data.Integrity }}">

Beachte: Gelegentlicher Vorrang von Style Sheet in anderen Dateien (z.B. static/deinestyle.css).

Weitere Infos: sasswiki , sassconvert , SRI , SASS

Stichworte (tags)

• gohugo
• sass
• scss
• css
• fingerprint
• sri