A Brief Intro to Sass CSS

What is SASS?

  • sass is a CSS pre-processor.
  • It extends the language of CSS, adding features that allow programmatic functionality such as variables, functions, etc.
  • It can make CSS more maintainable, themable and extendable.
  • Can run from command line, IDE, code or web page.
  • It provides formatted, customizable output that is checked for syntax.

Getting Started

Please refer to the Sass Installation page for instructions on how to install Sass for your platform

Importing

  • Instead of having one big .scss file you can have multiple files and use the @import command to combine all the .sass files into one.
  • All the mixins and variables will be made available to the main file.
@import “type.scss”;
@import “colors.scss”;

Commenting

Multuple line comments are preserved

/* This will be shown in final compiled css file */
/*
This does too!
*/

Single line comments are silent, they do not show up in the compiled css output.

//This will not show up in compiled code.  Use me instead!

Variable or Constants

Variables are declared and used with the $ symbol. You give them a name and a value and then you can refer to them anywhere in your .sass file.

$name: value;
$nxp-orange:    #f9b500;
background-color: $nxp-orange;

Variables can also be assigned to other variables

$mega-menu-background-color: $nxp-orange;

Variables are actually constants in that they can only be defined once.

Mixins

Mixins allow you to include (mix-in) properties from one rule-set into another.

@mixin bordered { border: solid 1px black; }

.menu {
  @include bordered;
  color: @nxp-orange;
}

Output:

.menu {
                border: 1px solid black;
                color: #f9b500;
              }

Nested Rules

Nested gives you the ability to cascade your CSS

Instead of:

#header { color: black; }
#header .nav { font-size: 12px; }
#header .logo { width:100px; }

You can write it this way:

#header {
  color: black;

  .navigation { font-size: 12px; }

  .logo { width: 100px; }
}

Parent Selectors

The & operator represents the parent selector in a nested rule and is used most combining classes or pseudo-class to an existing selector.

a.blue {
  color: blue;

  &:hover { color:green !important; }

  &.uppercase { text-transform: uppercase; }
}

Ouput:

a.blue { color: blue; }
a.blue:hover { color:green; }
a.blue.uppercase { text-transform: uppercase; }

Functions

Scss has many built in functions that can be used to compute values.

.nxp-orange-lightened {
  color: lighten($nxp-orange, 10%);
}

For a complete list of functions and examples, view the SASS documentation online.

Resources

Scss has many other features such as Operations, Conditionals and Namespaces, String Interpolation and much more. Find out more about what sass has to offer at http://sasscss.org.

How we use sass to compile css

We use sass to create our common stylesheet used in the vast majority of our pages.

After an extensize audit of the most popular pages viewed we compiled a list of stylesheets that were commonly used. We made each stylesheet a .sass file and combined them into one common styleseet nxp-web.css

Imported Files

We start with the basic Bootstrap .sass files and override them with delta files. We then add ed all the legacy stylesheets. In addition we encoded the common background image elements and added them to the stylesheet directly.

Common Stylesheet

The main .sass file nxp-web.sass is mostly a list of @import statements. When making changes it is important to search all the .sass files to see where the root changes need to be made.

The FSL.nxp-rebrand-fixes.sass file is the last file in the imported list. It is there for styling that can not be adjusted elesewhere.

For a list of all the .sass files go here.

For a download of the latest .css and templates please go here.

Please note that the common stylesheet is used for the majority of our pages. Please do not add styles that are used by only one page. For a situation like that please use a <style> section within the that page.

CSS Coding Guidelines

  • Avoid using !important in your css selectors.
  • Remember to use single line comments in .sass files. They will not show up in final compiled css.