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
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?
[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
