The difference between SCSS and CSS variables

The Difference Between SCSS and CSS Defining Variables

1. SCSS (Sassy CSS) Introduction

SCSS is a preprocessor language for CSS. It’s an extension of CSS that provides more features and syntax, making stylesheets more flexible and convenient to create. SCSS helps developers better organize and manage CSS code, while improving maintainability and readability.

The biggest difference between SCSS and CSS is that SCSS supports features like variables, nested rules, and mixins, which greatly simplify CSS code creation and maintenance. Below, we’ll detail the differences between variable definitions in SCSS and CSS.

2. Differences Between SCSS and CSS Variable Definitions

2.1 Variable Definition

In SCSS, we can use variables to store the values ​​of style properties such as color, font size, and margins. By defining variables, we can reuse these values ​​throughout the stylesheet, achieving code reuse and maintenance. The following is an example of a variable definition in SCSS:

$primary-color: #3498db;
$font-size: 16px;

body {
background-color: $primary-color;
font-size: $font-size;
}

In the code above, we define two variables, $primary-color and $font-size, to store the values ​​of the background color and font size, respectively. In the stylesheet, we can reference these values ​​by variable name, making the code more concise and easier to modify.

Pure CSS doesn’t support variable definitions. You need to retype these values ​​each time you need them, which is error-prone and reduces code maintainability.

2.2 Using Variables

In SCSS, we can reference variables anywhere a color or size value is needed, such as background color or font size. Here’s an example using variables:

$primary-color: #3498db;
$font-size: 16px;

body {
background-color: $primary-color;
font-size: $font-size;
}

h1 {
color: $primary-color;
font-size: $font-size * 2;
}

By using variables, we can easily modify color and size values ​​throughout the style sheet without having to modify them individually, improving code maintainability and flexibility.

2.3 Nested Rules

SCSS supports nested rules, which can better organize the structure of stylesheets, making the code clearer and easier to read. In SCSS, we can nest the style rules of child elements within the style rules of parent elements to improve code readability and reduce code indentation. Here’s an example of a nested rule:

$primary-color: #3498db; 

.container { 
width: 100%; padding: 10px;

h1 {
color: $primary-color;
font-size: 20px;
}

p {
color: #333;
font-size: 16px;
}
}

In CSS, we need to write style rules for each element separately and use selectors to map parent-child relationships, which results in redundant code and poor readability. In SCSS, nested rules allow us to more clearly express the relationships between elements, improving code readability and maintainability.

2.4 Mixins

Mixins in SCSS are similar to functions, allowing you to reuse a set of style rules. Mixins increase style reusability and flexibility, avoid duplication, and make code more concise and easier to maintain. Here’s an example of a mixin:

$primary-color: #3498db;

@mixin button-style {
background-color: $primary-color;
color: #fff;
padding: 10px 20px;
}

.button {
@include button-style;
}

In the example above, we define a mixin, button-style, which includes style rules for buttons. Using the @include keyword, we can call the mixin wherever needed, enabling style reuse.

CSS doesn’t support mixins. A set of style rules must be rewritten each time they’re needed, resulting in redundant code and poor maintenance.

3. Summary

SCSS has more features and syntax than pure CSS, including variable definitions, nested rules, and mixins. These features help developers better organize and manage stylesheets, improving code maintainability and readability. While there may be some learning curve when writing CSS, once you become familiar with SCSS syntax and usage, development efficiency and code quality will be greatly improved.