Hablar con descaro a

Significa "Hojas de estilo sintácticamente impresionantes". Sass es una extensión de hojas de estilo en cascada (CSS), el lenguaje utilizado para definir el diseño y el formato de HTML documentos. Utiliza CSS totalmente compatible sintaxis, pero proporciona características adicionales como variables CSS y reglas anidadas que hacen que CSS sea más eficiente y fácil de editar.

Uno de los inconvenientes del CSS estándar es que no admite las variables. Por ejemplo, si tiene varios estilos que son del mismo color, debe definir el color por separado para cada estilo. Si decide cambiar el color, debe cambiarlo para cada instancia en el documento CSS. Con Sass, puede definir el color como una variable y asignar la variable a cada estilo que lo use. Si decide cambiar el color, solo necesita cambiarlo una vez, donde se define inicialmente en el documento.

El siguiente ejemplo muestra cómo definir y usar una variable CSS en Sass.

$ myColor: #00695C;

.pageTop {background-color: $ myColor; }
.infoText {color: $ myColor; }
.pageBottom {background-color: $ myColor; }

Sass también admite reglas anidadas, lo que permite a los desarrolladores escribir código más eficiente. En el siguiente ejemplo, el .botón la clase está anidada dentro de #top p estilo.

#top p
{
color: #004D40;

.botón
{
color de fondo: #039BE5;
Color: #FFF;
}
}

Cuando compilado, el código anterior producirá el siguiente CSS:

#top p {color: #004D40; }
#top p .button {background-color: #039BE5; color: #FFF; }

Si bien Sass ofrece varios beneficios para desarrolladores de sitios de Internet, Los documentos Sass no son reconocidos por navegadores web. Por lo tanto, un archivo Sass primero debe compilarse en CSS antes de usarse en un documento HTML. Esto se puede hacer localmente antes de cargar el CSS al servidor web usando un programa como Compass.app or Koala. También se puede compilar en el servidor utilizando un PHP or Rubí script que compila Sass en CSS.