Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: 27800774d3
Fetching contributors…

Cannot retrieve contributors at this time

387 lines (264 sloc) 8.343 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

  • Others

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:

{{{

}}}

2) Add less.js library:

{{{

}}}

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

Jump to Line
Something went wrong with that request. Please try again.