DEV Community

Fernando
Fernando

Posted on • Edited on

Sass I

#webdev #beginners #css

Sass es un preprocesador CSS que nos permite dotar de superpoderes a css por medio de la anidación de selectores, la creación de archivos parciales, y funciones avanzadas, Todo este proceso será compilado por el compilador de sass para entregarnos finalmente un único archivo css ya listo y optimizado para producción.

Que es la compilación de código?

La compilación de código es el proceso de transformar código fuente escrito en un lenguaje de programación de alto nivel (como C++, Java, o TypeScript) a un lenguaje de nivel inferior (como código máquina, bytecode, o JavaScript) que puede ser ejecutado por una computadora. Este proceso es realizado por un compilador, que toma el código fuente, lo analiza, lo optimiza y genera el código objeto correspondiente.

Proceso de instalación y Compilación con Node.

Instalamos SASS por medio de la terminal de comandos utilizando NPM:

npm install -g sass
Enter fullscreen mode Exit fullscreen mode

Una vez instalado, puedes compilar un archivo SASS indicando en el comando el archivo que quieres compilar y seguido la ruta destino y el nombre con el que quieres que la compilación salga. Por ejemplo puedes compilar un archivo llamado styles.scss a CSS ejecutando el siguiente comando en la terminal:

sass styles.scss styles.css
Enter fullscreen mode Exit fullscreen mode

Este comando compilará styles.scss y generará un archivo styles.css con los estilos en CSS. Cabe aclarar que el archivo de salida de la compilación puede llevar el nombre que tú quieras.

Para lograr compilar y que el resultante ya esté optimizado y comprimido ejecutamos el siguiente comando:

npx sass --style=compressed input.scss output.css
Enter fullscreen mode Exit fullscreen mode

También podemos hacer que el resultado de la compilación sea mas legible y amigable para esto podemos ejecutar el siguiente comando:

npx sass --style=expanded input.scss output.css
Enter fullscreen mode Exit fullscreen mode

Es importante que sepamos que de esta forma el archivo css resultante no se encuentra optimizado es por eso que la opcion recomendable para compilar es compressed.

Si queremos que la terminal esté pendiente de los nuevas modificaciones y siga con el proceso de compilación sin que el mismo se paré podemos ejecutar el siguiente comando:

npx sass --watch input.scss output.css
Enter fullscreen mode Exit fullscreen mode

con la combinación de teclas ctrl + c podemos frenar el proceso de compilación en cualquier momento.

Proceso de compilacion con la extensión Live Sass compiler.

  • Buscamos la extensión en la parte de extensiones de visual studio Code.

Image description

  • configuramos las opciones que nos ofrece live sass:

Image description

  • Ya dentro de la configuración de la extensión damos click en settings Json dentro de la opción Format

Image description

Una vez dentro nos encontraremos con el archivo de configuración de Visual Studio donde debemos pegar el siguiente fragmento de código para definir el tipo de compilación y la carpeta de destino de la misma.

{
  "liveSassCompile.settings.formats": [
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": "/css" 
    }
  ],
  "liveSassCompile.settings.generateMap": true,
  "liveSassCompile.settings.showOutputWindow": true
}
Enter fullscreen mode Exit fullscreen mode

format: Especifica el formato del CSS generado. Puede ser nested, expanded, compact, o compressed.
extensionName: La extensión del archivo compilado.
savePath: La ruta donde se guardarán los archivos compilados. Puedes especificar una ruta relativa a la ubicación del archivo SCSS.

Diferentes formatos de compilacion

Formato compact

Descripción: En el formato compact, cada regla CSS se escribe en una sola línea.
Características:
Menos líneas en comparación con el formato expanded.
Las reglas aún son legibles.
No elimina espacios en blanco innecesarios ni comentarios.

.class1 {
  color: red;
}
.class2 {
  color: blue;
}
Enter fullscreen mode Exit fullscreen mode
Se convierte en : 
.class1 { color: red; }
.class2 { color: blue; }
Enter fullscreen mode Exit fullscreen mode

Formato compressed

Descripción: En el formato compressed, el CSS generado está completamente minificado.
Características:
Elimina todos los espacios en blanco innecesarios.
Elimina los comentarios.
Todo el CSS se escribe en una sola línea.
Ideal para la producción, ya que reduce el tamaño del archivo.

