What is SASS technology?

13

Nowadays the dynamism in producing styles for a page or set of pages is essential for the developer. And CSS sometimes becomes somewhat complex with complicated, repetitive, and highly mathematical selectors.

A technology able to overcome this difficulty would be in building the style of HTML pages would be a vital tool. I would like an explanation about SASS because, the other day a friend of mine said the teacher had programmed the CSS? And I wondered if such a feat would be possible?

  • What exactly does SASS do?
  • Is it a preprocessor?
  • In what language is SASS compiled?
  • What do I need to use it to produce styles?
  • What do I call it in an HTML page?
  • Would any example be possible?
asked by anonymous 10.10.2015 / 02:04

1 answer

12

SASS, as you said it yourself, is a preprocessor. The idea of using SASS is just to extend CSS with some functionality that makes writing style sheets easier. Some of these features are nesting, mixins, and variables.

The most important part of SASS is that it does not exist as a substitute for CSS. That way, you will never include an SASS code file on your pages. The idea of SASS is different: it gives you a syntax in which you write your style sheets with the additional features. After that, a preprocessor does the work of "translating" all this into conventional CSS that can finally be included in your HTML pages.

With this, you can think of SASS as a facilitator. Its features are, in fact, leaner and more organized ways of doing the usual CSS stuff. That way, when you ask what language it is compiled in, I believe the most correct would be to say that it is rendered and becomes the usual CSS.

To use it in producing styles, all you need to do is learn the SASS features, encode your stylesheets using these features, and then use the preprocessor to translate this into common CSS. Note that in this task there are several facilitators. For example, if you know Grunt or Gulp, there are ways to automate the task of passing your SASS stylesheets through the preprocessor.

To make it clearer, I believe that in a simplified way the workflow when using SASS can be summarized as follows:

  • Write the style sheet using all the SASS features you find necessary. These stylesheets will be in .sass or .scss format, depending on the syntax (SASS has two syntaxes, for more information on this see #

  • The SASS preprocessor is used to convert the .sass or .scss style sheets into usual .css style sheets. An example of how to do this would be installing the sass command-line tool and using the sass input.scss output.css command that converts input.scss to output.css .

  • Converted style sheets, that is, in .css format, are included in your HTML page.

  • This is just an overview of the subject. It is best to go to the SASS site and read in more detail. On the "Learn SASS" page has plenty of functionality explained and on page " Install " has the necessary instructions to install SASS and start using it.

        
    10.10.2015 / 03:58