Skip to content

Latest commit

 

History

History
383 lines (264 loc) · 8.12 KB

csspre.md

File metadata and controls

383 lines (264 loc) · 8.12 KB

title: CSS Next - CSS Preprocessors

CSS Next - CSS Preprocessors

Lightning Talk, May 2012 - Gerald Bauer

What's CSS?

CSS => Cascading Style Sheets

Ice Breakers:

  • What's missing in CSS?
  • Are you using any CSS preprocessors?

Dynamic CSS

CSS preprocessors extend "standard" CSS with:

  • Variables
  • Functions and Operations
  • Nested Rules
  • Mixins
  • And much more (Interpolation, Conditionals, Looping, Imports, Keyword Arguments, etc.)

CSS Variables

Define variables:

$bingo-text:         white;
$bingo-background:   green;

Use variables:

.bingo {
    background-color: $bingo-background;
    color:            $bingo-text;
}

Becomes (compiled to "standard" CSS):

.bingo {
    background-color: white;
    color:            green;
}

Not just colors:

$base-font-size:   18px;
$base-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

CSS Functions and Operations

Yes, you can. Use standard math operations (+, -, *, /, and %) for numbers - even with units. For colors, use functions for changing the lightness, hue, saturation, and more.

#navbar {
  $navbar-width: 800px;
  $navbar-items: 5;
  $navbar-color: #ce4dd6;

  width: $navbar-width;
  border-bottom: 2px solid $navbar-color;

  li {
    float: left;
    width: $navbar-width/$navbar-items - 10px;

    background-color: lighten($navbar-color, 20%);
    &:hover {
      background-color: lighten($navbar-color, 10%);
    }
  }
}

Becomes (compiled to "standard" CSS):

#navbar {
  width: 800px;
  border-bottom: 2px solid #ce4dd6;
}

#navbar li {
  float: left;
  width: 150px;
  background-color: #e5a0e9;
}

#navbar li:hover { background-color: #d976e0; }

CSS Nested Rules

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

Becomes (compiled to "standard" CSS):

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border-width: 1px;
}

CSS Mixins

.slide { 
  background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);  /* Webkit (Chrome 11+) */
  background-image:    -moz-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);  /* Mozilla Firefox     */
  background-image:     -ms-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);  /* IE 10+              */
  background-image:      -o-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);  /* Opera               */
  background-image:         linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);  /* Proposed W3C Markup */
}

Use mixin for vendor "prefix-free" code:

.slide {
  @include linear-gradient(top left, #FFFFFF, #00A3EF);
}

Define mixin for reuse:

@mixin linear-gradient($pos, $start-color, $end-color) {
  background-image:  -webkit-linear-gradient($pos, $start-color 0%, $end-color 100%); 
  background-image:     -moz-linear-gradient($pos, $start-color 0%, $end-color 100%); 
  background-image:      -ms-linear-gradient($pos, $start-color 0%, $end-color 100%); 
  background-image:       -o-linear-gradient($pos, $start-color 0%, $end-color 100%); 
  background-image:          linear-gradient($pos, $start-color 0%, $end-color 100%); 
}

Reuse - yes you can. Use pre-built Mixin libraries

Bourbon includes pre-built mixins for:

  • Animations
  • Background Image
  • Background Size
  • Border Image
  • Border Radius
  • Box Shadow
  • Box Sizing
  • Columns
  • Flex Box
  • Inline Block
  • Linear Gradient
  • Radial Gradient
  • Transform
  • Transitions
  • And many more

What is Bourbon?

Bourbon is a free, open source mixin library (see github.com/thoughtbot/bourbon).

Imports

Use import directive to include libraries or your own stylesheets. Example:

@import "bourbon";    // 3rd party css mixin library 

@import "settings";   // global color settings using variables

@import "flash";
@import "navbar";
@import "button";
@import "breadcrumb";

...

Yes, you can. CSS Programming

Simple Button:

@mixin simple($base-color, $grayscale: false) {
  $color:         hsl(0, 0, 100%);
  $border:        adjust-color($base-color, $saturation:  9%,  $lightness: -14%);
  $inset-shadow:  adjust-color($base-color, $saturation: -8%,  $lightness:  15%);
  $stop-gradient: adjust-color($base-color, $saturation:  9%,  $lightness: -11%);
  $text-shadow:   adjust-color($base-color, $saturation:  15%, $lightness: -18%);

  @if lightness($base-color) > 70% {
    $color:       hsl(0, 0, 20%);
    $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
  }

  @if $grayscale == true {
    $border:        grayscale($border);
    $inset-shadow:  grayscale($inset-shadow);
    $stop-gradient: grayscale($stop-gradient);
    $text-shadow:   grayscale($text-shadow);
  }

  border: 1px solid $border;
  @include border-radius (3px);
  @include box-shadow (inset 0 1px 0 0 $inset-shadow);
  color: $color;
  display: inline-block;
  font-size: 11px;
  font-weight: bold;
  @include linear-gradient ($base-color, $stop-gradient);
  padding: 7px 18px;
  text-decoration: none;
  text-shadow: 0 1px 0 $text-shadow;
  -webkit-background-clip: padding-box;

  &:hover {
    $base-color-hover:    adjust-color($base-color, $saturation: -4%, $lightness: -5%);
    $inset-shadow-hover:  adjust-color($base-color, $saturation: -7%, $lightness:  5%);
    $stop-gradient-hover: adjust-color($base-color, $saturation:  8%, $lightness: -14%);

    @if $grayscale == true {
      $base-color-hover:    grayscale($base-color-hover);
      $inset-shadow-hover:  grayscale($inset-shadow-hover);
      $stop-gradient-hover: grayscale($stop-gradient-hover);
    }

    @include box-shadow (inset 0 1px 0 0 $inset-shadow-hover);
    cursor: pointer;
    @include linear-gradient ($base-color-hover, $stop-gradient-hover);
  }

  &:active {
    $border-active:       adjust-color($base-color, $saturation: 9%, $lightness: -14%);
    $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%);

    @if $grayscale == true {
      $border-active:       grayscale($border-active);
      $inset-shadow-active: grayscale($inset-shadow-active);
    }

    border: 1px solid $border-active;
    @include box-shadow (inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active, 0 1px 1px 0 #eee);
  }
}

Alternative CSS Preprocessors

Usage - Server Side and Client Side

Server

$ sass styles.sass styles.css

or

$ lessc styles.less > styles.css

Browser (Client-Side)

  1. Link .less stylesheets with the rel set to stylesheet/less:
<link rel="stylesheet/less" type="text/css" href="styles.less">
  1. Add less.js library:
<script src="less.js" type="text/javascript"></script>

"Official" CSS3 Variables

Upcoming Module for CSS3 Variables => dev.w3.org/csswg/css-variables

Example:

Define variables:

:root  { var-color: blue; }
div    { var-color: green; }
#alert { var-color: red; }

Use variables:

* { color: var(color); }

Includes calculations:

one   { var-foo: 10px; }
two   { var-bar: calc(var(foo) + 10px); }
three { var-foo: calc(var(bar) + 10px); }

Examples in the Wild

See Using LESS with Bootstrap Page

  • Wettpool

See Style Page

The End - Thank You

Questions? Comments?