Seitenbau Developer Conference

CSS Preprozessoren

Tobias Sailer

(aka Tobse)

Find me

Sass vs Less vs Stylus

Sass http://sass-lang.com/

Less http://lesscss.org/

Stylus http://learnboost.github.io/stylus/

Syntax

/* style.scss or style.less */
h1 {
  color: #0982C1;
}
/* style.sass (ohne klammern)*/
h1
  color: #0982c1
/* style.styl */
h1 {
  color: #0982C1;
}

OMG!

Keine Interpunktion!

Syntax Stylus

/* style.styl */
h1 {
  color: #C0FFEE;
}
/* ohne Klammern */
h1
  color: #C0FFEE;
  
/* ohne striche und punkte */
h1
  color #C0FFEE

CSS Variablen

(coming soon)

Variablen

@mainColor : #C0FFEE; //Sass
$mainColor : #C0FFEE; // Less
h1 { 
  color: @mainColor;
  color: $mainColor;
} 
/* Stylus */
mainColor = #C0FFEE
h1
  color mainColor

Schachteln / Namespacing

footer { 
  margin: 10px;
}
footer nav { 
  height: 25px;
}
footer nav a { 
  text-decoration: none;
}
footer nav a:hover {
  text-decoration: underline;
}

Schachteln Sass, Less und Stylus

section {
  margin: 10px;
  nav {
    height: 25px;
    a {
      text-decoration: none;
      &:hover {
        text-decoration: underline;
      }
    }
  }
}

Schachteln mit Stylus

section
  margin 10px
  nav
    height 25px
    a
      text-decoration none
      &:hover
        text-decoration underline

Mixins mit Sass

@mixin msg($borderWidth: 2px, $color: #F00) {
  border: $borderWidth solid $color;
  color: $color;
}

.generic-error {
  margin: 4px;
  @include msg();
}
.login-error {
  position: absolute;
  top: 20px;
  @include msg(5px,papayawhip);
}

Mixins mit Less

.msg(@borderWidth: 2px, @color: #F00) {
  border: @borderWidth solid @color;
  color: @color;
}

.generic-error {
  margin: 4px;
  .msg();
}
.login-error {
  position: absolute;
  top: 20px;
  .msg(5px,papayawhip);
}

Mixins mit Stylus

msg(borderWidth= 2px, color= #F00)
  border borderWidth solid color
  color color
  
.generic-error 
  margin 4px
  msg()
  
.login-error
  position absolute
  top 20px
  msg(5px,papayawhip)

Vererbung / Extend


Less & Sass & Stylus (hier mit Stylus) 
red = #E33E1E
yellow = #E2E21E

.message
  padding: 10px
  font: 14px Helvetica
  border: 1px solid #eee
.warning
  @extends .message
  border-color: yellow
  background: yellow + 70%
.error
  @extends .message
  border-color: red
  background: red + 70%
.fatal
  @extends .error
  font-weight: bold
  color: red

Vererbung Ergebnis 


.message,
.warning,
.error,
.fatal {
  padding: 10px;
  font: 14px Helvetica;
  border: 1px solid #eee;
}
.warning {
  border-color: #e2e21e;
  background: #f6f6bc;
}
.error,
.fatal {
  border-color: #e33e1e;
  background: #f7c5bc;
}
.fatal {
  font-weight: bold;
  color: #e33e1e;
}

CSS is a mess


by Jonathan Snook http://snook.ca/pages/speaking

pure CSS @import


(HAZ BAD PERFORMANCE) 
@import "header.css";
@import "bildtext.css";
@import "globalnavi.css";
@import "navigator.css";
@import "linkenavi.css";
@import "footer.css";
@import "startseite.css";
@import "sitemap.css";
@import "glossar.css";
@import "index_az.css";
@import "kontakt.css";
@import "ie-lt-8.css";
@import "ie-lt-9.css";
@import "ie-lt-10.css";
@import "suche.css";
@import "tabbar.css";
@import "accordeon.css";
@import "slider.css";
@import "recall.css";

@import Preprozessor


(YOU CAN HAZ THIS) 
@import "mixins.less";
@import "colors.less";
@import "grid.less";
@import "file.{type}";

Farben

lighten($color, 10%);
darken($color, 10%);

saturate($color, 10%);
desaturate($color, 10%);

grayscale($color);
complement($color);
invert($color);

mix($color1, $color2, 50%);

Berechnen

body {
  margin: (14px/2);
  top: 50px + 100px;
  right: 100px - 50px;
  left: 10 * 10;
}

Kontrollstrukturen

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } 
  @if 5 < 3      { border: 2px dotted; }
  @for $i from 1 through 3 {
    .item- { width: 2em * $i; }
  }
}

Hashes

/* set */
foo = {
  bar: baz,
  'baz': raz,
  '0': raz
}
/* get */
foo.bar
foo[bar]
/* komplex */

foo = 
  bar:
    baz:
      raz: 10px
      
qux = "raz"
foo["bar"].baz[qux]
// => 10px

Browser Prefixing

(Less Beispiel) 
.border-radius(@values) {
  -webkit-border-radius: @values;
     -moz-border-radius: @values;
          border-radius: @values;
}

div {
  .border-radius(10px);
}

Easy semantic Grid http://semantic.gs/

<header>...</header>
<article>...</article>
<aside>...</aside>
@column-width: 60;
@gutter-width: 20;
@columns: 12;

header { .column(12); }
article { .column(9); }
aside { .column(3); }

@media (max-device-width: 960px) {
   article { .column(12); }
   aside { .column(12); }
}

Nested Grid http://semantic.gs/

article {
   .column(9);
   ul {
    .row(9);
      li {.column(3,9);}
   }
}
aside {.column(3);}

#kittenfistbump

Base64 data-uri

/* macht aus */
data-uri('../data/image.jpg');
/* ein base64 */
url('data:image/jpeg;base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg==');

Keyframes

(Stylus Beispiel) 
$keyframe-name = pulse
@keyframes {$keyframe-name}
  for i in 0..10
    {10% * i}
      opacity (i/10)
/* outout ohne Prefixing */
@keyframes pulse {
  0% { opacity: 0;}
  20% {opacity: 0.2;}
  40% {opacity: 0.4;}
  60% {opacity: 0.6;}
  80% {opacity: 0.8;}
  100% {opacity: 1;}
}

Mixin Bibliotheken

Negatives

Fragen?

Danke!