In this tutorial <strong><em>Sassy</em></strong>, <strong><em>Sass </em></strong>and <strong><em>SCSS </em></strong>will refer to roughly the same thing. Conceptually, there isn’t much difference. You will learn the difference as you learn more, but basically <strong>SCSS </strong>is the one most people use now. It’s just a more recent (and according to some, superior) version of the original <strong>Sass </strong>syntax.
In this tutorial Sassy, Sass and SCSS will refer to roughly the same thing. Conceptually, there isn’t much difference. You will learn the difference as you learn more, but basically SCSS is the one most people use now. It’s just a more recent (and according to some, superior) version of the original Sass syntax.
To start taking advantage of Sass, all you need to know are the key concepts. I’ll try to cover these in this tutorial.
Note: I tried to be as complete as possible. But I’m sure there might be a few things missing. If you have any feedback, post a comment and I’ll update the article.
All Sass/SCSS code compiles back to standard CSS so the browser can actually understand and render the results. Browsers currently don’t have direct support for Sass/SCSS or any other CSS pre-processor, nor does the standard CSS specification provide alternatives for similar features (yet.)
You can’t really appreciate the power of Sassy CSS until you create your first for-loop for generating property values and see its advantages. But we’ll start from basic SCSS principles and build upon them toward the end.
What can Sass/SCSS do that Vanilla CSS can’t?
Sass is not dynamic. You won’t be able to generate or animate CSS properties and values in real-time. But you can generate them in a more efficient way and let standard properties (CSS animation for example) pick up from there.
SCSS doesn’t really add any new features to the CSS language. Just new syntax that can in many cases shorten the amount of time spent writing CSS code.
CSS pre-processors add new features to the syntax of CSS language.
There are 5 CSS pre-processors: Sass, SCSS, Less, Stylus and PostCSS.
This tutorial covers mostly SCSS which is similar to Sass. You can learn more about Sass here: https://www.sass-lang.com/.
Extensions .sass and .scss are similar but not the same. For command line enthusiasts out there, you can convert from .sass to .scss and back:
Convert files between .scss and .sass formats using Sass pre-processor command sass-convert.
Sass was the first specification for Sassy CSS with file extension .sass. The development started in 2006. But later an alternative syntax was developed with extension .scss which some developers believe to be a better one.
There is currently no out-of-the-box support for Sassy CSS in any browser, regardless of which Sass syntax or extension you would use. But you can openly experiment with any of the 5 pre-processors on codepen.io. Aside from that you have to install a favorite CSS pre-processor on your web server.
This article was created to help you become familiar with SCSS. Other pre-processors share similar features, but the syntax may be different.
Sassy CSS in any of its manifestations is a superset of the CSS language. This means, everything that works in CSS will still work in Sass or SCSS.
Sass / SCSS allows you to work with variables. They are different from CSS variables that start with double dash you’ve probably seen before (for example, --color: #9c27b0). Instead they start with a dollar sign (for example, $color: #9c27b0)
Basic $variable definitions
You can try to overwrite a variable name. If !default is appended to the variable re-definition, and the variable already exists, it is not re-assigned again.
In other words, this means that the final value of variable $text from this example will still be “Piece of string.”
The second assignment “Another string.” is ignored, because a default value already exists.
Sass $variables can be assigned to any CSS property
With standard CSS, nested elements are accessed via space character:
Nesting with standard CSS
The above code can be expressed with Sassy’s Nested Rules as follows:
Nested Rules - Sassy scope nesting looks less repetitious.
Of course, in the end, it all compiles to normal CSS. It’s just another syntax.
As you can see this syntax appears cleaner and less repetitive.
This is in particular helpful for managing complex layouts. This way the alignment in which nested CSS properties are written in code closely matches the actual structure of the application layout.
Behind the veil the pre-processor still compiles this to the standard CSS code (shown above), so it can actually be rendered in the browser. We simply change the way CSS is written.
Sassy CSS adds the & (and) character directive.
Let’s take a look at how it works!
Usage of & character directive
On line 5 the & character was used to specify &:hover and converted to the name of the parent element a after compilation.
So what was the result of above SCSS code when it was converted to CSS?
Result - SCSS converted to CSS
The & character is simply converted to the name of the parent element and becomes a:hover in this case.
A mixin is defined by the @mixin directive (or also known as mixin rule)
Let’s create our first @mixin that defines default Flex behavior:
Now every time you apply .centered-elements class to an HTML element it will turn into Flexbox. One of the key benefits of mixins is that you can use them together with other CSS properties.
Here, I also added border:1px solid gray; to .centered-elements in addition to the mixin.
You can even pass arguments to a @mixin as if it were a function and then assign them to CSS properties. We’ll take a look at that in the next section.
Some experimental features (such as -webkit-based) or Firefox (-moz-based) only work in browsers in which they appear.
Mixins are helpful in defining browser-agnostic CSS properties in one class.
For example, if you need to rotate an element in Webkit-based browsers, as well as the other ones, you can create this mixin that takes a $degreeargument:
Browser-agnostic @mixin for specifying angle of rotation.
Now all we have to do is @include this mixin in our CSS class definition:
Rotate in compliance with all browsers.
Similar to standard CSS syntax, you can add, subtract, multiply and dividevalues, without having to use the calc() function from the classic CSS syntax.
But there are a few non-obvious cases that might produce errors.
Adding values without using calc() function
Just make sure that both values are provided in a matching format.
Subtraction operator works in the same exact way as addition.
Subtracting different type of values
The star is used for multiplication. Just like with calc(a * b) in standard CSS.
Multiplication and Division
Division is a bit tricky. Because in standard CSS the division symbol is reservedfor using together with some other short-hand properties. For example, font: 24/32px defines a font with size of 25px and line-height of 32px. But SCSS claims to be compatible with standard CSS.
In standard CSS, the division symbol appears in short-hand font property. But it isn’t used to actually divide values. So, how does Sass handle division?
If you want to divide two values, simply add parenthesis around the division operation. Otherwise, division will work only in combination with some of the other operators or functions.
The remainder calculates the remainder of the division operation. In this example, let’s see how it can be used to create a zebra stripe pattern for an arbitrary set of HTML elements.
Creating Zebra stripes.
Let’s start with creating a zebra mixin.
Note: the @for and @if rules are discussed in a following section.
This demo requires at least a few HTML elements:
HTML source code for this mixin experiment.
And here is the browser outcome:
Zebra stripe generated by the zebra mixin.
How can comparison operators be used in practice? We can try to write a @mixin that will choose padding sizing if it’s greater than the margin:
Comparison operators in action.
After compiling we will arrive at this CSS:
Result of the conditional spacing mixin
Using Sass Logical Operators
Creates a button color class that changes its background color based on its width.
In some cases, it is possible to add strings to valid non-quoted CSS values, as long as the added string is trailing:
Combining regular CSS property values with Sass/SCSS strings.
The following example, on the other hand, will produce a compilation error:
This example will not work.
You can add strings together without double quotes, as long as the string doesn’t contain spaces. For example, the following example will not compile:
This example will not work, either. Solution?
Strings containing spaces must be wrapped in quotes.
Adding multiple strings.
Adding numbers and strings.
Note: content property works only with pseudo selectors :before and :after. It is recommended to avoid using content property in your CSS definitions and instead always specify content between HTML tags. Here, it is explained only in the context of working with strings in Sass/SCSS.
SCSS has functions() and @directives (also known as rules). We’ve already created a type of function when we looked at mixins. You could pass arguments to it.
A function usually has a parenthesis appended to the end of the function’s name. A directive / rule starts with an @ character.
if() is a function.
The usage is rather primitive. The statement will return one of the two specified values, based on a condition:
@if is a directive used to branch out based on a condition.
This Sassy if-statement compiles to:
Example of using a single if-statement and an if-else combo.
The AND symbol & will select the parent element, if it exists. Or return nullotherwise. Therefore, it can be used in combination with an @if directive.
In the following examples, let’s take a look at how we can create conditionalCSS styles based on whether the parent element exists or not.
If parent doesn’t exist, & evaluates to null and an alternative style will be used.
The @for rule is used for repeating CSS definitions multiple times in a row.
for-loop iterating over 5 items.
I hope this article has given you an understanding of SCSS/SASS. If you have any questions, post them in the comments.
Sass Crash Course- Learn Sass In 20 Minutes: In this mini crash course we are going to learn everything about Sass. What Sass allows us to do is write alot of cool things that we would normally wouldn't be able to do in normal CSS.
With Sass we can create variables, use imports and partials to separate our css code into smaller chunks, we can use mixins to create small functions that allow us to reuse css code, nesting allows us to write children elements directly inside the parent element and much more!
We will also look at a tool called Live Sass Compiler which is going to take our scss code and convert it to regular css with autoprefixer.
If you are interested in learning more about css and sass then take the time to watch this sass crash course covered in 20 minutes!
📕 Things covered in this video:
How to add sass compiler to our project
How to link our sass to html
Partials and Imports
📔 Materials used in this video:
My latest site redesign and why I left out Sass and media queries in favour of native CSS grid, calc, viewport units and custom properties.}
Let’s face it, writing css is messy. More so when reviewing the code which other people have written. I find SASS is the answer to that. It helps you to write clean code which is readable.Beginner’s guide to SASS
Let’s face it, writing css is messy. More so when reviewing the code which other people have written. I find SASS is the answer to that. It helps you to write clean code which is readable.
Let’s jump into it. Let’s create a simple HTML which has nested div’s , hover, focus, repeated CSS properties, you know standard HTML we face in daily life.
It is important to understand why are we using classses parent1__link1. It is a part of BEM (Block Element Modifier) methodology where **parent1 **is block and **link1 **is element. BEM follows **simple **rules to name and organise your CSS and gives everyone on a project a declarative syntax which they can use so that they’re on the same page.
You can read about it here
Let’s start with writing css for header. Pretty simple stuff, background-color and color properties.
Here with help of SASS we can change **color codes to variable *so that it can be reused . So, let’s create variables for our color codes (you can use this to come up with names for color variables) using *$ (this is important to create variables in SASS). **Our new css for header would look like this. We can also use variable for many things padding, margins, color basically anything you want to reuse.
To make css even more modular, SASS provides import functionality. We can put all the color names, mixins, common styles in different files and import them. So, let’s create a _color.scss file.
Note the name of** _color.scss** file. This is called a partial file meaning this file contains little snippets of CSS that you can include in other Sass files. The **underscore **lets SASS know that the file is only a partial file and that it should not be generated into a CSS file
And we can import this file in our main scss file. using command
and continue using color variables same way as depicted above.Nesting
Next we jump to **parent1 *(please refer HTML Markup above)*and it’s children.
For the this problem, we will use **& *for concatenation of classes *parent1** and parent1__link1. Please refer to image below (pay attention to use of variables here as well)
For this problem we will concatenate pseudo classes and elements to parent1__link1 **using &**.
Make a note: pseudo classes are concatenated using &: and pseudo elements are concatenated with &::
Comprehensive list of pseudo classes and pseudo link is available here
As described above we have written CSS for parent1. We will write same CSS for parent two as well.
As we can see in above file, parent1 and parent2 share many common css properties. We could make this css cleaner, simpler and more readable using *MIXINS. *Here is how mixin works:
We create a custom common style using @mixin keyword like depicted in image below. It contains all the property that is common to both parent1 and parent2.
Next, we include the mixin in our parent styles.
Here, I have created mixin for both link style and parent style. It makes code much more cleaner and readable.
This is a basic guide to get started with SASS. Of course, SASS provides great variety of functionalities that can be used to make your life easier when writing CSS. You can refer to full guide for SASS here.