SASS:
PREPROCESADOR CSS

John Cardozo

John Cardozo

SASS:
PREPROCESADOR CSS

qué es un preprocesador de css?

CSS optimizado

Programa con sintaxis propia

compilación y generación

CSS

HTML

usa

genera

BENEFICIOS de PREPROCESADORES DE css

Múltiples archivos compilados en uno sólo

Reglas de anidación

Extensibilidad de clases

Reusabilidad de variables

Mantenimiento de código

Don't Repeat Yourself

principales preprocesadores de css

2009

2010

2006

sass

2006

Syntactically Awesome Style Sheets

SASS

Script

CSS

Output

Variables

Nesting

Partials

Módulos

Mixins

Herencia

Operadores

Características

características de sass

Variables

Nesting

Partials

Módulos

Mixins

Herencia

Operadores

Almacenamiento de información

Código jerárquico, agrupado

Inclusión de código en otros archivos

División de código en archivos

Grupo de reglas reutilizables

Extensión de clases existentes

Operaciones matemáticas

Control

Condicionales, ciclos

instalación de NODEJS

https://nodejs.org/

Instalación

Verificación

node --version

npm --version

Node Package Manager

Node

instalación de sass

Visual Studio Code

Verificación de instalación

sass --version

Instalación global de SASS

npm install sass -g

Abrir folder del proyecto

code .

Terminal

extensiones de vscode

creación del proyecto - Live Server

http://localhost:5500

Ejecuta un servidor de desarrollo dentro de VSCode

Se crea un archivo HTML

creación de proyecto - vite

# Creación del proyecto
npm create vite@latest nombre-proyecto

# Unicarse en el folder del proyecto
cd nombre-proyecto

# Instalar dependencias
npm install

# Instalar sass en el proyecto
npm add -D sass

# Ejecutar el proyecto
npm run dev

Vite

import './style.scss'

Agregar scss a main.js

# Generar proyecto
npm run build

# Ejecutar build
npm run preview

Preview

inicio del proyecto manual

Archivo HTML

<html>
  <head>
    <title>Mi pagina</title>
    <link 
          rel="stylesheet" 
          href="css/estilo.css" />
  </head>
  <body>
    <div>
      <p>
        Lorem ipsum
      </p>
    </div>
  </body>
</html>

Archivo SCSS

body {
  background: red;
}

generación manual de css a partir de sass

Generación manual

sass estilo.scss css/estilo.css

Generación automática: watch

sass --watch estilo.scss css/estilo.css

CSS

MAP

Archivo JSON conecta el archivo CSS con su archivo fuente SCSS

Archivo CSS generado a partir del archivo fuente SCSS

generación comprimida de CSS

Parámetro style

sass estilo.scss css/estilo.css --style compressed

Generación paralela de versión de desarrollo y versión de producción

sass --watch scss/style.scss:css/style.css --watch css/style.css:dist/style.min.css --style compressed

SCSS

CSS

CSS

watch

watch

dev

prod

sass y scss

SASS

SCSS

Indentación

Bloques

div {
  color: red;
  background-color: white;
  h1 {
    color: yellow;
  }
}
div
  color: red
  background-color: white
  h1
    color: yellow

Difícil adaptación

Adaptación fácil

variables

SCSS

$color-principal: navy;
$color-fuente: white;

body {
  background: $color-principal;
}
h1 {
  color: $color-fuente;  
}
p {
  color: $color-fuente;  
}

Comentarios

// Estas son las variables
$color-principal: navy;

CSS

body {
  background: navy;
}
h1 {
  color: white;  
}
p{
  color: white;  
}

partials: @import

_variables.scss

$color-principal: navy;
$color-fuente: white;

El nombre del archivo debe iniciar con el caracter _

estilo.scss

@import 'variables';

body {
  background: $color-principal;
}

Obtiene el código del archivo partial a través de la directiva @import

partial

GLOBAL

Será obsoleto en Marzo 2023

fuente

partials: @use

_variables.scss

$color-principal: navy;
$color-fuente: white;

El nombre del archivo debe iniciar con el caracter _

estilo.scss

@use 'variables' as v;


body {
  background: v.$color-principal;
}

Obtiene el código del archivo partial a través de la directiva @use

namespace

partial

EJEMPLO DE PARTIALS

_fonts.scss

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap");

estilo.scss

