start learning
Image 1

CSS Preprocessors Sass and Less

Sass (Syntactically Awesome Style Sheets) :

Sass is a CSS preprocessor that extends the functionality of CSS by introducing features like variables, nesting, mixins, and more. It uses a special syntax with indentation and supports two syntax formats: Sass (indented syntax) and SCSS (Sassy CSS).


Less (Leaner Style Sheets) :

LESS is another CSS preprocessor that offers additional features and functionality to CSS, including variables, mixins, nested rules, and more. It uses a similar syntax to CSS with the addition of some special features.

Both Sass and Less provide additional functionalities to CSS, making it more powerful and easier to manage. They allow you to reuse code, define variables for easy styling changes, and nest selectors to create more structured stylesheets.

examples to help you understand CSS preprocessors (Sass and Less) :

Variable Usage

CSS preprocessors allow you to define variables for easy reusability throughout your stylesheets.

Sass Example 

$primary-color: #ff0000;
.button {
  background-color: $primary-color;
}
.text {
  color: $primary-color;
}

Less Example 

@primary-color: #ff0000;
.button {
  background-color: @primary-color;
}
.text {
  color: @primary-color;
}

In both Sass and Less , a variable called primary-color is defined and assigned the value #ff0000. This variable is then used in both the .button and .text selectors. If you want to change the primary color, you only need to modify the variable value, and it will be automatically updated throughout the stylesheet.

Nesting

CSS preprocessors allow you to nest selectors within each other, improving readability and reducing code repetition.

Sass Example 

.container {
  background-color: #f0f0f0;
  h1 {
    font-size: 24px;
    color: #333;
  }
  p {
    font-size: 16px;
    color: #666;
  }}

Less Example 

.container {
  background-color: #f0f0f0;
  h1 {
    font-size: 24px;
    color: #333;
  }
  p {
    font-size: 16px;
    color: #666;
  }}

In both Sass and Less , nesting is used to define styles for the .container, h1, and p selectors. This nesting makes the code more readable and allows for a clear hierarchy of styles.

Mixins

Mixins allow you to define reusable blocks of styles that can be included in multiple selectors.

Sass Example 

@mixin border-radius($radius) {
  border-radius: $radius;
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
}
.button {
  @include border-radius(4px);
}
.box {
  @include border-radius(8px);
}

Less Example 

.border-radius(@radius) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}
.button {
  .border-radius(4px);
}
.box {
  .border-radius(8px);
}

Both Sass and Less allow you to define a mixin called border-radius, which sets the border radius with vendor prefixes. The mixin is then included within the .button and .box selectors, applying the border radius styles to those elements.

To use Sass or Less, you need to compile the preprocessor code into regular CSS that the browser can understand. Feel free to copy your Sass code and compile it into css using our free Sass compiler in service tools.