SASS forma completa

SASS significa hojas de estilo sintácticamente asombrosas . Fue diseñado por Hampton Catlin y desarrollado por Natalie Weizenbaum. Sass es un preprocesador de CSS. Sass reduce la repetición de CSS y, por lo tanto, ahorra tiempo. Es un lenguaje de hojas de estilo. Es completamente compatible con todas las versiones de CSS.

Es un lenguaje que te permite escribir CSS de una manera más conveniente y eficiente. Hay dos formas de escribir Sass, una es usando la sintaxis SASS y la otra es la sintaxis SCSS. Le permite escribir código DRY (Don’t Repeat Yourself) para que el código sea más rápido, más eficiente y más fácil de mantener.

¿Cuándo usar SASS?
Cuando las hojas de estilo son más grandes, más complejas y más difíciles de mantener, se puede usar el preprocesador CSS SASS. SASS le permite usar funciones que no existen en CSS, como variables, reglas anidadas, mezclas, importaciones, herencia, funciones integradas y otras cosas.

Características de SASS:

• Sass es totalmente compatible con CSS.
• Es poderoso que CSS.
• Es un superconjunto de CSS.
• Se compila en CSS legible.
• Admite variables, anidamiento y mixins.

Ejemplo: CSS

//CSS
.header {
  width: 100%;
}
.header ul {
  padding: 30px;
}
.header ul li {
  font-size: 25px;
}
.header ul li.first {
  color: green;
  font-weight: bold;
}
.header ul li.sec {
  color: blue;
}

Ejemplo: SASS

//SASS
//The above css can be written in sass without repetition
.header
{
width:100%;
  ul{
    padding:30px;
    li{
      font-size:25px;
      &.first{
        color:green;
        font-weight:bold;
      }
      &.sec{
        color:blue;
      }
    }
  }
}

//html
<div class="header">
<ul>
<li class="first">SASS</li>
<li class="sec">SCSS</li>
</ul>
</div>

Producción:

Méritos de SASS:

• Menos escritura que CSS.
• Le permite reutilizar el código.

Deméritos de SASS:

• Los navegadores no entienden SASS, por lo que debe convertirse a CSS.
• Difícil de solucionar.