SASS

Syntactically Awesome Stylesheets!

What is Sass?

Sass is an extension language of CSS, meaning it has all the properties of CSS and more!

Stylesheets can get extensive and complex quickly with vanilla CSS. Sass helps us to keep our styles organized and DRY!

We use the .scss file extension when creating new sass files to maintain the css syntax.

Variables

Like JavaScript, we can define variables and reuse the values of those variables throughout our stylesheet. To define a variable using Sass, we start with the $ symbol.

$fonts:  Helvetica, sans-serif; // defining our variables
$light-blue: #17d0ff;
$div-padding: 5% 10%;

body {
  margin: 0;
  background-color: $light-blue; // setting the value of a property
}

.container {
  margin: 0 auto;
  padding: $padding;
}

h1 {
  font: 40% $fonts;
}

Nesting

One of the main features of Sass is that it allows us to nest our selectors according to our HTML markup!

This can be very powerful when we want to protect certain style selectors without attaching classes to children of elements.

//example.html

<div class="mid">
  <h3>Checkout Sass!!</h3>
  <ul>
    <li class="list">What's Sass?</li>
    <li class="list">Styling With Sass!!</li>
    <li class="list">Who uses Sass?</li>
  </ul>
</div>
<div class=bottom>
  <h3>Keep up with Sass!!</h3>
</div>

.mid {
  margin: 0 auto;
  h3 {
    font: 20px Helvetica;
    font-size: 200%;
  } 
  ul {
    margin: 0;
    .list {
      display: inline-block;
    }  
  }
}

.bottom{
  h3 {
    font: 6em "Open Sans", Sans-serif;
  }
}

Here we have some simple HTML where some elements are nested inside of others.

In our SCSS file, we are able to select specific elements inside the context of its parent. Protecting it from any cascading styles.

Partials And Import

Sass gives us the ability to partial snippets of our selectors into different files, keeping things modularized and easy to reference. The common naming convention of these files begins with an underscore(_).

// _partial.scss

html, body {  
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}

div {
  padding: 10px, 20px;
}

So, if we want to include the above partial into another stylesheet, we can use the @import option!

// main.scss

// remember the underscore and omit .scss file ext.
@import '_partial'
 
.navbar {
  backround-color: 'green';
  ul {
    margin: 0 0 2em 0;
    padding-left: 1em;
  }
}

// compiled css

html, body {  
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}

div {
  padding: 10px, 20px;
}

.navbar {
  backround-color: 'green';
  ul {
    margin: 0 0 2em 0;
    padding-left: 1em;
  }
}

Although @import is not native to Sass, it helps us include partials into other stylesheets.

Always remember to import the partial with the underscore and without the file extension.

Mixins

Another way Sass helps us to keep our stylesheets DRY is with the @mixin directive!

Think of a mixin as a named block, predefining a certain set of style attributes that we can use in other selectors when we want them!

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

.container {
  @include border-radius(10px); // including mixin, passes 10px
}

.footer {
  @include border-radius(20px); // including mixin, passes 20px
}

Extends

A highlighted feature of Sass is the @extends directive!

Using @extends allows you to share the properties of one selector to another.

.message {
  border: 1px solid red;    
  padding: 5px;
  color: blue;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}


// compiled CSS

// compiled css
.message, .success, .error {
  border: 1px solid red;    
  padding: 5px;
  color: blue;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

Operators

Sass allows us to do math operations in our stylesheets! The type of operators available to us are mulitply(*), divide(/), add(+), subtract(-) and modulus(%).

.row {
  display: block;
  height: 125px * 50px / 100%;  // converts px to % => 62.5%
}

.container {
  display: inline-block;
  width: 1em + (2em * 3);  // compiles to 7em
}

p:after{
  content: "I own #{2 + 4 - 3} cars"; // `I own 3 cars`
}