Categoría: SASS

¿Cómo combinar padre usando ampersand (&) con selectores de tipo en SASS?

Posted on by Rudeus Greyrat

Ampersand o «&» es una característica poderosa de SASS. Mejora la legibilidad del código mediante el uso de declaraciones de anidamiento, lo que tiene una ventaja sobre el CSS convencional. Podemos anidar la clase css cualquier cantidad de veces, pero la mayoría de las veces no es necesario. Sintaxis: parent {     some_styling;         & .child_element … Continue reading «¿Cómo combinar padre usando ampersand (&) con selectores de tipo en SASS?»

¿Cómo crear un selector de niños combinado en SASS?

Posted on by Rudeus Greyrat

Introducción: Hablemos primero de los diversos tipos de Combinadores disponibles en CSS. Combinador : Un combinador es algo que explica la relación entre los selectores. Un selector CSS puede contener más de un selector simple. Entre los selectores simples, podemos incluir un combinador. Hay cuatro combinadores diferentes en CSS: Selector de descendientes (espacio) Selector de … Continue reading «¿Cómo crear un selector de niños combinado en SASS?»

Regla Sass @function

Posted on by Rudeus Greyrat

Las funciones pueden definir operaciones complejas en valores de SassScript que se pueden reutilizar en toda la hoja de estilo. Hace que sea más fácil abstraer las fórmulas y comportamientos comunes de alguna manera legible. Las funciones se pueden definir usando @function at-rule. Sintaxis: @function <function name>(<arguments…>) {  …  } Un nombre de función puede … Continue reading «Regla Sass @function»

SASS | Sombreado y control de flujo

Posted on by Rudeus Greyrat

Shadowing y Flow control son métodos para cambiar el valor de las variables . Estos dos métodos son muy útiles cuando estamos trabajando con una biblioteca SASS. Lo discutiremos uno por uno. Sombreado: las variables locales se pueden declarar con el mismo nombre que las variables globales. Si hacemos eso, el valor de esa variable … Continue reading «SASS | Sombreado y control de flujo»

SASS | Selector de padres

Posted on by Rudeus Greyrat

El selector principal es un tipo especial de selector en SASS, que nos permite reutilizar el selector externo (principal) de manera eficiente. Vea el siguiente ejemplo para hacerse una idea: Por ejemplo: supongamos que tenemos el siguiente bloque de estilo CSS, a { text-decoration: none; display: inline-block; background-color: lightgray; } Ahora, desea agregar un efecto … Continue reading «SASS | Selector de padres»

¿En qué se parece Less a Sass?

Posted on by Rudeus Greyrat

Los preprocesadores de CSS son lenguajes de programación que amplían todas las funciones de CSS pero ayudan a reducir las complejidades del código de CSS utilizando diferentes funciones como mixins, variables y muchas otras funciones que hacen que el código sea limpio y fácil de entender. Estos lenguajes requieren que el compilador vuelva a compilar … Continue reading «¿En qué se parece Less a Sass?»

Convierta Hex a RGBa para opacidad de fondo usando SASS

Posted on by Rudeus Greyrat

La función Sass rgba usa el modelo rojo-verde-azul-alfa para describir los colores donde se usa alfa para agregar opacidad al color. Su valor oscila entre 0,0 (totalmente transparente) y 1,0 (totalmente opaco). La función toma dos valores de entrada: el código de color hexadecimal y alfa, y convierte el código hexadecimal al formato RGBa. Sintaxis: … Continue reading «Convierta Hex a RGBa para opacidad de fondo usando SASS»

¿Cómo usar variables Sass con consultas de medios CSS3?

Posted on by Rudeus Greyrat

Variables SASS: Las variables SASS son muy simples de entender y usar. Las variables SASS asignan un valor a un nombre que comienza con el signo $y luego solo se refieren a ese nombre en lugar del valor. A pesar de esto, son una de las herramientas más útiles que proporciona SASS. Las variables SASS proporcionan … Continue reading «¿Cómo usar variables Sass con consultas de medios CSS3?»

SASS | Anidamiento

Posted on by Rudeus Greyrat

SASS Nesting hace que nuestro trabajo sea muy eficiente, no tenemos que repetir los selectores externos una y otra vez. Podemos escribir selectores anidados en el orden en que aparecen en el archivo HTML (es decir, formulario de selector primario-externo y secundario-interno). SASS hará automáticamente el trabajo de combinación. Vea el ejemplo a continuación: Archivo … Continue reading «SASS | Anidamiento»

Módulo Sass sass:list

Posted on by Rudeus Greyrat

SASS proporciona muchos módulos integrados que contienen varias funciones útiles y algunos complementos que facilitan su uso. Todos los módulos incorporados comienzan con sass: para mostrar que son diferentes de otros módulos y que son parte del mismo SASS. Uno de los módulos incorporados es el módulo sass:list que hace posible acceder y modificar valores … Continue reading «Módulo Sass sass:list»