Post
Ask Question

What’s the Difference Between SCSS and Sass and How to Use it in Your Project

Originally, front-end development was writing HTML, CSS, and JavaScript. However, in the last decade, it has become more complex and more interesting. The continuous evolution of the field makes it crucial to stay on top of the latest technology and learn how to build better websites.

In this article, I'll show you how to use SCSS - think of it as a way to write CSS with superpowers. I've divided it into three parts:

Introduction to SCSS
SCSS Language Syntax
Using SCSS in the Real World


If you already know the language and want to learn how to use it in your application, feel free to skip ahead for the third time.


Introduction to SCSS (and Sass)
SCSS (or Sass), defined as "superpowered CSS", provides a way to better design websites using CSS syntax. Oftentimes, browsers do not know how to use SCSS features such as functions, mixins, and nesting. We need to convert them to regular CSS files to run in the browser.

What is the difference between SCSS and Sass?
This is where most beginners get confused. SCSS and Sass are two versions of the same concept.

 

Feature Sass SCSS
File extension .sass .scss
Syntax Uses indentation for nesting Uses curly braces for nesting
Semi-colons Optional, not required Required at the end of each statement
Variables Uses $ sign to define variables Uses $ sign to define variables
Nesting Uses indentation to nest selectors Uses curly braces to nest selectors
Mixins Uses @include directive Uses @mixin directive and @include keyword
Functions Uses @function directive Uses @function directive

 

Here I will show you an example of  SCSS:

body {
  background-color:#000;
  color:#fff;
}

Here I will show you an example of  Sass:

body
  background-color:#f00;
  color:#000;

Choose one Don't stress about this decision - you can easily convert SCSS to Sass and back using the sass-convert tool.

SCSS syntax is similar to CSS, so it's easy to explain its development to someone who already knows CSS
After learning SCSS, you can learn Sass in minutes


Why SCSS?
TL;DR: CSS is not enough.
Don't get me wrong CSS is great but not cool enough. The creators of SCSS had many ideas to make developers' lives easier and they decided to create them as a new language. In fact, Sass is undoubtedly the first version of this new language; SCSS is the enhanced version they created later.

How to use SCSS on your website
Unfortunately, the functionality of SCSS is not yet defined in the CSS specification, so browsers do not support it.

We will talk about the tools you can use for this and how to do the process later.

SCSS Language Grammar
For this section, I assume you already have some knowledge of CSS. I will go through the features of SCSS one by one and explain the syntax of each feature.

Structure of SCSS rules
The structure of SCSS follows the structure of CSS.
First select one or more elements using the ID, class, or other CSS options. Next, add the pattern.

In this example, I select an element with class button and add some attributes. This works for CSS code and SCSS code.

.button {
  display:block;
  font-size:18px;
  margin:4px 10px;
}

Nesting

In the early stage of our career, we use to style our navbar like this with CSS:

nav {
  background-color:#f00;
  padding:1em;
}
nav ul {
  margin:0;
  padding:0;
  list-style:none;
}
nav ul li {
  display:inline-block;
}

But Now we can do so with SCSS, like this:

nav {
  background-color:#f00;
  padding:1em;
  ul {
    margin:0;
    padding:0;
    list-style:none;
    li {
      display:inline-block;
    }
  }
}

By using SCSS or Sass, you can write much more organized and concise CSS code. This gives you two major advantages over the traditional CSS syntax that your grandpa might be using. Firstly, you can easily find all the styles for a particular element or its children, as they are neatly organized between curly braces. This eliminates the need to search through multiple files or scroll endlessly through one large CSS file. Secondly, by using variables, mixins, and nested selectors, you can write much less code, thereby reducing repetition and making your CSS more efficient.

However, it's important to keep in mind that when you nest selectors deeply, the resulting CSS file can become quite large, and browsers may need to do more work to style the elements. It's therefore best to keep your selectors shallow and avoid nesting too deeply. For instance, you could save several bytes of code by moving the styles for li elements to the outer scope.

Using & in nesting

Our Teacher shows off his magical button that changes color when you hover over it. His CSS code looks like this:

button {
  background-color: #f00;
  color: #000;
}
button:hover {
  background-color: #000;
  color: #fff;
}

With traditional CSS, achieving the desired effect of a nested selector can be a bit of a headache. However, SCSS provides a simple solution with the use of the & character in nesting. By using this character, you can easily reference the parent selector in your child selector, without having to write out the full selector again. This not only saves you time and effort but also makes your code more readable and concise.

button {
  background-color: #f00;
  color: #000;
  &:hover {
    background-color: #000;
    color: #fff;
  }
}

 

Variables in Scss

In SCSS, you can define variables to store reusable values such as colors, font sizes, and spacing. This can make your code more efficient and easier to maintain. Here's an example of how to use variables in SCSS:

// Define a variable for the main color
$main-color: #f00;

// Use the variable in your styles
body {
  background-color: $main-color;
}

h1 {
  color: $main-color;
}

button {
  background-color: $main-color;
  border: 2px solid $main-color;
}

Variables in SCSS can also be interpolated using the #{} syntax, which allows you to include variables within strings. Here's an example:

// Define a variable for the font family
$font-family: 'Open Sans', sans-serif;

