El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

Sass (Syntactically Awesome Stylesheets) es un preprocesador de CSS que permite escribir estilos de manera más eficiente y organizada. Sass añade características como variables, anidamiento, mixins, herencia y más, que no están disponibles en CSS estándar. En esta sección, aprenderemos los conceptos básicos de Sass y cómo integrarlo en nuestros proyectos.

¿Qué es Sass?

Sass es un preprocesador de CSS que extiende las capacidades de CSS con características adicionales que facilitan la escritura y el mantenimiento de hojas de estilo. Sass se compila en CSS estándar, lo que significa que los navegadores pueden interpretar el CSS resultante sin problemas.

Ventajas de usar Sass:

Variables: Permiten almacenar valores que se pueden reutilizar en todo el archivo.
Anidamiento: Facilita la escritura de CSS jerárquico.
Mixins: Reutilización de bloques de código CSS.
Herencia: Permite compartir un conjunto de propiedades CSS entre selectores.
Funciones y Operaciones: Realiza cálculos y manipulación de valores.

Sintaxis de Sass

Sass tiene dos sintaxis principales:

Sass: Utiliza una sintaxis basada en sangría y no requiere llaves {} ni punto y coma ;.
SCSS: Es una extensión de la sintaxis de CSS, por lo que es más familiar para quienes ya conocen CSS.

En este curso, nos enfocaremos en SCSS, ya que es la sintaxis más utilizada y compatible con CSS.

Instalación de Sass

Para usar Sass, primero necesitamos instalarlo. La forma más común es a través de Node.js y npm (Node Package Manager).

Instalación de Node.js y npm:

Descarga e instala Node.js desde nodejs.org.
Verifica la instalación ejecutando los siguientes comandos en tu terminal:
```
node -v
npm -v
```

Instalación de Sass:

Una vez que Node.js y npm están instalados, puedes instalar Sass globalmente ejecutando:

npm install -g sass

Variables en Sass

Las variables en Sass permiten almacenar valores que se pueden reutilizar en todo el archivo. Se definen con el símbolo $.

Ejemplo:

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

body {
  font-family: $font-stack;
  color: $primary-color;
}

Anidamiento en Sass

El anidamiento permite escribir CSS jerárquico, lo que hace que el código sea más legible y organizado.

Ejemplo:

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

  li { display: inline-block; }

  a {
    text-decoration: none;
    color: $primary-color;

    &:hover {
      color: darken($primary-color, 10%);
    }
  }
}

Mixins en Sass

Los mixins permiten definir bloques de código CSS que se pueden reutilizar en diferentes partes del archivo.

Ejemplo:

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

Herencia en Sass

La herencia permite compartir un conjunto de propiedades CSS entre selectores utilizando el operador @extend.

Ejemplo:

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

.success { @extend .message; border-color: green; }
.error { @extend .message; border-color: red; }
.warning { @extend .message; border-color: yellow; }

Funciones y Operaciones en Sass

Sass permite realizar cálculos y manipulación de valores directamente en el código CSS.

Ejemplo:

.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 10px * 2; // Operación aritmética
}

$base-font-size: 16px;
$line-height: 1.5;

body {
  font-size: $base-font-size;
  line-height: $line-height;
  margin-bottom: $base-font-size * $line-height; // Uso de variables y operaciones
}

Ejercicio Práctico

Ejercicio:

Crea un archivo SCSS que utilice variables, anidamiento, mixins y herencia para estilizar una tarjeta de perfil.

Solución:

// Variables
$primary-color: #3498db;
$secondary-color: #2ecc71;
$font-stack: Helvetica, sans-serif;

// Mixin
@mixin box-shadow($x, $y, $blur, $color) {
  -webkit-box-shadow: $x $y $blur $color;
          box-shadow: $x $y $blur $color;
}

// Base styles
body {
  font-family: $font-stack;
  background-color: #ecf0f1;
  color: #2c3e50;
}

// Card styles
.card {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  margin: 20px;
  @include box-shadow(0px, 4px, 10px, rgba(0, 0, 0, 0.1));

  .card-header {
    background: $primary-color;
    padding: 10px;
    border-radius: 10px 10px 0 0;
    color: #fff;
  }

  .card-body {
    padding: 20px;

    h2 {
      margin-top: 0;
    }

    p {
      margin-bottom: 0;
    }
  }

  .card-footer {
    background: $secondary-color;
    padding: 10px;
    border-radius: 0 0 10px 10px;
    color: #fff;
    text-align: center;
  }
}

Conclusión

En esta sección, hemos aprendido los conceptos básicos de Sass, incluyendo variables, anidamiento, mixins, herencia y funciones. Estos conceptos nos permiten escribir CSS de manera más eficiente y organizada. En el siguiente módulo, exploraremos cómo integrar Sass en proyectos más grandes y cómo utilizar sus características avanzadas para mejorar nuestro flujo de trabajo.

Conceptos Básicos de Sass

¿Qué es Sass?

Ventajas de usar Sass:

Sintaxis de Sass

Instalación de Sass

Instalación de Node.js y npm:

Instalación de Sass:

Variables en Sass

Ejemplo:

Anidamiento en Sass

Ejemplo:

Mixins en Sass

Ejemplo:

Herencia en Sass

Ejemplo:

Funciones y Operaciones en Sass

Ejemplo:

Ejercicio Práctico

Ejercicio:

Solución:

Conclusión

Maestría en CSS: De Principiante a Avanzado

Módulo 1: Introducción a CSS

Módulo 2: Estilización de Texto y Fuentes

Módulo 3: Modelo de Caja y Diseño

Módulo 4: Posicionamiento y Flotación

Módulo 5: Flexbox

Módulo 6: CSS Grid

Módulo 7: Técnicas Avanzadas de CSS

Módulo 8: Diseño Responsivo

Módulo 9: Preprocesadores y Frameworks

Módulo 10: Mejores Prácticas y Optimización

Módulo 11: Proyecto: Construyendo un Sitio Web Responsivo