Home | Clases | Sass y SCSS | Directivas de control y heredadas

Directivas de control y heredadas


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


Fecha de publicación: 15/04/2019
Asignaturas: aplicaciones webdiseño de interfaces web
Temas: css css3 sass scss less preprocesadores
Utilizamos cookies propias y de terceros para mejorar su experiencia en la navegación. Al seguir navegando entendemos que acepta su uso.
Si lo desea, consulte nuestras políticas de privacidad y cookies
ENTENDIDO
[X] Cerrar

Contacta conmigo


[X] Cerrar

Acceso alumnos