SCSS

Crear una documentación completa de SCSS (Sassy CSS) es un proyecto extenso que abarca muchos temas, desde los conceptos básicos hasta características avanzadas. A continuación, se presenta un esquema básico que cubre los aspectos fundamentales de SCSS. Para una documentación completa, se recomienda consultar la documentación oficial de Sass (https://sass-lang.com/documentation) y recursos adicionales como tutoriales y libros.

Documentación SCSS

Índice

1. Introducción a SCSS
2. Instalación y Configuración
3. Variables
4. Mixins
5. Funciones
6. Anidamiento
7. Controladores de Flujo
8. Mixins y Funciones
9. Importación y Partials
10. Compilación de SCSS a CSS
11. Preprocesadores y SCSS
12. Buenas Prácticas

1. Introducción a SCSS

SCSS es una extensión de CSS que permite el uso de variables, anidamiento, mixins, funciones y más, haciendo que el código sea más mantenible y reutilizable.

2. Instalación y Configuración

Para usar SCSS, necesitarás un preprocesador. Sass ofrece dos opciones: Dart Sass (anteriormente Ruby Sass) y Node Sass. Para instalar Dart Sass, puedes usar npm o yarn:

npm install sass

o

yarn add sass

3. Variables

Las variables en SCSS permiten almacenar valores específicos para su reutilización en todo el documento.

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

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

4. Mixins

Los mixins son bloques de código reutilizables que se pueden incluir en otras reglas.

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

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

5. Funciones

SCSS permite la creación de funciones personalizadas para realizar cálculos o manipulaciones de datos.

@function calculate-rem($size) {
  $rem-size: $size / 16px;
  @return $rem-size * 1rem;
}

.container {
  font-size: calculate-rem(18px);
}

6. Anidamiento

El anidamiento permite escribir CSS de una manera más limpia y ordenada.

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

  li {
    display: inline-block;
  }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

7. Controladores de Flujo

SCSS ofrece controladores de flujo como @if, @for, @each, @while, y @each.

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

8. Mixins y Funciones

Aunque los mixins y funciones pueden parecer similares, tienen diferencias clave. Los mixins incluyen bloques de código que se insertan donde se llaman, mientras que las funciones devuelven valores.

9. Importación y Partials

Los partials y la importación de archivos permiten dividir el código SCSS en múltiples archivos para una mejor organización.

_reset.scss

html,
body,
ul,
ol {
  margin: 0;
  padding: 0;
}

// style.scss
@import "reset";

10. Compilación de SCSS a CSS

Para compilar SCSS a CSS, se utiliza el comando sass seguido de la ruta del archivo de entrada y el archivo de salida.

sass input.scss output.css

11. Preprocesadores y SCSS

SCSS es un preprocesador CSS que extiende la sintaxis de CSS, permitiendo características adicionales como variables, anidamiento, y mixins.

12. Buenas Prácticas

• Mantén tu código DRY (Don’t Repeat Yourself).
• Utiliza variables para valores que se repiten.
• Organiza tu código con partials y la estructura de directorios.
• Documenta tus mixins y funciones.

Recursos

Esta es una visión general de SCSS. Para una documentación más detallada, consulta la documentación oficial de Sass.

Vídeo explicativo más completo: Vídeo.