.class1 {
  color: red;
}
.class2 {
  color: blue;
}
Enter fullscreen mode Exit fullscreen mode
Se convierte en: 
.class1{color:red}.class2{color:blue}
Enter fullscreen mode Exit fullscreen mode

Nested

Características del Formato nested
Estructura Jerárquica: Mantiene la estructura de anidamiento de los selectores como se escriben en el archivo Sass, lo que facilita la comprensión de las relaciones entre los selectores.
Legibilidad: Es fácil de leer y entender, ya que la salida CSS sigue una estructura similar a la del Sass original.
Espacios y Sangrías: Utiliza sangrías para mostrar la jerarquía de los selectores

.navbar {
  background-color: #333;

  .nav-item {
    color: #fff;

    &:hover {
      color: #f0f0f0;
    }
  }
}
Enter fullscreen mode Exit fullscreen mode
Se convierte en: 
.navbar {
  background-color: #333; }
  .navbar .nav-item {
    color: #fff; }
    .navbar .nav-item:hover {
      color: #f0f0f0; }
Enter fullscreen mode Exit fullscreen mode

Sintaxis SASS

Nesting

El nesting en Sass se refiere a la capacidad de anidar selectores CSS dentro de otros selectores de una manera que refleja la jerarquía HTML, lo que facilita la organización y la legibilidad del código CSS.

¿Cómo Funciona el Nesting en Sass?
En lugar de escribir selectores CSS largos y repetitivos, puedes anidar selectores dentro de otros selectores para indicar que están relacionados. Sass luego convierte esta estructura anidada en CSS plano, expandiendo los selectores anidados según corresponda.

1) Ejemplo basico de Nesting en Sass

HTML básico 
    <div>
      <p>Lorem ipsum</p>
    </div>
    <br />
    <br />
    <br />
    <br />
Enter fullscreen mode Exit fullscreen mode
CSS Inicial (Éste recuadro muestra como ustedes tendrían sus estilos css antes de usar SASS) 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  padding: 15px;
}

div p {
  font-size: 20px;
  color: white;
  font-family: Arial, sans-serif;
}
Enter fullscreen mode Exit fullscreen mode
Lo mismo escrito con sass 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  padding: 15px;
  p {
    font-size: 20px;
    color: white;
    font-family: Arial, sans-serif;
  }
}
Enter fullscreen mode Exit fullscreen mode

2) Segundo Ejemplo mas complejo

HTML básico 
    <ul>
      <li>
        <a href="">Enlac1 </a>
        <a href="">Enlace2 </a>
      </li>
    </ul>
    <br />
    <br />
    <br />
    <br />
Enter fullscreen mode Exit fullscreen mode
css inicial (Éste recuadro muestra como ustedes tendrían sus estilos css antes de usar SASS) 
ul {
  list-style: none;
}

ul li {
  padding: 15px;
  display: inline-block;
}

