Learning Bootstrap 4 - Second Edition

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 ...