Heredar una clase a otro archivo en Sass

Sass o las hojas de estilo sintácticamente increíbles son un preprocesador de CSS que otorga a CSS tales poderes que no están disponibles en CSS simple. Da el poder de usar expresiones, variables, anidamiento, mixins (forma Sass de funciones), herencia y más. Otros ejemplos de preprocesadores CSS conocidos incluyen Less y Stylus, pero Sass es más popular.

Sass incluye dos sintaxis:

• SCSS (CSS descarado)
• Hablar con descaro a

SCSS o Sassy CSS

SCSS usa la sintaxis .scss y es muy similar al CSS normal. SCSS es totalmente compatible con CSS. SCSS se puede asumir como un superconjunto de CSS. Cualquier estilo CSS válido es un SCSS válido. Debido a la similitud con CSS, lleva menos tiempo comenzar a utilizarlo.

Ejemplo:

$heading-color: #e94e1b; //Using Sass Variables
h4 {
    color: $heading-color;
}

La sintaxis sangrada o Sass

Esta es la sintaxis original de Sass. Utiliza la extensión de archivo .sass . Utiliza todas las características de Sass, pero en lugar de usar llaves, usa sangría para describir el formato del documento. No es totalmente compatible con CSS.

Ejemplo

$heading-color: #e94e1b; 
h4
  color: $heading-color

@importar y @usar:

Un solo archivo CSS puede crecer eventualmente y será un trabajo difícil mantener hojas de estilo grandes. Entonces, sería más fácil si hubiera una forma de separar las clases en varios archivos. Entonces uno puede importar solo los archivos necesarios. De esta forma la hoja de estilos será más pequeña y además el mantenimiento será más sencillo. La hoja de estilo también mantendrá la regla  DRY (Don’t Repeat Yourself) .

Enfoque 1: para importar otra hoja de estilo a una hoja de estilo, se utiliza la palabra clave @import . Los archivos CSS o Scss que se van a importar pueden residir en la misma carpeta o en otro lugar de Internet.

Sintaxis:

@import 'file-name';
@import url('url of the stylesheet')

Ejemplo

@import './buttons.scss';
@import url('https://example.com/css/breadcrumbs.scss');

CSS compilado

@importar url(‘https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css’);
.btn-grande {
borde-radio: 3rem;
borde: 4px negro sólido;
fondo: negro;
color blanco;
ancho: 20 rem;
altura: 10 rem;
pantalla: flexible;
alinear elementos: centro;
justificar-contenido: centro;
}

Esta es una solución factible para importar un archivo CSS a otro archivo. Pero Sass ha desaprobado @import y eventualmente lo eliminará. En lugar de usar @import , Sass ahora admite @use porque CSS también tiene una función de @import y existen otros inconvenientes importantes de usar @import , que es un tema para otro artículo.

Enfoque 2: @use debe usarse con un espacio de nombres. Supongamos que un botón de archivo que reside en el mismo directorio tiene una variable de color denominada color primario . Para usar la variable en otros archivos, se seguirá la siguiente sintaxis.

Sintaxis:

@use 'file-name';

Ejemplo:

@use 'buttons';
  
.card {
    color: buttons.$primary-color;
}

CSS compilado:

.btn-large {
  border-radius: 3rem;
  border: 4px solid black;
  background: black;
  color: white;
  width: 20rem;
  height: 10rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

El espacio de nombres se usa debido a los conflictos de nombres que existen en @import . Si dos archivos importados contienen dos variables diferentes con el mismo nombre, @import obligará a utilizar el valor de la variable definido en el último archivo importado.

@use también ofrece la posibilidad de utilizar un espacio de nombres definido por el usuario.

Ejemplo:

@use 'buttons' as btn;
  
.card {
    color: btn.$primary-color;
}

La palabra clave as permite definir espacios de nombres personalizados.

Una cosa importante a tener en cuenta aquí es que Live Sass Compiler en VS Code se basa en LibSass y LibSass actualmente no es compatible con la función @use . Por lo tanto, es mejor usar Dart Sass , que generalmente es el primero en implementar nuevas funciones. Instalar Dart Sass es fácil. Esta publicación aquí describe los pasos.

Heredar estilos de otras clases

La sección anterior describió brevemente cómo importar y usar estilos almacenados en otro archivo usando el operador @import y @use . Para heredar un estilo de otra clase o id, se usa la palabra clave @extend . Veamos un ejemplo, supongamos que la clase botones tiene un color: verde; y opacidad: .5; propiedad, ahora para heredar estos estilos en otra clase, se utilizará la palabra clave @extend .

Ejemplo:

archivo botones.scss

/* buttons.scss file */
.btn {
  color: red;
  opacity: 0.5;
}

archivo estilo.scss

/*style.scss file
where the style is to be inherited */
@use 'buttons';
  
.new-btn {
  @extend .btn;
}

Entonces, el código anterior heredará las propiedades de la clase .btn a la clase .new -btn .

Ahora, echemos un vistazo al archivo CSS compilado.

CSS compilado

/* style.css */
.btn, .new-btn {
  color: red;
  opacity: 0.5;
}

Una cosa a tener en cuenta aquí es que los estilos de la clase .btn no se copian a la clase new-btn , sino que separan con comas el selector original, lo que reduce el código duplicado.

Conclusión

Entonces, en este artículo, las palabras clave @include, @use y @extend utilizadas en Sass se describen brevemente. La herencia también se puede lograr usando mixins. Para leer sobre el mixin, puedes consultar este artículo. Aunque si el estilo no toma ningún parámetro, es mejor usar el método @extend .