ul li a {
  text-decoration: none;
  font-size: 16px;
  color: #444;
}
Enter fullscreen mode Exit fullscreen mode
Lo mismo escrito con SASS 
ul {
  list-style: none;
  li {
    padding: 15px;
    display: inline-block;
    a {
      text-decoration: none;
      font-size: 16px;
      color: #444;
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

3) Tercer Ejemplo mas uso del operador &

El operador & en SASS es conocido como el operador de referencia padre y se utiliza principalmente para hacer referencia al selector de nivel superior dentro de una regla anidada. Este operador es útil para aplicar estilos en función del contexto del selector actual y permite crear selectores más específicos de manera concisa.

HTML inicial 
 <ul>
      <li>
        <a href="">Enlac1 </a>
        <a href="">Enlace2 </a>
      </li>
    </ul>
Enter fullscreen mode Exit fullscreen mode
CSS Inicial (Éste recuadro muestra como ustedes tendrían sus estilos css antes de usar SASS) 
li {
  color: blue;
}

li:hover {
  color: red;
}
Enter fullscreen mode Exit fullscreen mode
Lo mismo escrito Con SASS 
li {
  color: blue;
  &:hover {
    color: red;
  }
}
Enter fullscreen mode Exit fullscreen mode

vars

Las variables son una manera de guardar información que necesites reutilizar en tus hojas de estilos: colores, dimensiones, fuentes o cualquier otro valor. SASS utiliza el símbolo dólar ($) al principio de la palabra clave para crear una variable.

Estas variables se comportan como atributos CSS, y su valor puede ser cualquiera que pudiera adquirir un atributo CSS.

Una buena práctica común consiste en definir todas las variables globales al principio del fichero, para que puedan localizarse rápidamente.

Ejemplo de variables: 

    <div>
      <h4 class="titulo">Lorem ipsum</h4>
      <p class="informacion">Lorem, ipsum dolor sit amet</p>
    </div>
    <br />
    <br />
    <br />
    <br />
Enter fullscreen mode Exit fullscreen mode
CSS inicial(Éste recuadro muestra como ustedes tendrían sus estilos css antes de usar SASS) 
.titulo {
  font: normal;
  font-size: 24px;
  font-family: Open Arial, Helvetica, sans-serif;
  color: #a1a1a1;
}

.información {
  color: #444;
}
Enter fullscreen mode Exit fullscreen mode
Lo mismo escrito con SASS 

$fuente-titulo: normal, 48px/2, Open Arial, Helvetica, sans-serif;
$color-titulo: #a1a1a1;
$color-información: #444;

.titulo {
  font: $fuente-titulo;
  color: $color-titulo;
}

.información {
  color: #444;
}
Enter fullscreen mode Exit fullscreen mode

Archivos Parciales (partials)

Estos archivos parciales suelen contener fragmentos de código reutilizables, como variables, mixins, funciones, y estilos comunes, que pueden ser compartidos entre múltiples archivos SASS. Estos archivos están destinados a ser importados en otros archivos SASS. los archivos parciales deben escribirse comenzando con _ (guión bajo) algunos ejemplos de archivos parciales pueden ser los siguientes:

_variables.scss
Este archivo contiene todas las variables que se usarán en el proyecto, como colores, fuentes, tamaños, etc.

// _variables.scss
$primary-color: #3498db;
$secondary-color: #2ecc71;
$font-stack: 'Helvetica, sans-serif';
Enter fullscreen mode Exit fullscreen mode

_reset.scss
Este archivo contiene un conjunto de estilos de "reset" para asegurar que los navegadores rendericen todos los elementos de forma más consistente.

// _reset.scss
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
Enter fullscreen mode Exit fullscreen mode

_base.scss
Este archivo contiene estilos base para elementos HTML comunes.

// _base.scss
body {
  font-family: $font-stack;
  color: $primary-color;
}

h1, h2, h3, h4, h5, h6 {
  color: $secondary-color;
}
Enter fullscreen mode Exit fullscreen mode

import

En Sass, @import se utiliza para incluir el contenido de un archivo en otro. Esto permite dividir el CSS en múltiples archivos más pequeños y organizados, lo que facilita la gestión y el mantenimiento del código. A diferencia del @import de CSS, que requiere que el navegador haga múltiples solicitudes HTTP, el @import de Sass se resuelve durante la compilación, combinando todos los archivos en un único archivo CSS.

Ejemplo Básico de @import

Supongamos que tienes dos archivos: por un lado un archivo parcial _variables.scss y por otro lado un archivo principal styles.scss.

_variables.scss

$primary-color: #333;
$font-stack: Helvetica, sans-serif;
Enter fullscreen mode Exit fullscreen mode

styles.scss

@import 'variables';

body {
font: 100% $font-stack;
color: $primary-color;
}
Enter fullscreen mode Exit fullscreen mode

CSS Generado

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

Operaciones Con SASS

En Sass, puedes realizar una variedad de cálculos directamente en tus archivos de estilo, lo que te permite crear estilos dinámicos y flexibles. A continuación se presentan algunos ejemplos de cálculos que puedes hacer en Sass:

Suma 
$base-spacing: 10px;
$double-spacing: $base-spacing + 10px;

.container {
  padding: $double-spacing; // 20px
}
Enter fullscreen mode Exit fullscreen mode
Resta 
$full-width: 100%;
$sidebar-width: 25%;
$content-width: $full-width - $sidebar-width;

.content {
  width: $content-width; // 75%
}
Enter fullscreen mode Exit fullscreen mode
Potencia 
$base: 2;
$exponent: 3;
$power: pow($base, $exponent);

.result {
  width: $power * 10px; // 80px (2^3 = 8)
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

nikl profile image

Level Up Your C# Skills with Pieces!

Nik L. -

daguayza12 profile image

Preparing for an OpenTelemetry Workshop

Diana -

danieljcafonso profile image

This Month in Solid #9: SolidHack started, new fellow and API change 😎

Daniel Afonso -

m1dnightdev profile image

Creating Theme Systems in React with SCSS and Redux

M1dnightGMR -