CSS Sass & Less

Sass & Less in CSS

Writing CSS is simple when a website is small. But as a project grows, CSS files can become long and difficult to manage. You may repeat the same colors, spacing, font sizes, and styles many times.

Sass and Less are CSS preprocessors that help make stylesheets easier to write, organize, and maintain.

You write code using Sass or Less features, and then it is converted (compiled) into normal CSS that browsers can understand.

Why Use Sass or Less?

Sass and Less add useful programming-like features that regular CSS traditionally did not provide.

They can help you:

• Store frequently used values in variables.
• Nest related CSS rules.
• Create reusable groups of styles.
• Split large stylesheets into smaller files.
• Perform simple calculations.
• Reduce repeated CSS code.

Sass

Sass stands for Syntactically Awesome Style Sheets. It is a popular CSS preprocessor.

Sass supports two syntaxes: Sass and SCSS. SCSS is more commonly used because its syntax looks very similar to regular CSS.

Sass Variables

Variables allow you to save a value and reuse it throughout your stylesheet. Sass variables start with a $ symbol.

$primary-color: #1f4ed8;

button {
  background-color: $primary-color;
  color: white;
}

If the main color changes, you only need to update the variable instead of changing it everywhere.

Sass Nesting

Sass lets you place related selectors inside another selector.

.nav {
  background: #222;

  a {
    color: white;
    text-decoration: none;
  }
}

After compilation, Sass creates normal CSS for .nav and .nav a.

Sass Mixins

A mixin is a reusable collection of CSS properties.

@mixin rounded-button {
  padding: 10px 20px;
  border-radius: 6px;
}

button {
  @include rounded-button;
}

Mixins are useful when the same group of styles is needed in several places.

Less

Less is another CSS preprocessor. Its syntax is also close to regular CSS, making it easy for beginners to understand.

Less Variables

Less variables use the @ symbol.

@primary-color: #1f4ed8;

button {
  background-color: @primary-color;
  color: white;
}

The idea is similar to Sass variables, but the syntax is different.

Less Nesting

Less also supports nested rules.

.card {
  padding: 20px;

  h3 {
    font-size: 20px;
  }
}

This keeps styles for related elements together and can make the stylesheet easier to read.

Sass vs Less

Both tools solve similar problems.

• Sass: Uses $ for variables and provides powerful features for larger projects.
• Less: Uses @ for variables and has a simple CSS-like syntax.
• Both: Support variables, nesting, reusable styles, and calculations.
• Browser support: Browsers do not directly read Sass or Less files. They must first be compiled into CSS.

Key Takeaways

• Sass and Less are tools that make CSS development easier.
• They help reduce repeated code and organize large stylesheets.
• Sass commonly uses the .scss file extension.
• Less normally uses the .less file extension.
• Both must be converted into standard CSS before being used by a browser.
• Learning one preprocessor can be helpful when working on larger web projects.