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.