Intro to SASS

(Syntactically Awesome Stylesheets)

What is sass?

http://sass-lang.com/​

  • Sass is a CSS Preprocessor 
     
  • Sass extends the way we compose plain-static-CSS in more dynamic way
    • ​variables, mixins & functions
       
  • After development, these special files (.sass) are then compiled into regular CSS files that all web browsers can understand

Good news

 

gem 'sass-rails', '~> 5.0'

A sass gem is installed with our rails build so we can use it immediately without adding anything new. 

$ rails new sassy
$ rails g controller Madonna index

Let's take a look inside our gemfile.

Setting up sublime

Unfortunately SublimeText doesn't come built in with Sass syntax highlighting, but it's no big deal. It's easy to install with Package Manager!

SublimeText 2  >  Preferences  >  Package Control

  • Type/choose "Install Package"
  • Type "Sass"
  • Choose the first option "Sass"
  • Look for "Package Successfully Installed" 
  • Restart Sublime
  • Rename madonna.scss to madonna.sass
  • Choose "Sass" from the language selection menu

Write some sass

Let's see how variables work.

// madonna.sass

$primary-color: #336699  

h1
  color: $primary-color
  • a dollar sign indicates a variable
  • say goodbye to curly brackets
  • properties must be indented beneath selectors

 

<!-- madonna/index.html.erb -->

<h1>Who's that girl?</h1>

View the source

Sass wrote CSS for you!

/* line 8, /sassy/app/assets/stylesheets/madonna.sass */

h1 {
  color: #336699;
}

Nesting

Nesting is the bread and butter of sass.

Each property/value pair is nested 2 spaces as is each child element.

// madonna.sass

$primary-color: #336699 
$secondary-color: #108B26
$font-stack: Arial, Helvetica, sans-serif 

h1
  color: $primary-color

ul
  li
    font-family: $font-stack
    a
      color: $secondary-color
<!-- madonna/index.html.erb -->

<h1>Who's that girl?</h1>

<h2>Madonna facts:</h2>

<ul>
  <li>"Borderline" was her first Top 10 hit.</li>
  <li>She has been a vegetarian since she was 15.</li>
  <li>Her <a href="#">net worth</a> is $500 million.</li>
</ul>

nesting Syntax error

The browser will bitch if your code is improperly nested. 

Operations

Sass allows for addition +, subtraction -, multiplication *, division /, and modulo %.

 

These operations can be performed on numbers or colors or numbers.

h1
  color: $primary-color + $secondary-color
$width: 200px

li
  width: $width/2;

Mixins

Some things in CSS are a bit tedious to write, especially with CSS3 and the many vendor prefixes that exist. A mixin lets you make groups of CSS declarations that you want to reuse throughout your site.

 

// madonna.sass

=border-radius($radius)
  -webkit-border-radius: $radius
  -moz-border-radius:    $radius
  -ms-border-radius:     $radius
  border-radius:         $radius

.box
  +border-radius(10px)
  background: $primary-color
 <!-- madonna.html.erb -->
 
 <div class="box">
  <h2>On Madonna</h2>
    <ul>
      <li>"Borderline" was her first Top 10 hit.</li>
      <li>She has been a <a href="#">vegetarian</a> since she was 15.</li>
      <li>Her net worth is $500 million.</li>
    </ul>
  </div>

Functions

Sass has a library of functions such as rbga() that converts hex code to rgba so that opacity may be set.

// madonna.sass
// convert hex to rgba so opacity may be used

$primary-color: #336699

.box
  +border-radius(10px)
  background: rgba($primary-color, 0.5)

Practice

  • Add a background color using a variable
  • Create a box2 class with a width that is 1/4 of $width
  • Style h2 using the rgba sass function
    • convert a hex code to rgba with opacity 90%

get more sass

http://thesassway.com/beginner

http://css2sass.herokuapp.com/

Made with Slides.com