Sass

Sass is a CSS preprocessor, an extension of CSS that adds power and elegance to the basic language.

    Informações
    • Basically, we use Sass to fix the problems that we have with CSS.
    • Having a single CSS file with thousands of lines of code without any reusable pieces and without any logic, gets completely unmanageable after some time.
    • That is why we use Sass, being that it provides us with a couple of handy features and tools that CSS simpy doens't have, while at the same time, not changing the way that CSS works.

    How it works
    • Instead of writing a CSS file with regular CSS code, we write Sass code in Sass files.
    • Then, we run a compiler and that compiler converts the Sass written into regular CSS code.
    • So, we need to processs our Sass code first, and that is why Sass is called a CSS preprocessor.

    Features
    • Variables: for reusable values such as colors, font-sizes, spacing, etc. Just like other languages.
    • Nesting: to nest selectores inside of one another, allowing us to write less code.
    • Operators: operators for mathematical operations right inside of CSS.
    • (!) Partials and Imports: to write CSS in different files and importing them all into one single file.
    • Mixins: to write reusable pieces of CSS code.
    • Functions: similar to mixins, with the difference that they produce a value that can than be used later.
    • Extends: to make different selectors inherit declarations that are common to all of them.
    • Control Directives: for writing complex code using conditionals and loops.





    Sass and SCSS syntaxes


    Variables and Nesting


    Useful technics
    • Deixar a cor mais escura
      &:hover {
         background-color: darken($color-secondary, 15%);
      }
      15% = quantos % mais escura deve ficar.
    • Deixar a cor mais clara
      &:hover {
         background-color: lighten($color-secondary, 15%);
      }
      15% = quantos % mais escura deve ficar.

    Examples
    • Considerando que temos:
      <ul class="navigation">
         <li> </li>
      <ul>

      Para selecionarmos esse <li>, utilizamos .navigation li {
      }

      Já em Sass, podemos:
      .navigation {
          list-style: none;

          li {
          }
      }

Folder Architeture

How to organize the Sass folders.

Mathematical Functions

Sass mathematical functions.

Creating the Grid Systems

How to configure the row and columns with float layouts, flexbox and CSS Grid.

Creating a Card

How to develop a rotating card.

Media Queries with Mixins

Media Queries using mixins.

Responsive Images (HTML)

Responsive images for different screen sizes.

Responsive Images (CSS)

Responsive images for different screen sizes.

Browser Support

Using @supports.