Intro to Sass

Since we are beginning to make larger websites, it makes sense to break up our projects into parts and extend functionality and reusability with Sass!

---

What is Sass?

• Sass: Syntactically Awesome Style Sheets
• Sass is a preprocessing language for CSS
  • There are many other preprocessor languages out there (LESS, Stylus, etc)

As stylesheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can help. Sass lets you use features that don't exist in CSS yet like variables, nesting, mixins, inheritance and other fun things.

• It helps us develop CSS much more quickly and efficiently

.sass versus .scss

There are two ways of writing Sass. Using the .sass extension and syntax or using the .scss extension and syntax.

When Sass first came out it used only the .sass extension - the syntax of which meant that you couldn't use ; or { } in the code itself, as the language relied on indentation only to be compiled properly. This was problematic for people with existing projects, that had tons of CSS - which meant less people were switching to using Sass.

The solution

Sass then came out with the .scss extension which allowed for regular css to be placed in a .scss file. This meant for existing projects, only the files themselves have to be renamed.

http://thesassway.com/editorial/sass-vs-scss-which-syntax-is-better

---

Benefits of using Sass

• Sass can concatenate and compress your styles for you, so you only have to attach one stylesheet and that means less requests to a server
• Variables in Sass make your code more consistent ( you can set up a particular set of colors at the beginning and use them throughout your project )
• Helps to make your code more modular, because you can break things down into smaller parts

---

Setup

A .scss file is compiled into .css using a compiler. This compiler can be a command line tool like Jekyll or it could be a GUI application like Prepros or Livereload. A compiler looks for the .scss extension, and compiles any Sass files into CSS for us - usually on save, or when we run a compile command explicitly.

.scss  ➡  compiler(Prepros/Jekyll)  ➡  .css

Prepros

To set up prepros simply create your folder structure and import statements first, then drag the whole project folder into Prepros. Prepros should automatically compile your style.scss file for you into a .css file. This will happen once you make a change to any .scss file in your project - since Prepros is now watching your project folder.

Also don't forget to include the prepros.cfg and *.css.map file in your .gitignore file when commiting to Github. This way you dont commit the created configuration file that Prepros makes to watch your folder for changes.

File Structure & Partials

We usually break up our styling into modular parts, so that we can find things more easily, and make items reusable.

Your folder structure for a Sass project will look something like this:

index.html
sass/
  └ style.scss    ⬅︎ This file is compiled
  └ _base.scss
  └ _mixins.scss
  └ components/
    └ _main.scss
css/
  └ style.css     ⬅︎ This file is generated by the compiler

---

Partials

The sass directory contains what are called partials, which are .scss files that begin with an _ (underscore).

For example: _mixins.scss, _base.scss, and _main.scss are all partial files.

The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file.

Importing Partials

Partials are imported into our style.scss file using @import statements.

style.scss

@import 'base';
@import 'mixins';
@import 'components/main';

Notice when you use an @import statement, you don’t need to include the _ (underscore) in the file name that you are importing.

You'll notice that the only file that is compiled into CSS is the style.scss. This is the only file that the compiler will actually turn into CSS in this example because it's the only file that is not a partial.

---

Variables

• Variables are placeholders for storing information that you want to reuse throughout your styles
• You can store things like colors, font-families, or any css value you think you might want to reuse
• Sass uses the $ symbol to declare variables

Only variable declarations will go into _base.scss.

_base.scss

// Colors
$blue: #3498db;
$dark-blue: #2980b9;
$grey: #aaaaaa;
$grey-dark: #666666;
$white: #fff;

// You can use variables inside variables
$primary: $blue;
$secondary: $grey;

// Font Families
$helvetica: Helvetica, Arial, sans-serif;

How do we use a variable?

In your _main.scss file you would write some normal CSS. In place of a color you delcared you might use a variable instead. This would mean if later on you want to change the color - you would only have to do it in one place and it would update everywhere in your styles that you have used the color variable.

Remember that we declared $helvetica in our _base.scss file already?

In _main.scss you might write:

html{
    font-family: $helvetica;
}

Which would compile to:

html {
  font-family: Helvetica, Arial, sans-serif;
}

---

Nesting

When writing HTML you've probably noticed that it has a clear nested and visual hierarchy. CSS, on the other hand, doesn't. Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML.Never nest your selectors more than 2 levels deep to avoid overly-specific selectors.

In your _main.scss for example:

.border{
  border: 1px solid #ccc;
    p{
      color: red;
    }
}

Which would compile to:

.border{
  border: 1px solid #ccc;
}

.border p{
  color: red;
}

We can also append nested selectors in Sass using the & symbol just before it:

a{
  text-decoration: none;
  &:hover{
    text-decoration: underline;
  }
}

Which would compile to:

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

---

Mixins

Mixins let you define common properties once, and then re-use them over and over again. Mixins are defined using @mixin and you can make multiple css declarations within a mixin. To use a mixin in your styling simply use @include followed by the mixin name.

We place all our mixins for the site in the _mixins.scss partial, an example of that might be for a button style, optionally you can also pass arguments to mixins so that they are resuable:

@mixin button($bg-color){        //⬅︎ The argument passed is in the round brackets
  display: inline-block;
  margin: 1em;
  padding: .5em 1em;
  border-radius: 3px;
  text-decoration: none;
  color: #fff;
  background: $bg-color;         //⬅︎ It gets used within the mixin here
}

Then you can use the mixin in your _main.scss:

.primary-btn{
  @include button(#2980b9);   //⬅︎ When we use the mixin we need to give it a bg-color
}

Which would compile to:

.primary-btn{
  display: inline-block;
  margin: 1em;
  padding: .5em 1em;
  border-radius: 3px;
  text-decoration: none;
  color: #fff;
  background: #2980b9;       //⬅︎ This is where that color argument outputs
}

---

Extend

This is one of the most useful features of Sass. Using @extend lets you share a set of CSS properties from one selector to another. It helps keep your Sass very DRY.

In your _main.scss you might have a class for border, which you can extend to other selectors:

.border{
  border: 1px solid #ccc;
}

// Extend
ul{
  @extend .border;
}

Which would compile to:

.border, ul {
  border: 1px solid #ccc;
}

---

Helpful Links

• Get Started with SASS
• SASS Extended Documentation
• How to Structure a SASS Project

Helpful Things for writing Sass

• Tiffany's Favourite Base/Mixins
• Getting Started with Sass - Presentation by Tiffany Tse