CSS & SASS

CSS Tags

<style>/* CSS code here */</style>
<link rel="stylesheet" name="myStyles" href="myStyles.css">

The name attribute is optional and for humans only.
W3: HTML5 link
MDN: link

Styling Guidelines

The more of these “best-practices” you follow, the easier your job will be.

  1. Style the smallest view first. Work outward, pulling the view wider until something gets ugly, create a media query, and fix it.
  2. The design dictates the breakpoints, NOT the device size. Popular device sizes change constantly, better to make the design expand to fit everything.
  3. Work from the outside of the page and work your way-in so you can inherit as much as possible and add only what’s needed.
  4. Define the default font-style as a % value and assign it to the body tag so users can scale. All measurements in the document should be defined with “EM” values (accept line widths, use “px”).
  5. Media Queries should always be defined with EM values.

CSS Rule Anatomy

css-rule-anatomy

CSS Selectors

Selector Examples Name Notes
> a > b
a > b > c
Child Matches when element B is one level below (the child) of element A.

SASS and Compass

SASS and Compass

Demos and Tutorials

Social Media CSS Buttons
CSS Table Styles

SASS Mixins and CSS Examples

Center Vertical
Center Horizontal
Gradients
Reset

Fix Margin Collapsing


// Method 1:
#inner
{
    display:inline-block
}

// Method 2:
#inner
{
    position: absolute;
}

// Method 3
#outer
{
    border: solid 0 transparent;
}

Clear Fix

.group:after {
    content: "";
    display: table;
    clear: both;
}

Border Radius

Example mixin definition:

@mixin border_radius( $tl, $tr, $br, $bl )
{
    -webkit-border-top-left-radius: $tl;
    -webkit-border-top-right-radius: $tr;
    -webkit-border-bottom-right-radius: $br;
    -webkit-border-bottom-left-radius: $bl;
    -moz-border-radius-topleft: $tl;
    -moz-border-radius-topright: $tr;
    -moz-border-radius-bottomright: $br;
    -moz-border-radius-bottomleft: $bl;
    border-top-left-radius: $tl;
    border-top-right-radius: $tr;
    border-bottom-right-radius: $br;
    border-bottom-left-radius: $bl;
}

Font Size

Example mixin definition:

@mixin font-size($size: 1, $line: $size * 1.5)
{
    font-size     : ($size * 16) + px;
    line-height   : ($line * 16) + px;
    font-size     : $size + rem;
    line-height   : $line + rem;
}

Example use:

@include font-size(1);
@include font-size(1, 2.1);

Transitions

Example mixin definition:

