Introducción
En este apartado introduciremos las directivas heredadas de CSS puro y las estructuras de control, básicas para gestionar el comportamiento de las reglas en distintos ámbitos y también incluidas dentro de las
at-rules :
- Condicionales (@if y @else)
- Bucles (@each, @for y @while)
- Directivas heredadas (@namespace, @font-face, @media, @support)
Condicionales (@if y @else)
La directiva
@if permite comprobar si un bloque es evaluado o no, y como en cualquier otro lenguaje, opcionalmente puede incorporar la directiva
@else o la directiva
@elseif.
La sintaxis es del tipo
@if <expression> { ... }.
SCSS
//Ejemplo @if
@mixin avatar($size, $circle: false) {
width: $size;
height: $size;
@if $circle {
border-radius: $size / 2;
}
}
.square-av { @include avatar(100px, $circle: false); }
.circle-av { @include avatar(100px, $circle: true); }
//Ejemplo @else
$light-background: #f2ece4;
$light-text: #036;
$dark-background: #6b717f;
$dark-text: #d2e1dd;
@mixin theme-colors($light-theme: true) {
@if $light-theme {
background-color: $light-background;
color: $light-text;
} @else {
background-color: $dark-background;
color: $dark-text;
}
}
.banner {
@include theme-colors($light-theme: true);
body.dark & {
@include theme-colors($light-theme: false);
}
}
//Ejemplo @elseif
@mixin triangle($size, $color, $direction) {
height: 0;
width: 0;
border-color: transparent;
border-style: solid;
border-width: $size / 2;
@if $direction == up {
border-bottom-color: $color;
} @else if $direction == right {
border-left-color: $color;
} @else if $direction == down {
border-top-color: $color;
} @else if $direction == left {
border-right-color: $color;
} @else {
@error "Unknown direction #{$direction}.";
}
}
.next {
@include triangle(5px, black, right);
}
Sass
//Ejemplo @if
@mixin avatar($size, $circle: false)
width: $size
height: $size
@if $circle
border-radius: $size / 2
.square-av
@include avatar(100px, $circle: false)
.circle-av
@include avatar(100px, $circle: true)
//Ejemplo @else
$light-background: #f2ece4
$light-text: #036
$dark-background: #6b717f
$dark-text: #d2e1dd
@mixin theme-colors($light-theme: true)
@if $light-theme
background-color: $light-background
color: $light-text
@else
background-color: $dark-background
color: $dark-text
.banner
@include theme-colors($light-theme: true)
body.dark &
@include theme-colors($light-theme: false)
//Ejemplo @elseif
@mixin triangle($size, $color, $direction)
height: 0
width: 0
border-color: transparent
border-style: solid
border-width: $size / 2
@if $direction == up
border-bottom-color: $color
@else if $direction == right
border-left-color: $color
@else if $direction == down
border-top-color: $color
@else if $direction == left
border-right-color: $color
@else
@error "Unknown direction #{$direction}."
.next
@include triangle(5px, black, right)
CSS
//Ejemplo @if
.square-av {
width: 100px;
height: 100px;
}
.circle-av {
width: 100px;
height: 100px;
border-radius: 50px;
}
//Ejemplo @else
.banner {
background-color: #f2ece4;
color: #036;
}
body.dark .banner {
background-color: #6b717f;
color: #d2e1dd;
}
//Ejemplo @elseif
.next {
height: 0;
width: 0;
border-color: transparent;
border-style: solid;
border-width: 2.5px;
border-left-color: black;
}
Bucles (@each, @for y @while)
La directiva
@each permite recorrer una lista y emitir estilos o evaluar código para cada uno de sus elementos. La sintaxis será de tipo
@each <variable> in <expresión> { ... }.
SCSS
$sizes: 40px, 50px, 80px;
@each $size in $sizes {
.icon-#{$size} {
font-size: $size;
height: $size;
width: $size;
}
}
Sass
$sizes: 40px, 50px, 80px
@each $size in $sizes
.icon-#{$size}
font-size: $size
height: $size
width: $size
CSS
.icon-40px {
font-size: 40px;
height: 40px;
width: 40px;
}
.icon-50px {
font-size: 50px;
height: 50px;
width: 50px;
}
.icon-80px {
font-size: 80px;
height: 80px;
width: 80px;
}
La directiva
@for permite contar de un número superior a otro inferior (o viceversa) y realizar una acción en cada pasada. La sintaxis será de tipo
@for <variable> from <expresión> to <expresión> { ... } si queremos excluir el valor final, o bien
@for <variable> from <expresión> through <expresión> { ... } si queremos incluirlo.
SCSS
$base-color: #036;
@for $i from 1 through 3 {
ul:nth-child(3n + #{$i}) {
background-color: lighten($base-color, $i * 5%);
}
}
Sass
$base-color: #036
@for $i from 1 through 3
ul:nth-child(3n + #{$i})
background-color: lighten($base-color, $i * 5%)
CSS
ul:nth-child(3n + 1) {
background-color: #004080;
}
ul:nth-child(3n + 2) {
background-color: #004d99;
}
ul:nth-child(3n + 3) {
background-color: #0059b3;
}
La directiva
@while evalúa una expresión y ejecuta acciones mientras sea cierta. La sintaxis será de tipo
@while <expresión> { ... }.
SCSS
/// Dividir `$value` entre `$ratio` hasta que sea menor que `$base`.
@function scale-below($value, $base, $ratio: 1.618) {
@while $value > $base {
$value: $value / $ratio;
}
@return $value;
}
$normal-font-size: 16px;
sup {
font-size: scale-below(20px, 16px);
}
Sass
/// Dividir `$value` entre `$ratio` hasta que sea menor que `$base`.
@function scale-below($value, $base, $ratio: 1.618)
@while $value > $base
$value: $value / $ratio
@return $value;
$normal-font-size: 16px
sup
font-size: scale-below(20px, 16px)
CSS
sup {
font-size: 12.36094px;
}
Nota: Como en cualquier otro lenguaje, para evitar bucles infinitos y porque además son más rápidas, es mejor utilizar
@for o
@each frente a
@while.
Directivas heredadas (@namespace, @font-face, @media, @support)
Sass/SCSS permiten utilizar las directivas que ya eran parte de CSS, si bien para respetar la compatibilidad y evitar generar conflictos, debemos utilizarlas siguiendo la sintaxis
@<name> { ... } o bien
@<name> <value> { ... }, según el caso:
SCSS
//Ejemplo @namespace
@namespace svg url(http://www.w3.org/2000/svg);
//Ejemplo @font-face
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}
//Ejemplo @media sin argumentos
.print-only {
display: none;
@media print { display: block; }
}
//Ejemplo @media con argumentos
$layout-breakpoint-small: 960px;
@media (min-width: $layout-breakpoint-small) {
.hide-extra-small {
display: none;
}
}
//Ejemplo @support (para compatibilidad de navegadores)
@mixin sticky-position {
position: fixed;
@supports (position: sticky) {
position: sticky;
}
}
.banner {
@include sticky-position;
}
Sass
//Ejemplo @namespace
@namespace svg url(http://www.w3.org/2000/svg)
//Ejemplo @font-face
@font-face
font-family: "Open Sans"
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2")
//Ejemplo @media sin argumentos
.print-only
display: none
@media print
display: block
//Ejemplo @media con argumentos
$layout-breakpoint-small: 960px
@media (min-width: $layout-breakpoint-small)
.hide-extra-small
display: none
//Ejemplo @support (para compatibilidad de navegadores)
@mixin sticky-position
position: fixed
@supports (position: sticky)
position: sticky
.banner
@include sticky-position
CSS
/Ejemplo @namespace
@namespace svg url(http://www.w3.org/2000/svg);
//Ejemplo @font-face
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}
//Ejemplo @media sin argumentos
.print-only {
display: none;
}
@media print {
.print-only {
display: block;
}
}
//Ejemplo @media con argumentos
@media (min-width: 960px) {
.hide-extra-small {
display: none;
}
}
//Ejemplo @support (para compatibilidad de navegadores)
.banner {
position: fixed;
}
@supports (position: sticky) {
.banner {
position: sticky;
}
}
Referencias
jairogarcíarincón