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

http://jsfiddle.net/axax06/dhy6hpdc/6/

Getting Started

LESS http://lesscss.org

npm install -g less

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

gem install sass

gem install scss

Netbeans

Alternativen

JSS (css über js) https://github.com/jsstyles/jss
Stylus https://github.com/LearnBoost/stylus
CSS-crush https://github.com/peteboere/css-crush

Zukunft?

CSS4 http://www.w3.org/TR/selectors4/

[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

Made with Slides.com