Let's get SASSy!

sass_spike.markdown

Introduction

• What is SASS?
• Why SASS?
• Resources: -- Sass Docs -- The SASS Way

Set-up

-Clone down this repo https://github.com/cmacaulay/sass-spike.git bundle rake db:setup rails s

Lesson:

Open up the app and navigate to /artists What do you think? Pretty ugly. Let's style.

Make a change:

• Change your application.css file to application.scss Why can we do this? SASS = Sassy CSS

Preprocessing

Sass lets you use features that don't exist in CSS yet like:

• variables
• nesting
• mixins

Your preprocessed Sass file and save it as a normal CSS file that you can use in your web site.

CSS COMPATIBLE
Sass is completely compatible with all versions of CSS. We take this compatibility seriously, so that you can seamlessly use any available CSS libraries.

Variables!

What are some of the most frustrating parts of styling with CSS? With SCSS you can save your variables -- amazing! You can store things like colors, font stacks, or any CSS value you think you'll want to reuse. Sass uses the $ symbol to make something a variable. Here's an example:

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

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

When the Sass is processed, it takes the variables we define for the $font-stack and $primary-color and outputs normal CSS with our variable values placed in the CSS. This can be extremely powerful when working with brand colors and keeping them consistent throughout the site.

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

Nesting!

Nesting is not a new concept, and when it comes to SASS, we care about nesting CSS collections. For example: when you're styling a navbar, there are other html elements nested within it - you've got your unordered lists, you've got your links, you've got your brand. Styling your navbar in pure CSS can often take up many lines of code.

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

With SASS you are able to nest CSS selectors (amazing!) so the above code, could be transformed like this:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Imports & Partials

A few changes for your stylesheets: What you're probably used to in your application.css file looks like this:

 *= require_tree .
 *= require_self

What you're going to see in your application.scss file is going to look more like this:

/* Bourbon */

@import "materialize";
@import "bourbon";
@import "base/base";
@import  "neat/neat";

/* CSS Styling */
@import "basics";
@import "nav";
@import "user_dashboard"

Partials can be imported into specific stylesheets that they're needed to, and work very similarly to view partials.

Mix-ins

You can even pass in values to make your mixin more flexible. A good use of a mixin is for vendor prefixes.

Here's an example for border-radius:

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

To create a mixin you use the @mixin directive and give it a name. We've named our mixin border-radius. We're also using the variable $radius inside the parentheses so we can pass in an argument of whatever we want. After you create your mixin, you can then use it as a CSS declaration starting with @include followed by the name of the mixin.

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

When your CSS is generated it'll look like this:

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}