Saturday 15 March 2014

SCSS & Sass

SCSS & Sass

SCSS and Sass are preprocessing languages which are compiled to CSS, resembling Haml a bit in that they make writing code easier, and provide quite a bit of leverage in doing so. Individually SCSS and Sass come from the same origin however they are technical different syntaxes.
Sass, Syntactically Awesome Stylesheets, came first and is a strict indented syntax. SCSS, Sassy CSS, followed shortly after providing the same firing power of Sass but with a more flexible syntax, including the ability to write plain CSS.

Installation

As with Haml, SCSS and Sass are compiled using Ruby therefore Ruby needs to be installed to produce CSS files. Please follow the directions from before to install, or ensure Ruby is installed.
Once Ruby is installed the gem install sass command needs to be run from the command line to install SCSS and Sass.
  1. gem install sass
Files written in SCSS or Sass need to have the .scss or .sass file extensions respectively. To convert either of these file types to .css the following sass command needs to be run.
  1. sass styles.sass styles.css
The command above takes the styles.sass Sass file and compiles it to the styles.css file. As with Haml, these file names are paths and need to be executed respectively. The above command works when those files reside within the directory from which the command is run, should the files reside outside of the directory their path needs to be explicitly stated within the command.
Should changes to a file be ongoing Sass can watch the file and recompile the CSS every time a change takes place. To watch a Sass file the following sass command may be run.
  1. sass --watch styles.sass:styles.css
Additionally, instead of compiling or watching individual files, Sass is capable of compiling and watching entire directories of files. For example, to watch an entire directory of Sass files and convert them to CSS the sass command below may be run.
  1. sass --watch assets/sass:public/css

Converting Files from SCSS to Sass & Vice Versa

On top of being able to convert SCSS and Sass files to CSS you can also convert files from SCSS to Sass and vice versa. To do so the Sass commands below may be used to convert a SCSS file to Sass, and then a Sass file to SCSS respectively.
  1. # Convert Sass to SCSS
  2. sass-convert styles.sass styles.scss
  3. # Convert SCSS to Sass
  4. sass-convert styles.scss styles.sass

Syntax

As previously mentioned the primary difference between SCSS and Sass is their syntax, and their difference in severity. The syntax of SCSS isn’t much different than that of regular CSS. In fact, standard CSS will run inside of SCSS. Sass on the other hand is fairly strict, and any indenting or character errors will prohibit the styles from compiling. Sass omits all curly brackets, {}, and semicolons, ;, relying on indentation and clear line breaks for formatting.
SCSS
  1. .new {
  2. color: #f60;
  3. font-weight: bold;
  4. span {
  5. text-transform: uppercase;
  6. }
  7. }
SASS
  1. .new
  2. color: #f60
  3. font-weight: bold
  4. span
  5. text-transform: lowercase
COMPILED CSS
  1. COMIPLED SCSS & SASS.new {
  2. color: #f60;
  3. font-weight: bold;
  4. }
  5. .new span {
  6. text-transform: uppercase;
  7. }