SASS
Make CSS easier
As we've been covering Ruby on Rails you may have noticed the files in your app/assets/stylesheets
ending in a different file extension. Instead of our typical .css
we get .scss
!
.scss
files are part of a larger piece of software called SASS, or Syntactically Awesome Style Sheets. SASS is something called a CSS Preprocessor.
A preprocessor's job is to take a more advanced syntax of CSS and PROCESS it BEFORE ( hence "pre" ) it is sent to the client as plain old CSS.
SASS vs SCSS
So if the software is called SASS, why are we using files ending in SCSS?
SCSS or Sassy CSS is just the file type that the SASS framework utilizes.
Installation
When working with Ruby on Rails, SASS is inherently installed in our Gemfile so there's no need to install anything ourselves.
With Node and other back-end platforms you will typically have to install the SASS package manually.
Cool Stuff SASS gives us
SASS is basically CSS with actual programming aspects incorporated which makes our lives much easier.
Variables
With SASS we can actually utilize variables in our CSS code. These are typically prefaced with the "$" symbol.
$pad: 2em;
$color-primary: rgb(40, 40, 40);
$color-secondary: rgb(40, 170, 220);
body {
background-color: $color-primary;
}
h1 {
color: $color-secondary;
}
.container {
padding: $pad;
}
Which will be processed and converted into CSS like this:
body {
background-color: #282828;
}
h1 {
color: #28aadc;
}
.container {
padding: 2em;
}
Nesting
With Nesting in SASS we can declare inherited styles that would normally make us repeat the parent selector
nav {
text-align: center;
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
}
a {
display: block;
padding: 5px 10px;
}
}
Which will turn into this CSS:
nav {
text-align: center;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 5px 10px;
}
Extend
Another useful feature is the ability to extend styles from predefined classes or id's. To do so we'll use the @extend keyword.
// columns
.col-1-3 {
width: 33.33%;
}
.col-2-3 {
width: 66.66%;
}
// colours
.blue {
color: rgb(40, 170, 220);
}
// structure
.primary-content {
@extend .col-2-3;
}
.secondary-content {
@extend .col-2-3;
}
// text
p.highlight {
font-size: 3em;
@extend .blue;
}
The resulting CSS:
.col-1-3, .secondary-content {
width: 33.33%;
}
.col-2-3, .primary-content {
width: 66.66%;
}
.blue, p.highlight {
color: #28aadc;
}
p.highlight {
font-size: 3em;
}
Import
A great feature of SASS is the ability to import other stylesheets. This aspect allows us to utilize DRY principles even in our stylesheets!
Note!
When you're creating .scss
files that you know you'll be importing into a main stylesheet be sure to name them starting with and underscore**
e.g: _navbar.scss
This will tell the SASS preprocessor to not convert those directly to CSS but instead pull them into a main file and then convert everything there into CSS.
@import 'reset';
@import 'grid';
@import 'text';
body {
}
h1 {
}
Mixins
Mixins are an extremely powerful feature of SASS. Basically they allow us to define a function and pass parameters to that function in order to output a result. Typically this can be used to make a shortcut for extraneous CSS rules.
@mixin left-thumb($width, height) {
width:$width;
height:$height;
display:block;
border-bottom-left-radius: 50%;
border-top-left-radius: 50%;
}
.left-thumb-box {
@include left-thumb(10px);
}
Bootstrap
You know what is written in SASS? Bootstrap! That means that install the original source files for bootstrap we can easily override the default styles options by changing the values of the SASS variables used.
In Rails this is even easier because we can install it using the Bootstrap-SASS Gem