In this article, we explore the question of whether CSS is making Sass obsolete in front-end web development. We examine the advantages and disadvantages of both CSS and Sass and provide insights on which option may be best for your project.

CSS vs Sass – is Sass obsolete | WCQ34 | 23-04-23

Instructions

In this episode of Weekly Code Quickies we will be looking at the differences and similarities between CSS and Sass.
I will cover:

Variables
Nesting
Mixins , extends , functions and more
Importing
Math

Resources

Variables

CSS

:root {
  --primary-color: #ff0000;
  --secondary-color: #00ff00;
  --tertiary-color: #0000ff;
}

body {
  background-color: var(--primary-color);
}

Sass

$primary-color: #ff0000;
$secondary-color: #00ff00;
$tertiary-color: #0000ff;

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

Sass vs CSS

Sass variables are defined with a $ sign and CSS variables are defined with a -- sign.
Sass variables are defined in the scope of the file and CSS variables are defined in the scope of the document.
Sass variables can be used in any CSS property and CSS variables can only be used in properties that accept a <custom-ident> value.
Sass variables can be used in media queries and CSS variables can not be used in media queries.
Sass variables can be used in selectors and CSS variables can not be used in selectors.
Sass variables can be used in JavaScript and CSS variables can not be used in JavaScript.

Nesting

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li>
      <a href="#">Products</a>
      <ul>
        <li><a href="#">Product 1</a></li>
        <li><a href="#">Product 2</a></li>
        <li><a href="#">Product 3</a></li>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav ul li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  border: 1px solid #000;
  padding: 0.5rem 1rem;
  margin: 0.5rem;
  border-radius: 0.5rem;
  transition: all 0.3s ease-in-out;
}

nav ul li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  font-size: 1.5rem;
  color: #000;
  padding: 0 1rem;
}
nav ul li a:hover {
  color: #fff;
  background-color: #000;
}

/* Tested css */
nav {
  & ul {
    & li {
      & a {
        &:hover {
          color: #fff;
          background-color: #000;
        }
      }
    }
  }
}

Sass

sass code

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;

  & ul {
    display: flex;
    justify-content: space-between;
    align-items: center;

    & li {
      display: flex;
      justify-content: space-between;
      align-items: center;

      & a {
        display: flex;
        justify-content: space-between;
        align-items: center;
        &:hover {
          color: #fff;
          background-color: #000;
        }
      }
    }
  }
}

Sass vs CSS

Sass nesting is more readable than CSS nesting.
Sass nesting is more maintainable than CSS nesting.
Sass nesting is more scalable than CSS nesting.
Sass nesting is more reusable than CSS nesting.
Sass nesting is more DRY than CSS nesting.
Sass nesting is more performant than CSS nesting.
Sass nesting is more flexible than CSS nesting.
Sass nesting is more powerful than CSS nesting.
Sass nesting is more expressive than CSS nesting.
Sass nesting is more consistent than CSS nesting.
Sass nesting is more intuitive than CSS nesting.

Mixins , extends , functions and more