@use "reset";
@use "fonts";
@use "variables" as v;

body {
  background: v.$color-principal;
  font-family: "Roboto", sans-serif;
}

_reset.scss

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

_variables.scss

$color-principal: navy;
$color-fuente: white;

nesting

SCSS

.card {
  display: block;
  padding: 20px;
  box-shadow: 2px 2px 5px black;
  
  .card-title {
    color: black;
  }
  
  .card-body {
    color: blue;
    a {
      color: cyan;
    }
  }
}

CSS

.card {
  display: block;
  padding: 20px;
  box-shadow: 2px 2px 5px black;  
}

.card .card-title {
  color: black;
}

.card .card-body {
  color: blue;
}

.card .card-body a {
  color: cyan;
}

operadores

_variables.scss

@use "sass:math";

// Tanmaños de fuente
$font-size-base: 1rem;
$font-size-sm: $font-size-base * 0.75;
$font-size-lg: $font-size-base * 1.5;
$font-size-xl: $font-size-base * 2;
$font-size-xxl: $font-size-base * 3;

// Bordes
$border-radius-base: 20px;
$border-radius-sm: math.div($border-radius-base, 2);

Operador de multiplicación

Función de división

debug

@debug "mensaje";  // mensaje
@debug math.div(10px, 2);  // 5px
@debug math.max(3px, 10px, 18px, 8px); // 10px
@debug math.floor(3.14);  // 3

maps

_variables.scss

$error: red;

$colors: (
  "primary": red,
  "secondary": pink,
  "error": $error,
  "info": cyan
);

clave, valor

Conjunto de valores

maps

// Mostrar el map 
@debug $colors;

// Mostrar un valor del map 
@debug map-get($colors, "error");

// Saber si el map contiene un valor
@debug map-has-key($colors, "error");

// Eliminar un valor del map
@debug map-remove($colors, "info");

// Agregar un valor al map
@debug map-merge($colors, ("warning": orange));

Operaciones con map

_buttons.scss

.btn {
  background: map-get($colors, "info");
}

Obtiene el valor del map y lo asigna a un atributo de la clase

maps: each

_palette.scss

@use "variables" as v;

@each $key, $val in v.$colors {
  .text-#{$key} {
    color: $val;
  }
}

Genera la clase dado el key, val

#{$variable}

Reemplaza el nombre de la clase con el valor de la variable

@use "variables" as v;

@each $key, $val in v.$colors {
  @debug $key, $val;
}

Recorre y muestra el map

Genera clases CSS recorriendo los valores de un map

generación de paleta - i

_palette.scss

@use "variables" as v;

@each $key, $val in v.$colors {
  // Texto
  .text-#{$key} {
    color: $val;
  }
  // Background
  .bg-#{$key} {
    background-color: $val;
  }
}
// Colores
$primary: #326dee;
$secondary: #1ac886;
$font-color: #100957;
$light-color: #0addb3;
$light-gray: #f0f0f0;
$info: #4bbaff;
$error: #f75a5a;

// Paleta de colores
$colors: (
  "primary": $primary,
  "secondary": $secondary,
  "info": $info,
  "error": $error,
  "white": #fff,
  "black": #000,
);

_variables.scss

generación de paleta - @each + @for - II

_palette.scss

@use "variables" as v;

@each $key, $val in v.$colors {
  .text-#{$key} {
    color: $val;
  }
  .bg-#{$key} {
    background-color: $val;
  }
  @for $i from 1 through 9 {
    .text-#{$key}-light-#{$i} {
      color: mix(white, $val, $i * 10%);
    }
    .bg-#{$key}-light-#{$i} {
      background-color: mix(white, $val, $i * 10%);
    }
  }
  @for $i from 1 through 9 {
    .text-#{$key}-dark-#{$i} {
      color: mix(black, $val, $i * 10%);
    }
    .bg-#{$key}-dark-#{$i} {
      background-color: mix(black, $val, $i * 10%);
    }
  }
}

texto

background

texto claro

background claro

texto oscuro

background oscuro

verde

variaciones claras

variaciones oscuras

background

background claro

background oscuro

uso de la paleta generada

index.html

<div class="bg-white">
  <span class="text-primary">Primary</span> |
  <span class="text-secondary">Secondary</span> |
  <span class="text-info">Info</span> |
  <span class="text-error">Error</span> |
