Las 7 keywords en archivo SASS son un grupo de recursos que puedes empezar a integrar en tus programas de texto de estilos para cumplir con una serie de pequeñas tareas del desarrollo web. Además, gracias a las características de SASS (Syntactically Awesome Style Sheets), puedes potenciar cada una de estas keywords al anidarlas, generar y combinarlas, entre otras opciones.

En este artículo, vas a aprender acerca de las principales 7 keywords en archivo SASS: @media, @extend, @of, @for, @while, @function e @import.

¿Qué encontrarás en este post?

Keywords en archivo SASS

Las 7 keywords en archivo SASS de las que te hablamos aquí van a permitirte realizar varias acciones que te resultarán necesarias antes de entregar tu producto final.

@media

Las media-queries son keywords que, dentro del funcionamiento de SASS, pueden anidarse y, así, ayudarnos a cumplir con diferentes tipos de tareas. @media nos permite realizar la interpolación y que usemos expresiones SassScript directamente en la consulta de las funciones que declaremos. Con las media anidadas, SASS también ayudará a que los navegadores admitan fácilmente este tipo de elementos.

A continuación, puedes ver esta keyword en acción:

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
  width: 500px;
   }
}

#resultado

@media screen {
  .sidebar {
   @media (orientation: landspace) {
    width: 500px;
   }
  }
}

@extend

@extend es una keyword parecida a mixin, pero no es necesario declararla ni que tenga la naturaleza de una de ellos. Esta kewyord tiene el objetivo de permitir heredar las reglas de un estilo. El sistema de herencia no permite la parametrización, por lo que debes ejecutarla con mucho cuidado.

A continuación, puedes observar la sintaxis y la acción de esta keyword dentro de un programa para el desarrollo web:

.message {
   border: 1px solid #ccc;
   padding: 10px;
   color: #333;
}

.sucess {
  @extend .message;
   border-color: green;
}

#resultado

.message, .sucess {
   border: 1px solid #cccccc;
   padding: 10px;
   color: #333;
}

.sucess {
   border-color: green;
}

@if

La keyword @if te va permitir escribir reglas condicionales bajo la utilización del preprocesador SASS. En este caso, también vas a poder hacer controles de flujo dentro de tus construcciones de texto.

p {
   @if 1 + 1 == 2 {border: 1px solid; }
   @if 5 < 3 {border: 2px dotted; }
   @if null {border: 3px double;}
}

#resultado

p {
  border: 1px solid;
}

@for

Por otro lado, @for es la función que va a permitirte hacer un bucle para escribir las reglas. Las que quieras crear pueden reproducirse, como puedes ver a continuación. Una función similar es la de la keyword @each, con la que también puedes recorrer las listas de tu programa.

@for $1 from 1 through 3 {
  .item-# {$i} {width: 2em * $i; }
}

#resultado

.item-1 {
   with: 2em;
}

.item-2 {
   width: 4wm;
}

.item-3 {
  width: 6em;
}
#función del each, resultado:

.puma-icon {
  background: url ('/images/puma.png');
}

.sea-slug-icon {
  background: url ('/images/sea-slug.png');
}
.egret-icon {
  background: url ('/images/egret.png');
}

@while

La regla o keyword @while es la que te permite realizar un bucle mientras se está cumpliendo una función. En el siguiente extracto, vemos la reasignación de la variable:

$i: 6;
@while $i > 0 {
   .item-#{$i} {width: 2em * $i;}
$i: $i - 2;
}

#resultado

.item-6 {
   width: 12em;
}
.item-4 {
   width: 8em;
}
.item-2 {
   width: 4em;
}

@function

Una de las keywords en archivo SASS más importantes es la de @function, ya que te permite crear propias y nuevas funciones. Estas también tienen similitudes con los mixins, pero te van a devolver valores, mientras que el mixin te devuelve CSS.

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width ($n) {
    @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width (5);}

#resultado

#sidebar {
  width: 2450px;
}

@import

La kewyord @import es una directiva que se comporta de forma diferente según sea la extensión del archivo que se importe. Esta se mantiene intacta por varios motivo, como pueden ser: si la extensión del archivo es .css, si el archivo empieza por http, si el archivo es una url() o si la instrucción tiene media queries. De cualquier forma, te permite importar stylesheets de CSS y SASS.

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url (foo);

Tras conocer las 7 keywords en archivo SASS, entenderás cómo se establecen cada una de ellas dentro de un programa de desarrollo web. Además, estas son muy importantes para realizar ciertas acciones dentro del programa.

No obstante, esto es solo una pequeña porción de toda la información que podrías estar aprendiendo si decides matricularte en nuestro Desarrollo Web Full Stack Bootcamp. ¿Quieres convertirte en todo un profesional en pocos meses? ¡No te pierdas esta formación intensiva y cambia tu vida!