CSS: Sass

#Install and Initialize Sass

##Install Sass App

To install the Sass app:

npm install node-sass -g

-g is the global install. Leave it off to install in a single directory.

You only need to do a global install once.

##Create a New Project With Sass

Make a new directory, change into the new directory, then initialize Sass:

node-sass style.scss style.css -w

This creates a file style.scss in your directory. style.css is not yet created. To create style.css, open style.scss type anything, and save. style.css should then be created.

Write your CSS in style.scss. Don't make any changes in style.css.

##Install Sass in an Existing Project

Branch your existing project:

git branch _new-branch_

Move to the new branch:

git checkout _new-branch_

Rename style.css to style.css.

mv style.css style.scss

Now initialize Sass:

node-sass style.scss style.css -w

Open style.scss, write something, and save. Your old style.css file should now be style.scss, where you will write your CSS. A new file style.css will be created. Don't make any changes in style.css.

#Using Sass See http://sass-lang.com/guide.

Your @import lines should be after your variables, if the partials reference the variables.

Mixins and imports are the same thing (partials), except that imports are a separate file and mixins are in the same file. Also you can pass a variable into a mixin but not to an import.

In JavaScript a mixin is similar to a function but not the same.

A mixin combines a partial (@) and a variable ($).

@mixin myMixin($argument) {
  _CSS here_
}

Don't put selectors (e.g., h1) in a mixin. Just put in properties.

You can then pass a value to the argument:

.box { @include border-radius(10px); }

Multiple parameters can be used:

@mixin myMixin($border-top, $border-right, $border-bottom, $border-left) {

Variables can be local (inside the mixin) or global (declared outside the mixin).

Mixins can have defaults. Then if you don't pass a value, it fills in the default. Good for multiple arguments:

@mixin myMixin($border-top: 10px, $border-right: 10px, $border-bottom: 10px, $border-left: 10px) {