CSS

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav ul li {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav ul li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Sass

@mixin flex-center {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav {
  @include flex-center;

  ul {
    @include flex-center;

    li {
      @include flex-center;

      a {
        @include flex-center;
      }
    }
  }
}

Sass vs CSS

Sass mixins are more readable than CSS mixins.
Sass mixins are more maintainable than CSS mixins.
Sass mixins are more scalable than CSS mixins.
Sass mixins are more reusable than CSS mixins.
Sass mixins are more DRY than CSS mixins.

Importing

CSS

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");

Sass

@import "variables";
@import "mixins";
@import "functions";
@import "extends";

Sass vs CSS

Sass importing is more readable than CSS importing.
Sass importing is more maintainable than CSS importing.
Sass importing is more scalable than CSS importing.
Sass importing is more reusable than CSS importing.
Sass importing is more DRY than CSS importing.
Can not import CSS files in CSS.
Can import CSS files in Sass.
Can import Sass files in Sass.

Math

CSS

.container {
  width: 100%;
  height: 100%;
  padding: 1rem;
  margin: 1rem;
  border: 1px solid #000;

  width: calc(100% - 2rem);
}

Sass

$padding: 1rem;
$margin: 1rem;
$border: 1px solid #000;

.container {
  width: calc(100% - #{$padding * 2});
  height: calc(100% - #{$padding * 2});
  padding: $padding;
  margin: $margin;
  border: $border;
}

Sass vs CSS

Sass math is more readable than CSS math.

Conditionals

Loops

Conclusion

Resources

Sass vs PostCSS

Video

CSS (Cascading Style Sheets) and Sass (Syntactically Awesome Style Sheets) are both used to style web pages. CSS is the language used to style the web pages while Sass is a preprocessor for CSS, which means it enhances the features of CSS by providing additional functionality like nesting, variables, and mixins. With the introduction of CSS preprocessors like Sass, the debate has been going on whether CSS is making Sass obsolete or not.

CSS has come a long way since its inception in 1996. It has evolved and has become more powerful and efficient over time. With the introduction of CSS3, CSS has added more features like gradients, animations, transitions, and much more, making it more versatile than ever. CSS now supports almost everything that Sass does. For example, let’s consider a simple example of nesting in Sass:

nav {
  ul {
    li {
      a {
        color: red;
      }
    }
  }
}

This code will generate the following CSS:

nav ul li a {
  color: red;
}

However, CSS now supports nesting too. Here’s how the same code looks in pure CSS:

Copy code nav ul li a {
  color: red;
}

As we can see, CSS has now caught up to Sass in terms of nesting.

Another advantage of Sass over CSS is the use of variables. Variables can be used to store values like colors, font sizes, etc. and can be used throughout the code, making it easier to maintain and change. However, CSS now also supports variables. Here’s an example of how variables are used in Sass:

$primary-color: #3498db;

nav {
  background-color: $primary-color;
}

h1 {
  color: $primary-color;
}

this code will generate the following CSS:

  background-color: #3498db;
}

h1 {
  color: #3498db;
}

CSS variables work in a similar way. Here’s how the same code looks in pure CSS:

:root {
  --primary-color: #3498db;
}

nav {
  background-color: var(--primary-color);
}

h1 {
  color: var(--primary-color);
}

As we can see, CSS variables work the same way as Sass variables.

Mixins are another feature of Sass that makes it popular among developers. Mixins allow developers to reuse a set of CSS declarations in multiple places, making the code more modular and easier to maintain. However, CSS now also supports mixins through the @mixin and @include rules. Here’s an example of how mixins are used in Sass:

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}

.box {
  @include border-radius(10px);
}

This code will generate the following CSS:

“css

.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}

CSS mixins work in a similar way. Here's how the same code looks in pure CSS:


```sass

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}

.box {
  @include border-radius(10px);
}

As we can see, CSS mixins work the same way as Sass mixins.

In conclusion, while Sass was once a game-changer for front-end development, CSS has evolved to include many of the features that made Sass popular. CSS preprocessors like Sass still have their benefits, but with CSS becoming more versatile and powerful, the need for Sass is decreasing.

That being said, Sass still has its advantages, especially for larger projects where code maintainability is important. Sass provides better organization and modularity, making it easier to maintain and scale the codebase. Sass is also more concise than CSS, reducing the amount of code needed to achieve the same result.

In the end, it comes down to personal preference and the specific needs of the project. For small projects, CSS may be enough, but for larger projects, Sass may be the better option. Either way, it’s important to understand the strengths and weaknesses of both CSS and Sass to make an informed decision.

To sum up, while CSS has come a long way and now includes many of the features that made Sass popular, Sass still has its place in modern web development. As developers, it’s up to us to choose the best tool for the job and stay up-to-date with the latest trends and technologies to create the best user experience possible.

Is CSS Making Sass Obsolete? A Look at the Pros and Cons

CSS vs Sass – is Sass obsolete | WCQ34 | 23-04-23

Instructions

Resources

Variables

CSS

Sass

Sass vs CSS

Nesting

Sass

Sass vs CSS

Mixins , extends , functions and more

CSS

Sass

Sass vs CSS

Importing

CSS

Sass

Sass vs CSS

Math

CSS

Sass

Sass vs CSS

Conditionals

Loops

Conclusion

Resources

Video

Like this:

Leave a Reply Cancel reply

CSS vs Sass – is Sass obsolete | WCQ34 | 23-04-23

Instructions

Resources

Variables

CSS

Sass

Sass vs CSS

Nesting

Sass

Sass vs CSS

Mixins , extends , functions and more

CSS

Sass

Sass vs CSS

Importing

CSS

Sass

Sass vs CSS

Math

CSS

Sass

Sass vs CSS

Conditionals

Loops

Conclusion

Resources

Video

Sharing means caring:

Like this:

Leave a Reply Cancel reply