// Use the variable in a style with interpolated text
h2::before {
  content: "This heading uses the #{$font-family} font";
  font-family: $font-family;
}

The difference between SCSS and CSS variables

  1. SCSS and CSS variables are both used to store and reuse values in CSS styles, but they have some important differences.
  2. SCSS variables are defined using the $ symbol and are processed by a preprocessor like Sass or SCSS. They can be used to store any value, including colors, font sizes, and spacing, and can be used throughout the entire file in which they are defined, as well as any files that are imported into that file. SCSS variables are replaced with their values during the compilation process, which generates a traditional CSS file that can be used on a web page.
  3. CSS variables, on the other hand, are defined using the -- prefix and are processed by the browser at runtime. They are part of the CSS Custom Properties specification and can be used to store any value that can be used in CSS, including colors, font sizes, and spacing. CSS variables are defined within a selector or a root element using the var() function and can be overridden by other CSS styles. They can also be updated dynamically using JavaScript, allowing for more flexible and responsive styles.
  4. One advantage of SCSS variables is that they are processed by a preprocessor, which allows for more complex calculations and transformations to be performed on the values before they are used in the CSS styles. This can be useful for creating more advanced styles, but it also requires additional tools and knowledge to set up and use.
  5. CSS variables, on the other hand, are built into the browser and require no additional tools or setup. They also offer more flexibility and interactivity, as they can be updated dynamically using JavaScript, allowing for more responsive styles that can adapt to changes in user input or other environmental factors.

SCSS variables have a scope that defines where they can be accessed and used within your styles. Understanding variable scope is important to ensure that your styles are organized and that your variables are used in the right places.

In SCSS, a variable that is defined at the top level of a file or block has global scope, which means it can be accessed and used anywhere within that file or block. For example:

// Global variable
$primary-color: #f00;

// Style block
.navbar {
  background-color: $primary-color;
  
  // Nested style block
  .nav-item {
    color: $primary-color;
  }
}

// Another style block
.btn {
  border-color: $primary-color;
}

// Global variable
$primary-color: #007bff;

// Style block
.navbar {
  // Local variable
  $background-color: #f7f7f7;
  
  background-color: $background-color;
  
  // Nested style block
  .nav-item {
    color: $primary-color;
    background-color: $background-color;
  }
}

 

mixins: In SCSS, mixins are reusable blocks of code that can be included in other styles using the @include directive. Mixins can be used to encapsulate complex or repetitive styles and make your code more organized and maintainable.

// Define a mixin
@mixin button-styles {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background-color: #007bff;
  border-radius: 0.25rem;
  border: 1px solid #007bff;
  
  &:hover {
    background-color: #0069d9;
    border-color: #0062cc;
  }
}

// Use the mixin in a style block
.btn {
  @include button-styles;
}

// Use the mixin in another style block
.btn-primary {
  @include button-styles;
  
  background-color: #28a745;
  border-color: #28a745;
  
  &:hover {
    background-color: #218838;
    border-color: #1e7e34;
  }
}

I've defined a mixin called button-styles that includes a set of styles for a button element. We can then use the @include directive to include the mixin within two different style blocks, .btn and .btn-primary. This allows us to reuse the same set of styles for both buttons without having to repeat the code.

Mixins with arguments

Mixins can also accept arguments, which allows you to create more flexible and reusable styles. Arguments are passed to mixins as values when the mixin is included using the @include directive.

Here's an example of how to create a mixin with arguments:

// Define a mixin with arguments
@mixin button-styles($bg-color, $border-color) {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background-color: $bg-color;
  border-radius: 0.25rem;
  border: 1px solid $border-color;
  
  &:hover {
    background-color: darken($bg-color, 10%);
    border-color: darken($border-color, 10%);
  }
}

// Use the mixin with arguments
.btn {
  @include button-styles(#007bff, #007bff);
}

.btn-primary {
  @include button-styles(#28a745, #28a745);
}

.btn-danger {
  @include button-styles(#dc3545, #dc3545);
}

We've updated the button-styles mixin to accept two arguments: $bg-color and $border-color. These values are used to set the background color and border color of the button.

When the mixin is included using the @include directive, we pass values for the arguments, which determine the styles of the button. We've included the button-styles mixin three times, each with different values for the arguments, resulting in three different buttons with different colors.

Importing SCSS (@import and @use)

In SCSS, you can import other SCSS files using either the @import or @use directive. Here's how each of them works:

@import: The @import directive is used to include an external SCSS file into your main SCSS file. When the SCSS is compiled, the contents of the imported file are added to the output CSS file.

// main.scss
@import 'variables';
@import 'buttons';

// variables.scss
$primary-color: #007bff;
$secondary-color: #6c757d;

// buttons.scss
.btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background-color: $primary-color;
  border-radius: 0.25rem;
  border: 1px solid $primary-color;
  
  &:hover {
    background-color: darken($primary-color, 10%);
    border-color: darken($primary-color, 10%);
  }
}

In conclusion, you now have a good understanding of the basics of SCSS and how it's used in real-world applications. We've gone over some of the most popular SCSS features, but I highly recommend diving deeper into the SASS documentation to gain even more knowledge.

Once you become comfortable with SCSS, you may want to explore built-in SCSS modules that can simplify your workflow when working on complex applications. These modules can save you a lot of time and effort.


Similar Articles