sass.md

##SASS SYNTAX ###INSTALL SASS

sudo gem install sass

###CHECK SASS VERSION

sass -v

####CONVERT SASS FILES TO CSS

sass --update <folder>

####WATCH FOR UPDATES ON SASS FILES AND CONVERT THEM TO CSS

sass --watch <folder>

###USING SASS VARIABLES Numbers, strings, colors, booleans, null, lists.

$myVar: .25in;
$myStr: 'lalalalala';
$myColor: #666;
$myBool: false;
$myVar: null;
$myList: 1px solid black;

###NESTED STYLES

.content{
  (styles)
  p{
    (some more styles)
  }
  a{
    (yet more styles)
    &:hover{
      (hover link styles)
    }
  }
}

###MIXINS

@mixin myMixin{
  font-size: 18px;
  background: white;
} 

.myStyle{
  @include myMixin;
}

###OPERATORS

$gender: boy;
$myColor:if($gender=='boy',#00f,#f00);
$basepadding: 10px;
$basethickness: 4px;

#mypara{
  color: $myColor + #00f;
  border: ($basethickness + 10)/2 solid $myColor;
  padding: $basepadding basepadding+20;
}

###MIXINS AND ARGUMENTS

// using regular arguments 
@mixin customBorder ($width, $color, $style) {
    border: {
        width: $width;
        color: $color;
        style: $style;
    }
}

// using named arguments with defaults
@mixin customBorder2 ($width: 1px, $color: black, $style: solid) {
    border: {
        width: $width;
        color: $color;
        style: $style;
    }
}

###BUILT IN LESS FUNCTIONS

@mixin border-radius($radius: 5px) {
    -mox-border-radius: $radius;
    -webkit-border-radius: $radius;
    -ms-border-radius: $radius;
    border-radius: $radius;
}

// Color functions
$color: navy;
h1 {
    color: $color;
    background-color: grayscale(invert($color));
}
h2 { 
    color: lighten($color, 20%);
}
h3 {
    color: lighten($color, 30%);
}
h4 {
    color: lighten($color, 40%);
}

#mypara {
    @include border-radius;
    border-color: hsl(hue($color), 45%, 60%);
    border-width: 2px;
    border-style:solid;
    padding: 10px;
}

###OUTPUT FORMATTING

• nested - default format, indented
• expanded - most human-friendly readable format
• compact - CSS output is condensed, but still readable
• compressed - minimized output, suitable for production environments

--update styles.scss --style expanded

###IMPORTING EXTERNAL FILES

// import the SASS definitions used in this style sheet
@import "import_me.scss";