</div>
<div class="bg-white">
  <span class="bg-primary text-white">Primary</span> |
  <span class="bg-secondary text-white">Secondary</span> | 
  <span class="bg-info text-white">Info</span> |
  <span class="bg-error text-white">Error</span> |
</div>
<div class="bg-white">
  <div class="bg-primary-dark-8 text-white">primary dark 8</div>
  <div class="bg-primary-dark-6 text-white">primary dark 6</div>
  <div class="bg-primary-dark-4 text-white">primary dark 4</div>
  <div class="bg-primary-dark-2 text-white">primary dark 2</div>
  <div class="bg-primary text-white">primary</div>
  <div class="bg-primary-light-2 text-white">primary light 2</div>
  <div class="bg-primary-light-4 text-white">primary light 4</div>
  <div class="bg-primary-light-6 text-white">primary light 6</div>
  <div class="bg-primary-light-8 text-white">primary light 8</div>
</div>

condicionales: @if, @else

@if (5 > 1) {
  .testing-conditional {
    color: magenta;
  }
}

@else

@if (5 == 1) {
  .testing-conditional {
    color: magenta;
  }
} @else {
  .testing-conditional {
    color: green;
  }
}

@if

Una opción

2 opciones

Comparadores

>

<

>=

<=

==

!=

Mayor

Menor

Mayor o igual

Menor o igual

Igual

Diferente

expresiones booleanas: and / or

and

or

$a: 3;

@if ($a == 3) {
  .a3 {
    color: white;
  }
}

@if ($a >= 1 and $a <= 5) {
  .and {
    color: blue;
  }
}
@if ($a >= 5 or $a <= 8) {
  .or {
    color: green;
  }
}

Verdadero si todas las opciones son verdaderas

Verdadero si al menos una opción es verdadera

condicionales: mejora de la paleta

.bg-black-dark-1 {
  background-color: black;
}
.text-black-dark-2 {
  color: black;
}
.bg-black-dark-2 {
  background-color: black;
}
.text-black-dark-3 {
  color: black;
}

Valores innecesarios

Clases con el mismo valor

// Genera variaciones si el color 
// no es negro o blanco
@if ($val != black and $val != white) {
  // Variaciones claras
  @for $i from 1 through 9 {
    // Texto claro
    .text-#{$key}-light-#{$i} {
      color: mix(white, $val, $i * 10%);
    }
    // Background claro
    .bg-#{$key}-light-#{$i} {
      background-color: mix(white, $val, $i * 10%);
    }
  }
  // Variaciones oscuras
  @for $i from 1 through 9 {
    // Texto claro
    .text-#{$key}-dark-#{$i} {
      color: mix(black, $val, $i * 10%);
    }
    // Background claro
    .bg-#{$key}-dark-#{$i} {
      background-color: mix(black, $val, $i * 10%);
    }
  }
}

Menor cantidad de líneas generadas

Menor tamaño del archivo CSS generado

Ejecuta la generación de colores para valores diferentes a blanco y negro

mix(color1, color2, porcentaje)

Función mix de SASS

parent selectors

.review {
  padding: 20px;
  &__header {
    background-color: #0b3575;
    h1 {
      color: #fff;
      &:hover {
        color: #176aeE9;
      }
    }
  }
}

SASS

.review {
  padding: 20px;
}
.review__header {
  background-color: #0b3575;
}
.review__header h1 {
  color: #fff;  
}
.review__header h1:hover {
  color: #176aeE9;  
}

CSS

&

Une el nombre del selector con el del selector padre

BEM

Block, Element, Modifier

Pseudo clases

:hover, :focus

EJEMPLO: parent selectors

<div class="review">
  <div class="review__header">
    <h1>Frontend Intermedio</h1>
  </div>
  <div class="review__body">
    <div class="review__description">
      <p>
        Lorem, ipsum dolor sit amet.
        Dolorem explicabo quam.
      </p>
      <div class="review__user">John Cardozo</div>
    </div>
    <a href="#" class="review__more">Ver mas</a>
  </div>
</div>

HTML

$review-padding: 30px;

