SCSS Cloud9 Installation and Primer

scss_cloud9.md

Basic SASS/SCSS Guide

http://sass-lang.com/guide

Notes

Examples of the code itself are going to be in SCSS. SCSS uses its own syntax as well as CSS's syntax. That is: all CSS, without you doing anything to it, is valid SCSS. SASS uses its own syntax.

Installation

These are the instructions for installing SASS/SCSS to your server, so you can use SASS/SCSS to compile down to CSS.

Need

• sudo privileges
• ~35 MB space

Instructions

1. Open a bash shell.
2. Run:

   $ sudo apt-get update
   $ sudo apt-get upgrade

3. Once those are done, you can run:

   $ sudo apt-get install ruby
   $ sudo apt-get install ruby-all-dev

SASS/SCSS Basics

Good news/bad news: Sass will throw compilation errors at you if your syntax is wrong--forget a semicolon, incompatible units, forgetting to terminate a block.

Fast facts

• extension: .scss or .sass
• compilation command: $ sass pathToScssFile.scss pathWhereYouWantCssOutput.css
• SCSS always compiles the colors down to the hex code for compatibility's sake. There are workarounds.

Syntax

The following is not exhaustive by any means, but hits upon some of the major points.

Comments

• Block comments: Same as CSS, ie /* comment */. Note that these will appear in the compiled CSS file.
• Line comments a la most languages: // here's a comment These will not show up in the final compiled file.

Nesting

Aka, one of the truly best and easiest things about Sass

You can nest your selectors like you do in HTML, and it behaves the same way.

Ie, say you had:

<section>
    This should be orange.
    <div>
        I want this to show up in red.
    </div>
</section>
<div>
    Screw red, I want this to be blue!
</div>

In SCSS, you'd do:

section {
    color: orange;

    // we want the <div> in our <section> to have red text
    // so that's where we put the style for it!
    div {
        color: red;
    }
}

div {
    color: blue;
}

You can use all the other selectors that way as well. Ids, classes, combinators, etc.

Variables

// Variable declarations use : instead of =
$mainColor: black;
$someString: "here's a string";

// Basically anything can be a value
$fontFamily: Helvetica;
$interpolatedString: "paint it #{$mainColor}"

body {
    background-color: $mainColor;
    fake-property: $interpolatedString;
}

// the above compiles to:
/*
    body {
        background-color: black;
        fake-property: "paint it black";
    }
*/

Important: SCSS has block-scoping, just like Java. So:

// all good here!
$someVariable: 20rem;

header {
    $newVariable: $someVariable + 15rem;
    font-size: $newVariable;
}

// the below will fail on compilation with an "undefined variable" error
p {
    border-width: $newVariable;
}

Functions

http://sass-lang.com/documentation/Sass/Script/Functions.html

Heck yes, functions! Sass has a massive built-in library. You can also define your own functions.

$baseColor: hsl(120,25%,50%);

body {
    header {
        $darkerBaseColor: darken($baseColor, 10%);
            // => hsl(120, 25%, 40%);

        background-color: $darkerBaseColor;

        border: 2px solid lighten($baseColor, 25%);
            // => hsl(120, 25%, 75%);

        color: mix($darkerBaseColor, lighten(red, 50%));
    }
}

// all of which compiles to:
/*
body header {
  background-color: #4d804d;
  border: 2px solid #afcfaf;
  color: #a6c0a6;
}
*/

Ancestor selector (oh hell yeah)

Allows you to refer to the selector of the enclosing CSS block.

a {
    // styles for all links
    &:hover {
        // styles only for links being hovered over
    }

    &.class {
        &.hover {
            // aaaaand we can just keep nesting
            // this would be for <a class="class"> when being hovered over
        }
    }

    &:visited {

    }
}

p {
    // styles here will apply to all <p>
    &.someClass {
        // styles here will only apply to <p class="someClass">

        section {
            // styles here wil only apply to the <section>s which are inside <p class="someClass">
            // etc
        }
    }
}

It's a great way to keep things really clear and organized.

LOGIC

Sweet, sweet programmaticability....

@for $index from 1 through 3 {

    $someColor: hsl(320, 90%, 70%);

    .item-#{$index} {
        $percentToDarken: $index * 10%;

        background-color: darken($someColor, $percentToDarken);
    }
}

// compiles to
/*

.item-1 {
    background-color: hsl(320, 90%, 60%);
}

.item-2 {
    background-color: hsl(320, 90%, 50%);
}

.item-3 {
    background-color: hsl(320, 90%, 40%);
}
*/