Updating your variables

The main difference in variables is the symbol used to denote one. In Less we use an @ symbol for our variables, while in Sass you use the $ symbol. Here are a couple of examples for you:

/* LESS */ 
 
@red: #c00; 
@black: #000; 
@white: #fff; 
 
/* SASS */ 
 
$red: #c00; 
$black: #000; 
$white: #fff;

As you can see, that is pretty easy to do. A simple find and replace should do most of the work for you. However, if you are using @import in your stylesheets, make sure this retains an @ symbol.

Updating @import statements

Another small change in Sass is how you import different stylesheets using the @import keyword. First, let's take a look at how you do this in Less:

@import "components/_buttons.less";

Now let's compare how we do this using Sass:

@import "components/_buttons.scss";

As you can see, it's almost identical. You just need to make sure you name all your files with the .scss extension. Then update your file names in the @import to use .scss and not .less.

Updating mixins

One of the biggest differences between Less and Sass is mixins. Here we'll need to do a little more heavy lifting when we update the code to work for Sass. First, let's take a look at how we would create a border-radius, or round corner, mixin in Less:

.border-radius (@radius: 2px) { 
  -moz-border-radius: @radius; 
  -ms-border-radius: @radius; 
  border-radius: @radius; 
}

In Less, all elements that use the border-radius mixin will have a border radius of 2px. That is added to a component, like this:

button { 
.border-radius 
}

Now let's compare how you would do the same thing using Sass. Check out the mixin code:

@mixin border-radius($radius) { 
  -webkit-border-radius: $radius; 
  -moz-border-radius: $radius; 
  -ms-border-radius: $radius; 
  border-radius: $radius; 
}

There are a few differences here that you need to note:

You need to use the @mixin keyword to initialize any mixin
We don't actually define a global value to use with the mixin

To use the mixin with a component, you would code it like this:

button { 
@include border-radius(2px); 
}

This is also different from Less in a few ways:

First, you need to insert the @include keyword to call the mixin
Next, you use the mixin name you defined earlier, in this case, border-radius
Finally, you need to set the value for the border-radius for each element, in this case, 2px

Personally, I prefer the Less method as you can set the value once and then forget about it. However, since Bootstrap has moved to Sass, we have to learn and use the new syntax. That concludes the main differences that you will likely encounter. There are other differences and if you would like to research them more, I would check out this page:

http://sass-lang.com/guide .

Previous Chapter

Big changes in version 4

Next Chapter

Additional global changes

Table of Contents for Bootstrap 4 – Responsive Web Design

Updating your variables

Updating @import statements

Updating mixins

Table of Contents for
Bootstrap 4 – Responsive Web Design