So SASS is something that I have been aware of for a while now, but it is only recently that I have started to properly use it. This might seem a bit confusing, or perhaps embarrassing, but it is quite common within the tech world to ‘put off’ using new technology. I have been to talks and I have read articles about SASS, but I was quite happy using normal CSS (CSS3). However, to answer the question, why do we use SASS? The answer is very much to do with simplicity.
The problem with CSS is that you can create many different styles based upon classes, ids, elements and data items. And the syntax can at times get messy, especially when trying to reference nested elements and list-item elements.
To setup: Go to https://community.chocolatey.org/ and install Chocolately for your machine by using the following command in either Command Prompt or PowerShell
choco install sassNext, you will need to do a change directory command to your project’s directory – using the cd command.
Whilst There are a list of various commands, the two main that I use are: sass –update styles and sass –watch styles. Please note that styles is the folder where the SCSS files are kept. In your project, this might be named differently.
The reason to why do we use SASS is keeping code clean. This also includes file referencing. Instead of referencing multiple files for different functionality, you can just reference one main file, and within that file link to other SCSS files. For example, you can import a stylesheet to reference difference colours as a variable name, and another that uses mixins or extensions. See the below examples.
Examples
As you can see, comparing SASS to CSS, there isn’t too much different in-regards to syntax, however, because it is a preprocessor language, it allows you to create variables for items such as fonts and colours (color), instead of duplicating the name various times within a file.
Here is another example of how nesting works in SASS/SCSS. Whilst CSS obviously uses nesting, SASS makes it easier to read by allowing you to create a parent style, and within that parent add child styles, without the need to re-use the parent name. In this example, the parent name is the element nav.
Mixins
A mixin is style block that is created so that lets creates declarations that can be used throughout your project. Notice how it looks like a function. This is because it allows a developer to pass values to it, allowing certain, specific changes to be made, such as the colour change to the hover on an anchor tag.
This is it for now. Short, and sweet. But, it has been good to get my teeth in SASS. Another note, is that you don’t have to use Chocaltely as your preprocessor renderor, you can alternatively use Gulp.
This article is very much a beginners guide, and will also hopefully serve as an influence to those wanting to make the leap using SASS.
