Array
University of Oregon
Browse: Home / SASS

SASS

sass-bracketsSass and LESS are CSS preprocessors which add programming language features like variables, conditionals and functions to CSS.

0. Install Ruby

Before you start using Sass you will need to install Ruby.

Windows
Use the Ruby Installer.
Download and Run the installer. BE SURE to check “Add Ruby executables to your path.”

The installer will also install a Ruby command line powershell application, which you do not need to use– the standard command prompt window is all you need.

OS X
If you’re using a Mac, congratulations, Ruby comes pre-installed. Update with the following command:

gem update –system

Check your Ruby Install

ruby -v

I. Install SASS

Follow these instructions to install SASS using the command-line.

II. Create a SASS Project Directory

Open a Unix shell on your computer (Windows: Gitbash. Mac: Terminal).

Use the cd command to navigate to ~/Documents/repos/281/projects/p1/.

Use this command to create a new directory: mkdir sass-proj

III. Write some SASS

In Sublime, open this folder: ~/Documents/repos/281/projects/p1/sass-proj/

Create a new file named demo.scss, and paste in the following code:

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
    font: 100% $font-stack;
    color: $primary-color;
}

IV. Run SASS from the Command Line

cd into sass-proj, and enter this command to compile the SASS file:
sass demo.scss demo.css

Open demo.css in Sublime to see the result.

V. Tell SASS to Watch the File

Use this command to tell Sass to watch the file and update the CSS every time the Sass file changes:

sass --watch demo.scss:demo.css

Test this: Change the $primary-color to #aaa, and save the file. demo.css is changed automatically.

(Use control-c to interrupt SASS and return to the shell.)

VI. SASS Code Highlighting

In Sublime, run package install and search for Sass (by nathos).

VII. Learn SASS

VIII. Sass Tutorial: Build an Online vCard

The project directory for the vCard is:
~/Documents/repos/281/projects/p1/sass-proj/

  1. Install Compass. Compass is a Sass framework (i.e., Compass is an extension of Sass). It has its own compiler (instead of sass –watch, you use compass watch). It has a large collection of mixins and functions.

    OS X:

    sudo gem update --system
sudo gem install compass

    Windows Command Prompt:

    gem update --system
gem install compass
  2. Learn Compass Basics

     

  3. Configure Compass.

    cd to ~/Documents/repos/281/projects/p1/sass-proj/

    Enter this command:  compass init

    This creates a file named config.rb in the directory.

    Open config.rb in Sublime.

    Edit the config.rb code to agree with this example:

    require 'compass/import-once/activate'

http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "scripts"

output_style = :expanded
relative_assets = true
line_comments = false
  4. Compass, like Sass, will watch every file change and update the corresponding CSS files. Tell Compass to watch every file in the current directory with this command: 
    compass watch <path to project directory>

    The <path to project directory> defaults to the current directory, so the simplest way to tell Compass to watch the current directory is to run this command in the project directory, sass-proj:

    compass watch
  5. Build a vCard with Sass & Compass
    • Create four subdirectories named stylesheets, scripts, images, and sass
    • In your images folder, create a subdirectory named social
    • Acquire Assets: download these five social platform images to your images folder. Create a 150×150 headshot of yourself or your avatar, and store it in your images folder.
    • In Sublime, create a new file named index.html in the vCard project directory. Expand the Emmet package abbreviation (!) into a standards compliant HTML5 web page. Add this link element to the head section:
      <link rel="stylesheet" href="stylesheets/styles.css">
    • Complete this step in the tutorial: Scroll down to the HTML Markup heading, copy the 21 lines of markup code, and paste them into index.html. Modify the img element to connect to your headshot, and preview the vCard in Chrome.
    • Complete this step in the tutorial: In Sublime, create a new file named styles.scss in your sass directory. Scroll to the Importing Files section. Add the import statements to styles.scss. The normalize mixin requires a _normalize.scss file to be downloaded from uoregon.edu to your sass directory.

      (The underscore means that SASS won’t compile it into a new CSS file of it’s own. In SASS this is called a ‘partial’.)

    • NOTE: If you have instructed Compass to watch the project directory then, after each change you make in styles.scss, the project stylesheet (styles.css) is automatically updated. Reload the index.html web page in Chrome to see the changes.
    • Complete this step in the tutorial: Scroll to the Variables section. Add the five variables to styles.scss.
    • Complete the remaining steps in the tutorial: Five sections remain in the tutorial. Now that you know the drill, add the code for each section to styles.scss to complete the vCard project.
    • Omitted from the Tutorial: Download this fonts folder to your project directory. Add this code to styles.scss: 
      // font-face
@include font-face("ModernPictogramsNormal", font-files("modernpics-webfont.ttf", "modernpics-webfont.otf", "modernpics-webfont.woff", "modernpics-webfont.eot", "modernpics-webfont.eot?#iefix", "modernpics-webfont.svg#ModernPictogramsNormal"));
@include all-social-sprites;
  6. QR Codes

    QR code (Quick Response) is a matrix code created by Japanese corporation Denso-Wave.
    It is a two-dimensional bar code which can store up to 7kB of data, such as: plain text, mobile telephone numbers along with a SMS message, contact cards (e.g vCards), geographic information, images and other information.

    1. QR Code Generator
    2. A QR Code Tutorial

IX. LESS

LESS is a CSS preprocessor used by Twitter Bootstrap.

Beginner’s Guide to LESS (hongkiat.com)

X. CSS3 FlexBox

The vCard tutorial uses a Sass’s clearfix class (class=” cf”) to solve a classic problem involving floated elements on a page.

A CSS3 alternative is using a Flexible Box for layout.

See Using Flexible Boxes (mdn) for a description.

XI. Sass is Awesome!

Why Sass? Because Sass is Awesome! Complete this tutorial as follows:

  1. Create a new folder named awesome-demo in your p1/sass-proj/ folder.
  2. cd into awesome-demo.
  3. In Sublime, open p1/sass-proj/awesome-demo/
  4. In Sublime, create these files in awesome-demo: 
    _awesome_const.scss
awesome-style.scss
index-awesome.html
  5. Copy the code from the tutorial into the .scss files. Create a basic web page in index-awesome.html, and link it to awesome-style.css (not awesome-style.scss).
  6. Move up to the sass-proj directory: cd ..
  7. Then tell Sass to watch your awesome-demo directory:
    sass --style extended --watch awesome-demo:awesome-demo
Skip to toolbar