SASS – Hack CSS like a boss – Maps

View Github Repository Open presentation in a new window

pwcberry

See all presentation from pwcberry

SASS – Hack CSS like a boss – Maps

0 0

melbcss-fasttalk-sass

Fast Talk presentation for Melb CSS on 2 July 2014

On Github pwcberry / melbcss-fasttalk-sass

SASS

Hack CSS like a boss

SASS: Introduction

  • Pre-processor
  • Enhances CSS with programming idioms
  • Originally a Ruby Gem
  • Libsass: compiler written in C
  • Syntactically Awesome StyleSheets

Variables

    
        $width: 1024px;

        .page-content {
            width: $width;

            .section-header {
                font-size: 1em;
            }
        }

Operators

String concatenator

    
        $icon-code: "0030";

        .icon-help {
            &:after {
                content: "\u" + $icon-code;
            }
        }

Mixins

    
        @mixin border-radius($radius) {
            -webkit-border-radius: $radius;
            -moz-border-radius: $radius;
            -ms-border-radius: $radius;
            border-radius: $radius;
        }

        .panel {
            @include border-radius(3px);
        }

Maps

    
        $font-stack ($font-family: 'Helvetica, Arial', $font-size: 20px);
    

    
        @mixin set-font($font-family, $font-size) {
            font-family: $font-family;
            font-size: $font-size;
        }

        h1 {
            @include set-font($font-stack);
        }

Lists

    
       $panel-shadow (2px 2px 2px rgba(0,0,0,0.2));

       .panel {
            @include box-shadow($panel-shadow);
       }

Directives

@if

    
        @mixin set-size($value) {
            @if $value == 'monster' { font-size: 10em }
            @if $value == 'mouse' { font-size: 2em }
            @else  { font-size: 4em }
        }

        h1 {
            @include set-size('monster');
        }
    

    
        h1 { font-size: 10em;}

@each

    
        @each $beer in golden, amber, dark {
            .#{$beer}-beer-icon {
                background-image: url('/icons/beers/#{$beer}.png');
            }
        }
    
 
    
        .golden-beer-icon {
            background-image: url('/icons/beers/golden.png');
        }
        .amber-beer-icon {
            background-image: url('/icons/beers/amber.png');
        }
        .dark-beer-icon {
            background-image: url('/icons/beers/dark.png');
        }

@extend

    
        .error {
            border: 1px #f00;
            background-color: #fdd;
        }
        .seriousError {
            @extend .error;
            border-width: 3px;
        }
    

    
        .error {
            border: 1px #f00;
            background-color: #fdd;
        }
        .seriousError {
            border: 1px #f00;
            background-color: #fdd;
            border-width: 3px;
        }

Built-in Functions

  • opacify
  • transparentize
  • mix
  • saturate
  • lighten

SASS is bundled with

Ruby on Rails

Jekyll

Compared with LESS

  • LESS doesn't have data types
  • LESS doens't have loops, per se (recursion)

Frameworks

  • Compass
  • Bourbon

Front-End Dev Tools

On Node.JS:

Resources

sass-lang.com

Compass

Bourbon

libsass

Ruby installer for Windows

Thanks!

Twitter: @pwcberry

http://travelsincode.com/melbcss-fasttalk-sass/