Pre-Processors

  • Verwendung von Variablen
  • Verwendung von Funktionen
  • Verschachtelungen
  • Dynamische Berechnungen
  • Verwendung von Loops / Conditions
  • Vermeidung von Wiederholungen
  • Struktur und Übersicht
  • Zeitersparnis
  • Wartbarkeit

Wozu?

SASS oder LESS

Github
SASS Stars - 4933
LESS Stars - 11499

SASS

 

  • Grösserer Funktionsumfang
  • Bedingungen
  • Wegfall von Semikolons und geschweiften Klammern

 

LESS

 

  • Einfacher zum Lernen
  • On the fly Pre-Processors
    ( für php oder js)

SCSS

LESS

Syntax

Nested Rules

CSS

LESS

Variables

CSS

LESS

SASS:   $variable

LESS:   @variable

Mixins

CSS

LESS

Functions

Demo

Getting Started

npm install -g less

SASS / SCSS http://sass-lang.com/

gem install sass
gem install scss

Netbeans

Alternativen

Zukunft?

[role="main"] {
  aside,
  #specific-article,
  .article-series
  {
    h2 {
      font-size: 2.4em;
      margin-bottom: 1em;
    }
  }
}

LESS / SCSS

[role="main"] :matches(aside, #specific-article, 
                              .article-series) h2 {
  font-size: 2.4em;
  margin-bottom: 1em;
}

CSS4

remember

LESS IS MORE

Less (Sass) Pre-Processor

By Simon Schärer

Less (Sass) Pre-Processor

  • 1,273