Operations – Rachel Bull

Before we get started with learning the SASS basics you will need to install and set up Sass. I have covered this in Getting Started with SASS, where you can find out how to install Sass.

Nesting

I have previously looked at this in Getting started with SASS. Below is an example of some CSS and how it would be written in SCSS syntax. The SASS example shows how SCSS syntax allows you to embed an elements child within it’s parent selector to make the CSS easier to read.

CSS:

.container {
   ...
}

.container .heading {
   ...
}

.container .heading p {
   ...
}

.container .block {
   ...
}

Here’s the same code using SCSS syntax:

.container {
   ...

   .heading {
      ...

      p {
         ...
      }
   }

   .block {
      ...
   }
}

There also might be times when you want to add a pseudo class like :hover or :first-of-type. This can be achieved by adding the :hover inside the element it is related to with the character “&” in front of it.

Here is an example:

a {
   ...

   &:hover {
      ...
   }
}

.block {
   ...
   
   &:first-of-type {
      ...
   }
}

When you run SASS, the CSS it will generate will look something like this:

a {
   ...
}

a:hover {
   ...
}

.block {
   ...
}

.block:first-of-type {
   ...
}

Partials and Importing

Partials are SASS files that can be imported into other SASS files. This can be useful for small snippets of code which are used on specific parts of a site. A partial file is very similar to a normal CSS file except it would have an underscore in the file name. For example, a partial file could be named _partial.scss. By making a partial you can ensure the file isn’t generated into a CSS file; Instead the file would need to be included in another SASS file using the @import directive.

Here is an example of a partial file:

/* --- _partial.scss --- */

html,
p,
ul {
   margin: 0;
   padding: 0;
}

To include this partial into a file you would only need to use the ‘partial’ name without the underscore. SASS will know that the file is actually called _partial.scss Here is an example of a SASS file importing this partial:

/* --- stylesheet.scss --- */

@import 'partial';

.container {
   ...
}

The CSS file generated from this would look like the example below:

/* --- stylesheet.scss --- */

html,
p,
ul {
   margin: 0;
   padding: 0;
}

.container {
   ...
}

Extend/Inheritance

This feature allows you to share styles in different selectors. This can be useful for avoiding duplicated styling and keeping the code clean. Some great example for using this are buttons on a page, left/right arrows, for warning and error messages, etc. Basically anything that is similar in style/layout with only slight differences. We can call the code by using @extend.

Here is an example:

.arrow {
   height: 40px;
   width: 20px;
   cursor: pointer;
   background-repeat: no-repeat;
   background-size: auto 18px;
   background-position: center center;
}

.arrow-left {
   @extend .arrow;
   background: url('/images/icon/left.png');
}

.arrow-right {
   @extend .arrow;
   background: url('/images/icon/right.png');
}

This is the CSS:

.arrow,
.arrow-left,
.arrow-right {
   height: 40px;
   width: 20px;
   cursor: pointer;
   background-repeat: no-repeat;
   background-size: auto 18px;
   background-position: center center;
}

.arrow-left {
   background: url('/images/icon/left.png');
}

.arrow-right {
   background: url('/images/icon/right.png');
}

One of the main advantages of this is that it allows you to add styling to multiple selectors without having to write multiple class names.

Mixins

A mixin allows you to reuse CSS declarations throughout your site without having to rewrite them. A great example of this is block styles. Unlike the @extend function, you would have to add @mixin and remove the “.” from the selector of the styles that you wish to reuse. You can call the styles by using @include.

Here is the block example:

@mixin block-styles {
   padding: 10px;
   border-bottom: 1px solid #EAEAEA;

   p {
      font-size: 14px;
      color: #333333;
   }
}

.block {
   @include block-styles;
   width: 100%;
}

Here is the CSS which would be generated:

.block {
   padding: 10px;
   border-bottom: 1px solid #EAEAEA;
   width: 100%;

.block p {
   font-size: 14px;
   color: #333333;
}

You can also use values to make your mixin more flexible. The value can be added to any style within the mixin and declares in the @include. An example of this is below:

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

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

Operators

Sass allows you to be able to use standard math operators which are +, -, *, / and %. It also allows you to convert pixels into percentages while doing so. This can be useful for calculating widths for fluid layouts.

Here is an example:

.container {
   width: 100%;

   article {
      float: left;
      width: 650px / 990px * 100%;
   }

   aside {
      float: right;
      width: 300px / 990px * 100%;
   }
}

This is the CSS that would be generated:

.container {
   width: 100%;
}

.container article {
   float: left;
   width: 65.65%;
}

.container aside {
   float: right;
   width: 30.30%;
}

Sass also allows you to use calc() function which can also be useful for fluid layouts by using math operators and variables. This will be covered in detail in another post, but I have included an example below:

.container {
   width: 100%;

   $width: 650px;
   $gutter: 30px;

   article {
      float: left;
      margin-right: $gutter;
      width: $width;
   }

   aside {
      float: right;
      /* This will work out the percentage of space left over
      for the sidebar after the article width has been set.
      This will show as a percentage in CSS */
      width: calc(100% - #{$width} - #{$gutter});
   }
}

References
http://sass-lang.com/guide

Tag: Operations

A basic guide to SASS and SCSS syntax

Share this: