Do I Need To Learn Sass

Table of Contents

Why Sass?
The Beginner's Guide to Learn Sass
Nesting, ampersands and variables
- The power of ampersand
- Variables and more maintainable lawmaking
Mixins and extends
- Mixins vs Extends
Imports and partials
Closing thoughts on how to learn Sass

Take y'all e'er wanted to learn Sass, just you didn't observe a adept tutorial? Chances are that you are quite good with CSS. However, you lot feel like in that location is a meliorate mode of working with CSS. You want to take your skills and efficiency to another level. In that cases, learning how to use preprocessor like Sass is one way to accomplish that goal. This volition exist the goal of this mini serial, to assist y'all larn Sass. Today, you lot volition learn about topics like variables, mixins, extends, imports and more. Let's start!

Why Sass?

What are the main reasons why y'all should learn Sass, or at leas consider doing it? CSS is groovy and, with time, information technology is getting even better. 1 of the biggest changes in the recent time was that CSS finally "learned" to use variables. This is a big step forwards. And, I remember that there is even more to come. Aye, the future of CSS seems to be quite proficient. Still, I think CSS is far from being perfect. The biggest disadvantages of CSS are probably lack of any way to re-apply style rules.

Sure, y'all can create special class with set of styles and and so use it repeatedly. Nevertheless, even this approach is quite limited. You tin't modify the styles on the fly unless you add additional CSS to override the original. Too, you lot can't utilize any weather condition or parameters to switch betwixt "versions" of the styles. Again, the just way is adding more CSS code. Also, you need to either put on the right identify in the cascade. Or, yous have to increment CSS specificity.

Some other common problem with CSS was that at that place was no way to specify variables. If you wanted to re-apply specific value across the project, yous had to exercise it in the old fashioned mode. Sure, in that location is nothing bad with information technology. Nonetheless, imagine you would make up one's mind to change that value. Now, yous would have to observe every instance. This can be quite a feat in large code base. Luckily, the bulk of text editors offers search & replace functionality.

Another trouble with CSS is math. When you utilize plain CSS, you can't use even simple calculations, adding, subtracting, multiplication or sectionalization. This problem also disappears when y'all acquire Sass. You can utilise calc(), just Sass is more advanced. And, lastly, CSS can be quite difficult to maintain. Without preprocessor, you can't use atomic Design (modular CSS), SMACSS or annihilation like that. You take all CSS code in a unmarried file. And, no, @import is non actually a fix for that.

The Beginner's Guide to Larn Sass

If you want to learn Sass, y'all have to install it first. You can install Sass in a coupe way. In case of Mac users, this is quite fast. Yous merely demand to install Sass jewel via last. In case of Linux, you will need to install Crimson first and then Sass gem. You can install Ruby via parcel director. For computers with Windows you need to install Ruby offset likewise. I suggest downloading Cherry-red installer equally this is the easiest way to do it. Afterward installing cherry-red, install Sass gem.

In cmd:

precious stone install sass

In terminal:

sude precious stone install sass

Yous tin can check if you have Sass gem installed on your computer with a simple command below. It should render specific version of the Sass precious stone. For example, Sass 3.4.23 (Selective Steve). If you run into something similar to this, congrats, you lot are ready not simply to learn Sass, only also to start using it. Nevertheless, if you lot want to attempt Sass without installing anything, you can use online Sass playground called Sassmeister. This website will allow you lot to use and examination Sass immediately.

In cmd/terminal:

sass -v

Nesting, ampersands and variables

Allow's start this journey to acquire Sass with a couple of things that are easier. These are nesting, using ampersand and variables. I guess that you already know nesting from working with HTML or JavaScript. Yous can nest elements within other elements or functions inside other functions. In CSS, there is no such a thing as nesting. Sass brings this feature to CSS. When you learn Sass, you can nest CSS selectors merely like y'all practise in HTML.

Sass:

// Example of nesting nav {  ul {   margin: 0;   brandish: flex;   list-fashion-blazon: none;  }    li {   padding: 16px;  }   a {   colour: #212121;   text-ornamentation: none;  } }

CSS:

nav ul {  margin: 0;  display: flex;  list-manner-type: none; } nav li {  padding: 16px; } nav a {  color: #212121;  text-decoration: none; }

Side notation: Those two slashes (//) are used to mark comments in Sass. In Sass, you lot can use both. The difference between Sass comment (//) and CSS annotate (/**/) is that Sass comments are non compiled into CSS. So, every comment yous brand using Sass syntax volition stay in your Sass files. Whatsoever comment you brand using CSS syntax will be compiled into CSS. In other words, y'all will observe CSS comments in final CSS file, not Sass comments.

I should warn you that it is easy to go over the board with nesting. When y'all fall in dear with it, you can create code that will result in over-qualified CSS. And, this tin make work with CSS even bigger pain that before you acquire Sass and started to using it. For this reason, I suggest nesting CSS selector to three levels at max, no more.

Sass:

.level-1 {  .level-two {   .level-three {    colour: cherry;   }  } }

CSS:

.level-one .level-two .level-iii {  color: red; }

The power of ampersand

One very useful characteristic you will probably use very often, after yous learn Sass and nesting, is ampersand. Ampersand allows you to reference parent selector. You simply replace the parent selector with this character. Y'all can employ this for with pseudo-classes such as :before, :after, :hover, :active, :focus, etc. Yous tin too use ampersand for adjoining, or calculation, CSS classes to create selector with higher specificity.

Sass:

ul {  &.nav-list {   brandish: flex;  }    & li {   padding: 8px 16px;  } }  a {  position: relative;    &:before {   position: absolute;   bottom: 0;   left: 0;   content: "";   border-bottom: 2px solid #3498db;  }    &:focus,  &:hover {   colour: #3498db;     &:before {    width: 100%;   }  }    &:agile {   color: #2980b9;  } }

CSS:

ul.nav-list {  display: flex; } ul li {  padding: 8px 16px; } a {  position: relative; } a:before {  position: accented;  bottom: 0;  left: 0;  content: "";  border-bottom: 2px solid #3498db; } a:focus, a:hover {  color: #3498db; } a:focus:before, a:hover:before {  width: 100%; } a:active {  color: #2980b9; }

I have to mention that ampersand also allows y'all to utilise CSS combinators, such as the child combinator (>), side by side sibling combinator (+) and the general sibling combinator (~).

Sass:

section {  & + & {   margin-acme: 16px;  }    & > h1 {   font-size: 32px;  }    & ~ p {   font-size: 16px;  } }  // Y'all tin can also omit the ampersand before the combinator and the result will be the same. department {  + & {   margin-top: 16px;  }    > h1 {   font-size: 32px;  }    ~ p {   font-size: 16px;  } }

CSS:

department + section {  margin-elevation: 16px; } section > h1 {  font-size: 32px; } section ~ p {  font-size: 16px; }

Finally, you don't take to put the ampersand equally first. You can use it in the cease to change the selector entirely.

Sass:

section {  body main & {   background: #fff;  } }

CSS:

body primary department {  background: #fff; }

Variables and more than maintainable code

The last of the three I mentioned are variables. I have to say that variables were one of the chief reasons why I wanted to learn Sass. Really, I think that they were the number one reason. Work with CSS gets so much easier when you lot can make changes on a global calibration past changing a single line of code. Y'all no longer have to search for all occurrences of this or that value. Yous store the value inside a variable. Then, yous have to change only that variable. Sass will practice the remainder.

As yous can guess, this can immensely simplify and speedup your work. Also, it makes your styles much easier to maintain. Variables work with numbers, strings, colors, null, lists and maps. The only thing you must remember is to utilize "$" symbol every fourth dimension you desire to define a variable. Then, when you desire to apply that variable, well, y'all know what to do.

Sass:

// Declare variables $color-principal: #9b59b6; $color-secondary: #2c3e50;  // Use variables a {  colour: $colour-secondary;   &:hover {   colour: $color-primary;  } }

CSS:

a {  color: #2c3e50; } a:hover {  color: #9b59b6; }

Ane thing to keep in mind on your journey to learn Sass and use variables is scope. Variables in Sass works similar variables in any programming language. Variables declared in global telescopic are accessible globally, local not.

Sass:

a {  // locally defined variables  $color-primary: #9b59b6;  $colour-secondary: #2c3e50;   color: $color-secondary;   &:hover {   color: $color-primary;  } }  p {  colour: $colour-secondary;// Undefined variable: "$colour-secondary". }

This too ways that you lot can use the same name for different variables without the worry of changing some. Just make sure to declare your variables in the right scope.

Sass:

$color-primary: #9b59b6; $colour-secondary: #2c3e50;  a {  // local variables  $colour-primary: #fff;  $color-secondary: #212121;   color: $colour-secondary; }  p {  color: $color-secondary; }

CSS:

a {  color: #212121; } p {  color: #2c3e50; }

Mixins and extends

Let's take this journey to acquire Sass on another level. When you lot are prepare for more advanced Sass, a practiced place to first are mixins and extends. Do you remember when we were talking virtually the biggest disadvantages of CSS, namely re-usability of the code? This is where mixins and extends enters the game. Both these Sass features allow you to create re-usable chunks of code. Information technology is safe to say that mixins and extends are similar to functions you know from JavaScript.

Yous create new mixin using "@mixin" directive and some name and put some styles inside it (inside curly brackets). Then, when y'all want to employ that mixin you lot reference to information technology using "@include" followed by the proper name of the mixin. Extends work in a like way. The difference is that extends don't crave creating some "extend". Instead, you use CSS classes yous already created. Then, when you want to use extend y'all use "@extend", not "@mixin".

Sass:

// Instance of mixin @mixin transition($prop, $elapsing, $timing) {  transition: $prop $elapsing $timing; }  // Apply mixin a {  @include transition(all, .25s, cubic-bezier(.iv,0,ane,1)); }

CSS:

a {  transition: all 0.25s cubic-bezier(0.4, 0, 1, i); }

Sass:

// Random CSS class .btn {  padding: 6px 12px;  margin-bottom: 0;  display: inline-cake;  font-size: 16px; }  Examples of extend .btn--success {  @extend .btn;    background-color: #2ecc71; }  .btn--alert {  @extend .btn;    background-color: #e74c3c; }

CSS:

.btn, .btn--success, .btn--alert {  padding: 6px 12px;  margin-bottom: 0;  display: inline-block;  font-size: 16px; } .btn--success {  background-color: #2ecc71; } .btn--alert {  background-color: #e74c3c; }

Mixins vs Extends

The advantage of mixins is that yous can use parameters to brand mixins more than flexible. For example, you can add a simple status and if statement to switch betwixt two or more than sets of rules. Every parameter starts with "$" symbol. And then, employ that name inside the mixin. And, you can likewise set a default value to make the parameter optional. Setting a default value is similar assigning value to variable. Utilise "$" symbol followed by colons and default value. Extends don't have this ability.

Sass:

// Example of mixin with optional parameters @mixin transition($prop: all, $duration: .25s, $timing: cubic-bezier(.iv,0,1,1)) {  transition: $prop $duration $timing; }  a {  @include transition(); }

CSS:

a {  transition: all 0.25s cubic-bezier(0.4, 0, 1, 1); }

When you want to change only some parameters and use default values for the rest, you lot tin use the name of parameter when you use that mixin.

Sass:

@mixin transition($prop: all, $elapsing: .25s, $timing: cubic-bezier(.4,0,1,ane)) {  transition: $prop $duration $timing; }  // Use different value merely for parameter for duration a {  @include transition($elapsing: .55s); }

CSS:

a {  transition: all 0.55s cubic-bezier(0.4, 0, 1, 1); }

Another very useful feature of mixins is to use it along with "@content" directive. This fashion, you can provide the mixin with block of content. A expert fashion to apply this is for creating media queries.

Sass:

// Mixin for media query @mixin media($screen-width) {  @media only screen and (max-width: $screen-width) {   @content;  } }  // Use the media query mixin with @content directive .container {  @include media(768px) {   max-width: 690px;  } }  // Mixin for retina display media query @mixin retina {  @media  simply screen and (-webkit-min-device-pixel-ratio: 2),  merely screen and (min--moz-device-pixel-ratio: 2),  only screen and (-o-min-device-pixel-ratio: 2/1),  simply screen and (min-device-pixel-ratio: 2),  only screen and (min-resolution: 192dpi),  merely screen and (min-resolution: 2dppx) {   @content;  } }  .hero {  background-paradigm: url(/images/image.png);   @include retina {   background-image: url(/images/paradigm@2x.png);  } }

CSS:

@media just screen and (max-width: 768px) {  .container {   max-width: 690px;  } } .hero {  background-paradigm: url(/images/paradigm.png); } @media just screen and (-webkit-min-device-pixel-ratio: 2), merely screen and (min--moz-device-pixel-ratio: ii), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), just screen and (min-resolution: 2dppx) {  .hero {   background-epitome: url(/images/paradigm@2x.png);  } }

Imports and partials

The last thing we will touch upon to help you acquire Sass is @import directive. Along with variables, this was another major reason for me to learn Sass. With Sass, you can split your stylesheet into unlimited number of files. Then, you use @import directive to import these chunks into single file. When yous compile this file, Sass volition automatically import content from all files and create one CSS stylesheet. Make sure to use correct names of files to import. Otherwise, Sass will throw an error.

Sass:

// This is _base.scss file html, body {  padding: 0;  margin: 0; }  html {  font-size: 100%; }  body {  font: 16px "Roboto", arial, sans-serif;  color: #111; }  // This is _typography.scss file h1, h2, h3 {  margin-pinnacle: 0;  font-weight: 200; }  h1 {  margin-bottom: 26px;  font-size: 40px;  line-pinnacle: 52px; }  h2 {  margin-lesser: 18px;  font-size: 27px;  line-height: 39px; }  h3 {  margin-bottom: 18px;  font-size: 22px;  line-pinnacle: 26px; }  // This is main.scss // Annotation: you don't have to employ "_" in filenames when you lot import files /* Chief stylesheet */ @import 'base'; @import 'typography';

CSS:

/* Principal stylesheet */ html, trunk {  padding: 0;  margin: 0; }  html {  font-size: 100%; } body {  font: 16px "Roboto", arial, sans-serif;  color: #111; } h1, h2, h3 {  margin-top: 0;  font-weight: 200; } h1 {  margin-bottom: 26px;  font-size: 40px;  line-height: 52px; } h2 {  margin-lesser: 18px;  font-size: 27px;  line-peak: 39px; } h3 {  margin-bottom: 18px;  font-size: 22px;  line-height: 26px; }

Of import matter to mention is that yous tin can apply imports whenever you want. You can import file A in the middle of the file B and and then import file B into your main Sass stylesheet. The only thing you lot must recall is to use the right order of files.

Sass:

// File _base.scss html, torso {  padding: 0;  margin: 0; }  @import 'typography';  nav {  list-mode-type: none; }  nav a {  text-decoration: none; }  // File principal.scss /* Master stylesheet */ @import 'base';

CSS:

/* Main stylesheet */ html, body {  padding: 0;  margin: 0; } h1, h2, h3 {  margin-superlative: 0;  font-weight: 200; } nav {  list-style-blazon: none; } nav a {  text-decoration: none; }

Closing thoughts on how to acquire Sass

This is all I have for you today on how to acquire Sass. My intention for this article was to give y'all enough information to get started with Sass. Hopefully, this article makes this journey to learn Sass equally easy as possible for you lot. Continue in listen that what we discussed today were only the basics. We barely scratched the surface. If you desire to not merely learn Sass, simply master it, at that place is more than nosotros demand to talk about. Don't worry. We will cover these avant-garde topics in some other commodity next week.

For at present, have some fourth dimension, go through the topics nosotros discussed today and practice your new noesis. Doing then will help you set up for the more than advanced techniques and features Sass can provide you with. So, stay tuned for the sequel. Until side by side time, have a groovy twenty-four hour period!

If yous liked this article, please subscribe so you lot don't miss any future post.

If you'd like to support me and this web log, you can become a patron, or you tin can buy me a coffee 🙂

Buy Me A Coffee Patreon Get a Patron Donate via Paypal