CSS to SASS convert or not?

Asked

Viewed 177 times

1

I have several files in css, I am in doubt if I rewrite it in Sass to be able to give a better maintenance in the future or not, is it really advantageous?

css sass

  • Friend is always good to use Ass for future changes and agility, but you have to put in the balance and analyze if it is worth the work.

  • I get it, I’ll analyze it, it’s a lot of files but maybe it’s an advantage in the future.

  • 1

    It’s not worth it. First that I see as unnecessary work, after that can actually hinder maintenance, after all not all dev works with SASS, SCSS etc... so you limit a lot of people who move the code, besides you have to have a compiler, and one may not have this compiled in an agile way. I don’t know, I only see disadvantages... But each one of you. I found your question based on opinions...

  • I use Gulp to copy and make other automations anyway dev has to have an extra experience to maintain, Sass would only be another task for Gulp to do.

1 answer

0

It is a little relative and will generate many contradictory opinions, not least because one of the positive appellations on the SASS is that you don’t need to convert CSS in SASS, since the SASS is an extension of CSS. On the other hand, the SASS, gives you different things.

Next, I present some benefits in the use of SASS:

- Compatible with the CSS:

If you have bases CSS, perceive and develop SASS will be peaceful. SASS has two different syntaxes, the SASS in itself and the SCSS, which is the most used. The syntax SCSS is compatible with CSS, this implies that if you rename the . css file into . scss, you have the SCSS file without any problem.

- Use of variables:

One of the great benefits of using the SASS 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, allows "nesting" elements HTML using selectors CSS. For example:

.navbar {
  color: $blue;
}

- Use of Mixins:

The use of Mixins comes into action when you have repeated blocks of code. For example:

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

After you have defined the Mixin, you can use it anywhere, using the @include:

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

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

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

- Greater community and good documentation:

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

In short, there are many more benefits to using preprocessors CSS like the SASS, because they are always an asset, since they expand the basic resources of CSS, providing a set of powerful features that will boost your productivity. In addition to the benefits mentioned above, SASS allows you to make use of inheritance, function, control directives and expressions as if (), for () or while (), types of data, interpolation, etc..

If you’re looking to do the Refactoring of CSS in SASS well structured, just use some conversion tools, such as this here.

Browser other questions tagged css sass

You are not signed in. Login or sign up in order to post.