@mixin transition
{
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

Rotate

Example mixin definition:

@mixin rotate( $degree ){
    behavior:url(-ms-transform.htc);
    -webkit-transform: rotate(#{$degree}deg);
    -moz-transform:    rotate(#{$degree}deg);
    -ms-transform:     rotate(#{$degree}deg);
    -o-transform:      rotate(#{$degree}deg);
    transform:         rotate(#{$degree}deg);
}

Example use:

@include rotate( 5 );
@include rotate( -5 );

Breakpoints

Example mixin definition:

@mixin breakpoint( $name )
{
    // If the key exists in the map
    @if map-has-key( $breakpoints, $name )
    {
        // Prints a media query based on the value
        @media
        #{
            inspect( map-get( $breakpoints, $name ) )
        }
        {
            @content;
        }
    }
    // If the key doesn't exist in the map, throw an error.
    @else
    {
        @warn "No value found from '#{$breakpoint}'. Please make sure it is defined in the '$breakpoints' map.";
    }
}

Example map definition:

$breakpoints: (
    'small':     'min-width: 599px', // small-tablet
    'medium':    'min-width: 767px', // tablet
    'large':     'min-width: 1023px', // small screen
    'larger':    'min-width: 1280px', // widescreen
    'largest':   'min-width: 1920px', // HDTV
);

Example use:

@include breakpoint( small ){ ... }

Box Sizing Border Box

Example mixin definition:

@mixin box-sizing
{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    &:before {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    &:after {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
}

Example use:

@include box-sizing;

Box Shadow

Example SASS mixin definition:

@mixin box-shadow( $values )
{
    -webkit-box-shadow: $values;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
    -moz-box-shadow:    $values;  /* Firefox 3.5 - 3.6 */
    box-shadow:         $values;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

Example use:

@include box-shadow( 1px 1px 1px 1px rgba(0,0,0,0.5) );

Border Radius

Example SASS mixin definition:

@mixin border-radius ( $tl, $tr, $br, $bl )
{
    -webkit-border-top-left-radius: $tl;
    -moz-border-radius-topleft: $tl;
    border-top-left-radius: $tl;
    
    -webkit-border-top-right-radius: $tr;
    -moz-border-radius-topright: $tr;
    border-top-right-radius: $tr;
    
    -webkit-border-bottom-right-radius: $br;
    -moz-border-radius-bottomright: $br;
    border-bottom-right-radius: $br;
    
    -webkit-border-bottom-left-radius: $bl;
    -moz-border-radius-bottomleft: $bl;
    border-bottom-left-radius: $bl;
}

Example use:


@include border-radius ( 5px, 10px, 5px, 0 );

Check For a SASS Variable

$some_variable: 5;
@if variable-exists(some_variable) {
    /* I get output to the CSS file */
}
@if variable-exists(nonexistent_variable) {
    /* But I don't */
}

Style Lists

See Styling Ordered List Numbers

ol,
ul
{
    counter-reset:li;
}
ol > li,
ul > li
{
    position: relative;
    margin: 0 0 0px 2em;
    list-style: none;
}
ol > li:before,
ul > li:before
{
    content: counter(li);
    counter-increment: li;
    position: absolute;
    left: -2em;
    width: 2em;
    margin-right: 8px;
    font-weight: 600;
    text-align: center;
}
ul > li:before
{
    content: "\00B7";
    counter-increment: none;
}
ol > li:after
{
    content: '.';
    position: absolute;
    left: -0.5em;
    top: 0;
    font-size: 1.4em;
    line-height: 0.77em;
}
li ol,
li ul
{
    margin-top:6px;
}
ul ul li:last-child,
ol ol li:last-child
{
    margin-bottom:0;
}

Responsive Images

img.responsive
{
    max-width: 100%;
    -ms-interpolation-mode: bicubic;
}

SASS

String Interpolation

$color: "red";
$content: "This color is #{$color}";

// Using the variable:
p {
    content: $content;
}

If Else

@mixin backgroundTheme( $theme )
{
    $color: #000000;
    @if $theme == 'light'
    {
        $color: #DDDDDD;
    }
    @else if $theme == 'darker'
    {
        $color: #BBBBBB;
    }
    background-color: $color;
}
@mixin backgroundTest( $level: 0, $flag: 0 )
{
    background-color: #FFFFFF;
    @if $level == 0
    {
        background-color: #000000;
    }
    @else if $level == 1
    {
        background-color: #BBBBBB;
    }
    @else if $level == 2 and $flag == 1
    {
        background-color: #DDDDDD;
    }
    @else if $level == 3 or ($level == 4 and $flag == 1)
    {
        background-color: #E0E0E0;
    }
}

unquote

The SASS unquote method removes quotes from a string value. This allows (among other things) for a single mixin parameter to represent a dynamic list of property values.

For example, the following mixin builds a declaration of vendor-prefixed box-shadow properties by using unquote to convert a string variable into a dynamic list of property values.

@mixin box_shadow( $settings )
{
    -webkit-box-shadow: unquote( $settings );
    -moz-box-shadow:    unquote( $settings );
    box-shadow:         unquote( $settings );
}

/* Example use cases: */
.box-shadow-a { @include box_shadow( '0px 1px 1px #000000' ); }
.box-shadow-b { @include box_shadow( 'inset 0px 1px 1px -1px rgba(0, 0, 0, 0.1)' ); }
.box-shadow-c { @include box_shadow( '0px -1px 1px rgba(255, 255, 255, 0.3)' ); }

Detect Your SASS Version

sass -v

Get The Latest SASS Version

sudo gem update sass

Compass

Get Compass with Xcode Command Line Tools

On Apple machines the developer package Xcode Command Line Tools should be installed. It is part of the core apple SDK and comes with a number of useful tools.

Open Terminal.
Check for an existing Xcode install by attempting to run the gcc compiler command line tool included with Xcode:

gcc --version