Heidi Uphoff edited this page Jan 19, 2017 · 15 revisions

SASS How-To Guide

This is a tutorial guide for getting started with SASS using the Koala application to fulfill the How-To Guide assignment for WEB DEVELOPMENT (CS_290_400_F2016). I've provided code samples to demonstrate each of 6 main capabilities SASS brings to CSS. This all covers the introduction material on the SASS website. To meet the assignment requirements of explaining something not well-documented, I created an example of utilizing SASS's list functions for advanced styling of a list.

What is SASS

SASS, short for Syntactically Awesome Stylesheets, is a style sheet language first released in 2006. It is a scripting language with two different types of syntaxes to choose from: the indented syntax, similar to haml, and the block syntax, similar to CSS. Indented style files have the extension .SASS and block style files have the extension .SCSS. SASS extents the capability of CSS to provide abilities more common in object-oriented programming languages such as variables, nesting/hierarchies, partials (file of code to reuse), import, mixins (code snippet to reuse throughout SASS files), inheritance, and operators for math. SASS files need to be interpreted into CSS files.

Why Use SASS

  1. CSS files for average websites are large and difficult to manage. The added abilities of SASS make it easier to develop, manage, and update large amounts of CSS code for a website.
  2. Variables make it easier to update the branding of a website. For example, I worked on a series of databases that all had nearly identical styling, except they were each branded with different colors and logos. SASS would have made this task simpler.
  3. You write less code that is better organized.
  4. You create faster websites by making fewer HTTP requests by using the @import attribute.

Start Using SASS

One way to interpret SASS files into CSS files is to install ruby, then SASS on your computer and then do so via the command line. However, a better way to get up and running is to use a special purpose application.

###Applications listed at http://sass-lang.com

  1. CodeKit (Paid)
  2. Compass.app (Paid, Open Source)
  3. Ghostlab (Paid)
  4. Hammer (Paid)
  5. Koala (Open Source)
  6. LiveReload (Paid, Open Source)
  7. Prepros (Paid)
  8. Scout (Open Source)

Koala

To get up and running with SASS using Koala:

1.Download the application from http://koala-app.com
2.Create a simple SASS file in a text edit using the code below and name it test.scss

$font-stack: Helvetica, sans-serif;

$primary-color: #333;

body {

font: 100% $font-stack;

color: $primary-color;

}

3.Place the file in a folder named test

4.Click the plus button and add the test folder to Koala koala

5.Select the scss file and then select compile koala-compile

6.Koala will create a new file named test.css which contains the translated code. Koala will be monitoring your scss file for new changes and will updated the css file automatically as the scss file updates.

SASS Examples

Variables

The use of variables in SASS is very straightforward. Use the $ sign indicate a variable label followed by a colon, the variable value, and finally a semicolon.

Example: $font-color: #333;

Variable labels then can be used throughout the SASS files. Be sure to always include the $ sign before the label. Variables are especially useful for design elements that are reused many times throughout the files or are likely to be changed throughout development. Colors are reused. Websites normally will use the exact same shade of grey throughout the site. Colors are also often changed as the design evolves during development and is vetted by stakeholders.

See example code.

Nesting

Nesting is a different way of writing CSS code. It nests child elements within parent elements like html files. This is a way for the designer to visualize the CSS code in the same way as the html code being modified. The syntax for nesting is exactly the same as CSS, except child elements are put within the two curly braces of the parent element {}.

See example code.

Partials/@import

Partials are files that contain a snipped of code to be included in another file. It's a good way to organize code that will be used in many different projects. To tell the SASS translator that a file is a partial, put a _ symbol in front of the filename.

Example: _nested.scss

The translator will not make a CSS file for the partial. If the partial is imported into another SCSS file, then the code in the partial will be translated into CSS in the second file.

Example: @import 'nested';

See example code.

Mixins

Mixins combine the concepts of partials and variables. Mixins are used for code that gets repeated often, but with different values.

Example SCSS

@mixin border-radius($radius) {

-webkit-border-radius: $radius;

 `-moz-border-radius: $radius;`

  `-ms-border-radius: $radius;`

      `border-radius: $radius;`

}

.fancy-section { @include border-radius(15px); }

CSS

.fancy-section {

-webkit-border-radius: 15px;

-moz-border-radius: 15px;

-ms-border-radius: 15px;

border-radius: 15px; }

See example code.

Inheritance

Inheritance is another SASS ability that keeps a designer from repeating their code over and over. It allows the designer to extended the CSS properties of one CSS element in another element. In other words, you can import all of the CSS properties of one CSS element into another element and then add more properties to it. To do this, type @extend within the CSS element's {} and then add your new CSS properties below it.

Example: @extend .notification;

See example code.

Operators

SASS adds basic math abilities to CSS. Use +-#/% operators for calculations in the SASS file and they will be calculated in the CSS file.

Example: width: 100px+200px;

See example code.

Advanced List Styling

I wanted to demonstrate the advanced capabilities of SASS lists by styling a HTML unordered list.

html list

In SASS, you can create lists of variables easily. The syntax looks similar to initializing arrays.

$color-list: #C0C0C0, #800000, #00FF00, #008080, #0000FF;

You can access the first element of a list, the last element of a list, or the nth element of a list with the following functions.

first($list) last($list) nth($list, 3) //this selects the 3rd item in the list

You can also loop through a list using the @for function. To loop through the example list use the following code.

@for $i from 1 through length($color-list) {

//do stuff

}

For my unordered HTML list, I matched the nth color in the #color-list with the nth item in the list using the following SASS code.

$color-list: #C0C0C0, #800000, #00FF00, #008080, #0000FF, #FF00FF, #800080, #000080, #FFFF00, #00FFFF, #FF0000, #C0C0C0;

@mixin colors { @for $i from 1 through length($color-list) { &:nth-child(#{$i}) { color: nth($color-list, $i); } } }

li { @include colors; }

The compiled CSS looks like this.

li:nth-child(1) { color: #C0C0C0; } li:nth-child(2) { color: #800000; } li:nth-child(3) { color: #00FF00; } li:nth-child(4) { color: #008080; } li:nth-child(5) { color: #0000FF; } li:nth-child(6) { color: #FF00FF; } li:nth-child(7) { color: #800080; } li:nth-child(8) { color: #000080; } li:nth-child(9) { color: #FFFF00; } li:nth-child(10) { color: #00FFFF; } li:nth-child(11) { color: #FF0000; } li:nth-child(12) { color: #C0C0C0; }

The final web document appears like this.

styled list

Download example code.

Further Reading/Bibliography

Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.