Cuando hablamos de desarrollo web, los 7 elementos más importantes de SASS salen a relucir, pues son un grupo de herramientas que nos ayudan a potenciar la cantidad de funciones que ofrece la hoja de estilos más conocida: CSS.

Si quieres mantener más organizado tu índice de estilos, sigue leyendo sobre los 7 elementos más importantes de SASS.

¿Qué encontrarás en este post?

Elementos más importantes de SASS

SASS es un preprocesador de la hoja de estilos de CSS que se utiliza para potenciar todas las funcionalidades de la hoja de estilos y para organizarlas.

Sintaxis SASS

Este preprocesador SASS tiene una sintaxis sencilla, ya que no incluye ningún tipo de elemento adicional, como puede ser un paréntesis, unas comillas o un punto y coma. Es simple y directo, como puedes ver a continuación:

nav
    ul
    margin: 0
    padding: 0
    list-style: none

No obstante, esto puede ser un desventaja, aunque facilite tu trabajo como escritor de código, ya que su sintaxis no es 100% compatible con CSS. Por esto, no se puede realizar un copy-paste, aspecto que sí podrías realizar con el preprocesador de SCSS. Además, tiene una curva de aprendizaje mayor que otro tipo preprocesadores.

Variables

Al profundizar en este procesador podemos hablar de las variables, que sirven para almacenar valores y pueden utilizarse como nombres de las propiedades que hemos determinado en CSS, así como para rutas o ficheros.

De esta manera, cuando hayamos declarado las variables y queramos configurar un body, podemos hacer una sustitución simple de dichos valores, lo que resultaría en un extracto con una escritura mucho más sencilla. Además, puedes personalizar todos los elementos en variables, que puedes sobrescribir, lo que te permitirá crear nuevas clases con una guía de estilos predefinida.

$font-stack: Helvetica, sans-serif;
$primary-color #333;

body {
       font: 100% $font-stack;
       color: $primary-color:
}

body  {
       font: 100% Helvetica, sans-serif;
       color: #333;
}

Anidamiento

La condición de anidamiento te permite anidar las reglas de tu código, una dentro de otra. Su beneficio es que te ahorrará mucho código repetitivo. Por tanto, si tenemos un ul dentro de un nav, podemos convertirlo en lo siguiente:

nav {
    ul {
         margin: 0;
         padding: 0;
         list-style: none;
     }
}

nav ul {
         margin: 0;
         padding: 0;
         list-style: none;
     }

Especialización en un elemento

Una ganancia que se relaciona con el anidamiento es la de la especialización en un elemento. Se realiza una parametrización de todos los elementos que coinciden en un mismo elemento HTML de A. Esto nos permitirá obtener un código mucho más ordenado. El aftersun sustituye al padre, generando diferentes bloques en el resultado.

a {
    font-weight: blod;
    text-decoration: none;
    &:hover {  text-decoration: underline; }
    body.firefox & {font-weight: normal; }
}

a {
    font-weight: blod;
    text-decoration: none;
}

a:hover {  
    text-decoration: underline;
}

body.firefox a {
     font-weight: normal; 
}

Mixin sin parámetro

Otro de los elementos más importantes de SASS son los mixins, los cuales nos permiten mezclar propiedades de clases, así como definir funciones de generación de código CSS. Es decir, declaramos funciones con los mixins.

En mixin hay varios tipos. El primero de ellos el de sin parámetros, donde debemos utilizar la palabra clave @include y el nombre del mixin, lo que nos permitirá invocarlo. Esto produce un menú que incluye varios elementos.

@mixin clearfix  {
   display: inline-block;
   &:after {...}
  * html & {height: 1px}
}

.menu { @incluide clearflix; }

.menu {display: inline -bloc;}
.menu:after {...}
*html .menu {height: qpx}

Mixin con parámetro

Otro de los tipos es el de mixin con parámetro, que es cuando entra en juego el tema de las variables. Aquí se puede parametrizar y poner un valor por defecto. Esto es interesante, pues cada motor del navegador tiene una acción y declaración específicas. De cualquier forma, te permitirá no empezar a escribir las particularidades de cada uno de los navegadores varias veces.

@mixin border-radius ($radius)  {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius (10px);}

.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}

Mixin como bloque

Otra parte de los elementos es cuando definimos un mixin con reserva de espacio, es decir, con @content, la cual vendrá sustituida e integrada con elementos que hemos pasado con @incluide. Por tanto, se puede definir como un marcador dentro de la herramienta de SASS.

@mixin apply-to-ie-only {
html.ie {
@content;
  }
}
@include apply-to-ie-only {
#logo {
     background-image: url(/logo.gif);
  }
}

html.ie #logo {
   backgorund-image: irl(/logo.gif);
}

Operadores

En SAAS también encontramos operadores que nos permiten manipular variables y realizar operaciones con ellas.

article [role="main"] {
   float: left;
   width; 600px / 960px * 100%;
}

Ahora que ya conoces los elementos más importantes de SASS que puedes utilizar para implementar mejores funcionalidades y potenciar el contenido de una hoja de estilos, podrás presentar un mejor resultado o producto de un programa de código en desarrollo web. ¿A qué estás esperando para empezar a especializarte? Con nuestro Bootcamp Desarrollo Web estarás más cerca de cumplir este sueño. ¡Súmate pronto y cambia tu vida!