.review {
  display: grid;
  grid-template: 1fr auto / 1fr;
  border: 1px solid #dedede;
  box-shadow: #d6d6d6 2px 2px 10px;
  &__header {
    background-color: #cccccc;
    padding: $review-padding;
    h1 {
      color: #9c9c9c;
    }
  }
  &__body {
    background-color: #fff;
    padding: $review-padding;
  }
  &__description {
    p {
      font-size: 1.2rem;
      text-align: justify;
      color: #000;
    }
  }
  &__user {
    display: block;
    text-align: right;
    margin-top: 10px;
    font-size: 1.1rem;
    color: navy;
    cursor: pointer;
    &:hover {
      font-weight: bold;
    }
  }
  &__more {
    background-color: #b3b3b3;
    padding: 5px 15px;
    border-radius: 20px;
    text-decoration: none;
    color: #fff;
    transition: all ease 0.5s;
    &:hover {
      background-color: #858585;
    }
  }
}

SASS

MIXINs - I

Definición de Mixin

@mixin alerta($fondo: green) {
  background: $fondo;
  padding: 10px;
  border-radius: 10px;
}

Uso de Mixin con parámetros por defecto

.alerta {
  @include alerta();
}

Uso de Mixin con parámetros personalizados

.alerta {
  @include alerta($fondo: red);
}

Toma el valor definido por defecto en el Mixin

Sobreescribe el valor del parámetro

@mixin

Permite crear código CSS para ser utilizado

@include

Permite incluir código definido en un mixin

MIXINs - II

Definición de Mixin

@mixin alerta($fondo: green) {
  background: $fondo;
  padding: 10px;
  border-radius: 10px;
}

Uso de Mixin

.alerta-info {
  @include alerta();
}
.alerta-warning {
  @include alerta($fondo: orange);
}
.alerta-error {
  @include alerta($fondo: red);
}

HTML

<div class="alerta-info">
  <h3>Información</h3>
  <p>Texto de información</p>	
</div>
<div class="alerta-warning">
  <h3>Advertencia</h3>
  <p>Texto de advertencia</p>	
</div>
<div class="alerta-error">
  <h3>Error</h3>
  <p>Texto de error</p>	
</div>

MIXINs - III

Definición de Mixin

@mixin alerta($fondo: green) {
  background: $fondo;
  padding: 10px;
  border-radius: 10px;
  h3 {
    color: cyan;
  }
  p {
    color: black;
  }
}

HTML

<div class="alerta-info">
  <h3>Información</h3>
  <p>Texto de información</p>	
</div>
<div class="alerta-warning">
  <h3>Advertencia</h3>
  <p>Texto de advertencia</p>	
</div>
<div class="alerta-error">
  <h3>Error</h3>
  <p>Texto de error</p>	
</div>

Los Mixin pueden tener anidación de reglas internas

ejemplo de mixin

Definición de Mixin

@mixin alerta($fondo: #c3fbc3) {
  background: $fondo;
  padding: 10px 20px;
  border-radius: 10px;
  margin: 10px;
  border: 2px solid darken($fondo, 60%);
  h3 {
    color: darken($fondo, 60%);
  }
  p {
    color: darken($fondo, 30%);
  }
}

Titulo 1

Lorem ipsum 1

Titulo 2

Lorem ipsum 2

Titulo 2

Lorem ipsum 2

Uso de Mixin

.alerta-info {
  @include alerta();
}
.alerta-warning {
  @include alerta($fondo: #f9ea8b);
}
.alerta-error {
  @include alerta($fondo: #f98b8b);
}

HTML

<div class="alerta-info">
  <h3>Información</h3>
  <p>Texto de información</p>	
</div>
<div class="alerta-warning">
  <h3>Advertencia</h3>
  <p>Texto de advertencia</p>	
</div>
<div class="alerta-error">
  <h3>Error</h3>
  <p>Texto de error</p>	
</div>

functions

Sintaxis general

@function <nombre>(<argumentos...>) {
  // instrucciones de la función
  @return <valor>
}

Definición de la función

@function sumar($numero1, $numero2) {
  $resultado : $numero1 + $numero2;
  @return $resultado;
}

Use de la función

div {
  height: sumar(300, 400) * 1px;
}

functions - parámetros variables

Definición de la función

@function min($numeros...) {
  $menor: null;
  // Recorre la lista de números
  @each $numero in $numeros {
    // Compara el número actual
    @if $menor == null or $numero < $menor {
      $menor: $numero;
    }
  }
  @return $menor;
}

Uso de la función

.micro {
    width: min(50px, 30px, 100px);
}

john cardozo

johncardozo@gmail.com

Made with Slides.com