There are so many reasons to use SASS over traditional CSS. For those of you who are unfamiliar with SASS, it’s a CSS extension language that allows you to code CSS like you would a traditional programming language.
For example, you can set variables for colors and fonts you will reuse. The top of your SASS file may contain the following:
$primary-font: "Shadows Into Light"; $primary-color: #f9398c; $light-color: #f2f2f2;
All programmers know the value of being able to set a variable which you can reuse throughout your program, and any front end engineer has experienced the frustrating search and replace traditionally necessary to test colors and fonts. By setting global variables, changing a color or font throughout your web application is simple and easy.
Another benefit of SASS is the ability to nest CSS selectors so your styling is organized and you have a visual hierarchy within which to work. Here is a simple example of nesting which also makes use of a global variable:
#rate-container { margin-top: 30vh; #survey-container { margin-left: auto; margin-right: auto; width: 800px; .survey { float: left; margin-left: 20px; margin-right: 20px; background: $light-color; width: 120px; height: 120px; p { font-size: 20px; } } } }
The SASS documentation details all of the fun things SASS allows you to do.
Install SASS
To install SASS and Compass, you’ll need to have Ruby installed on your machine. Macs come with Ruby, otherwise you’ll have to download it. To install SASS, run the following in your command line:
♥ gem install sass
If you’re unsure of you have SASS, you can check in your terminal:
♥ sass -v Sass 3.4.6 (Selective Steve)
Install Compass
If you’re using SASS, you’ll want to install Compass to precompile your SASS into CSS as you work. To install Compass:
♥ gem install compass Fetching: sass-3.4.6.gem (100%) Successfully installed sass-3.4.6 Fetching: compass-core-1.0.1.gem (100%) Successfully installed compass-core-1.0.1 Fetching: compass-import-once-1.0.5.gem (100%) Successfully installed compass-import-once-1.0.5 Fetching: chunky_png-1.3.3.gem (100%) Successfully installed chunky_png-1.3.3 Fetching: compass-1.0.1.gem (100%) Compass is charityware. If you love it, please donate on our behalf at http://umdf.org/compass Thanks! Successfully installed compass-1.0.1 5 gems installed
If you think you might already have Compass installed, you can check that as well:
♥ compass -v Compass 1.0.1 (Polaris) Copyright (c) 2008-2014 Chris Eppstein Released under the MIT License. Compass is charityware. Please make a tax deductable donation for a worthy cause: http://umdf.org/compass
Create SASS Directory and Files
Wherever you would normally store your CSS files, create a sass directory. So, for example, say you are working with Node/Express and you have a public directory with a stylesheets directory inside, you would want to create a sass directory at the same level as your stylesheets directory.
Inside your sass directory, create an .scss file. You do not need to create any .css files – Compass will take care of that for you.
Compass Watch
Compass will watch your SASS files and precompile them for you as you develop. cd into the directory which includes your sass directory. In the above example, this would be your public directory. You do not want to be in the sass directory itself. In your command line, run:
♥ compass watch >>> Compass is watching for changes. Press Ctrl-C to Stop. write stylesheets/style.css
Once Compass is watching, it will generate corresponding .css files in a stylesheets directory and will automatically update those CSS files any time you modify your SASS files. If you already have a stylesheets directory at the same level, Compass will drop the compiled CSS files in that location. If you do not have a stylesheets directory, Compass will create one.
Browsers Read CSS
In the head of your HTML file(s), you want to reference your CSS stylesheets the way you normally would. SASS cannot be read by the browser and SASS files do not need to be referenced in your HTML file(s).
- PM Career Story - April 28, 2022
- How to Transition into Product Management - December 26, 2017
- What I’ve Learned in My First Few Months as a Product Manager - October 14, 2015
Comments