CSS for SASS convert or not? [closed]

It's a bit relative and it will generate a lot of contradictory opinions, because one of the positive things about SASS is that you do not need to convert CSS to SASS , since SASS is an extension of% with%. On the other hand, CSS , gives you different things.

Here are some benefits in using SASS :

- Compatible with CSS:

If you have a basis of SASS , perceiving and developing CSS will be peaceful. SASS has two different syntaxes, SASS itself and SASS , which is the most used. The SCSS syntax is compatible with SCSS , which means that if you rename the .css file in .scss, you will have the file in SCSS without any problem.

- Variable Usage :

One of the great benefits of using CSS is the ability to use variables. For example:

$blue: #004BB4;

After creating the variable, you can use it wherever you want:

h1 {
  color: $blue;
}

- Nested Syntax :

In other words, you can "nest" elements SASS using selectors HTML . For example:

.navbar {
  color: $blue;
}

- Use of Mixins :

Using Mixins comes into play when you have blocks of code repeated. For example:

@mixin set-font( $family: 'Ubuntu' , $weight: 400 , $style: normal ) {
  font-family: $family , 'Arial', 'Helvetica', sans-serif;
  font-style: $style;
  font-weight: $weight;
}

Once you have set Mixin , you can use it anywhere you want, using @include :

h1 {
  @include set-font;
  color: $blue;
}

If you need to upgrade to Mixin , simply pass the parameters inside the @include call.

h1.callout {
  @include set-font('Nunito',600);
  color: $azul;
}

- Larger community and good documentation:

One of the great advantages is undoubtedly the Official Documentation and Communities .

In short, there are many more benefits in using CSS preprocessors like CSS , because they are always a plus as they extend the core features of SASS , providing a set of powerful features that productivity. In addition to the benefits mentioned above, SASS allows you to make use of inheritance , functions , control policies and such as CSS , if () or for () , data types , tween , etc.

If you are looking to do the refactoring of while () in CSS well structured, just use some conversion tools, such as here .