¿Cómo importar SASS a través de npm?

Introducción a SASS: SASS significa ‘hojas de estilo sintácticamente asombrosas’. Es una extensión de CSS, que facilita el uso de variables de CSS, reglas anidadas, importación en línea y muchas otras funciones importantes. SASS tiene dos opciones de sintaxis: SCSS (Sassy CSS): utiliza la extensión de archivo .scss y cumple totalmente con la sintaxis CSS. … Continue reading «¿Cómo importar SASS a través de npm?»

SASS | @if y @else

@if, @else, @else-if nos permite controlar el flujo en la compilación de archivos SASS como JavaScript. @if : el bloque @if se compilará si el valor de la expresión condicional es verdadero. Sintaxis: @if <conditional_expression> { … } Ejemplo 1: archivo SASS @mixin button-format( $round-button, $size ) { color: white; background-color: blue; width: $size; @if … Continue reading «SASS | @if y @else»

@include vs @extend en SASS

La palabra clave @include se usa para incluir el código escrito en un bloque mixin. @mixin se usa para agrupar el código css que debe reutilizarse varias veces. Mientras que @extend se usa en SASS para heredar (compartir) las propiedades de otro selector css. @extend es más útil cuando los elementos son casi iguales o … Continue reading «@include vs @extend en SASS»

SASS | Operadores de strings

Sass admite algunos operadores que se pueden usar para generar strings. <expresión> + <expresión> devuelve una string que contiene los valores de ambas expresiones. Si cualquiera de los valores es una string entrecomillada, el resultado será entrecomillado; de lo contrario, no se citará. <expresión> / <expresión> devuelve una string sin comillas que contiene los valores … Continue reading «SASS | Operadores de strings»

Descaro | Reglas at

Las reglas at son simplemente algunas declaraciones de CSS que instruyen al CSS sobre cómo comportarse en condiciones particulares. Comienzan con un signo «@» , seguido de un identificador y terminan con un punto y coma (en el caso de SCSS), o la siguiente instrucción CSS (en el caso de SASS), según la sintaxis de … Continue reading «Descaro | Reglas at»

¿Qué directiva se utiliza para detectar los errores en SASS?

Para detectar los errores en SASS , se debe usar la directiva @debug . Muestra los valores de expresión de SassScript. Se puede usar cuando alguien quiere ver el valor de una variable o expresión mientras desarrolla el archivo. Veamos un ejemplo para que conozcamos más información sobre la directiva @debug de forma práctica. Simplemente … Continue reading «¿Qué directiva se utiliza para detectar los errores en SASS?»

¿Cuál es la diferencia entre SCSS y SASS?

SASS (hojas de estilo sintácticamente asombrosas) es un lenguaje de secuencias de comandos de preprocesador que se compilará o interpretará en CSS. SassScript es en sí mismo un lenguaje de secuencias de comandos, mientras que SCSS es la sintaxis principal para SASS que se basa en la sintaxis CSS existente. Hace uso de punto y … Continue reading «¿Cuál es la diferencia entre SCSS y SASS?»

¿Cómo incluir una biblioteca SASS en el proyecto?

El requisito previo de este artículo incluye algunos conocimientos sobre SASS y sus aplicaciones en diferentes campos. SASS es un lenguaje de secuencias de comandos (como JS) que se compila en CSS en el navegador. Proporciona algunos beneficios adicionales sobre el estilo CSS normal y, por lo tanto, mejora la forma de escribir estilos CSS. … Continue reading «¿Cómo incluir una biblioteca SASS en el proyecto?»

¿Cómo aplicar el efecto de desplazamiento sobre el botón usando SASS?

La animación hace que la experiencia del usuario sea más hermosa e impresionante. Con el uso de elementos HTML (Lenguaje de marcado de hipertexto) y SASS (Hoja de estilo sintácticamente impresionante), diseñaremos botones que les proporcionen un borde colorido y un efecto de animación. Usaremos Sass porque actúa como un mejor sustituto de CSS y … Continue reading «¿Cómo aplicar el efecto de desplazamiento sobre el botón usando SASS?»

SASS | Operadores – Part 3

SASS proporciona y admite una variedad de operadores útiles para trabajar con diferentes valores. Estos operadores consisten en los operadores matemáticos estándar como +, -, / y *  y, aparte de ellos, los operadores de varios otros tipos que se enumeran a continuación: +, -, *, / y % tienen su significado habitual de matemáticas … Continue reading «SASS | Operadores – Part 3»