Sass, hojas de estilo sorprendentes

• Podemos anidar las reglas de estilo, equivalente a las etiquetas HTML.

• Muchas veces tenemos propiedades que tienen el mismo prefijo como font-family, font-size y font-weight o text-align, text-transform y text-overflow

• Lo podemos abreviar en Sass como propiedades anidadas:

  • font: {

  • family: Helvetica, sans-serif;

  • size: 18px;

  • weight: bold;

  • }

• Las reglas anidadas pueden manejar las listas de selectores (es decir, selectores separados por comas).

• Cada selector complejo (los que están entre las comas) se anida por separado y luego se vuelven a combinar en una lista de selectores.

• También puede anidar selectores que utilicen combinadores:

  • > selecciona sólo cuando los selectores identifican elementos que son hijos directos. Los elementos descendientes que se encuentran más abajo en la jerarquía no se seleccionan.

  • + seleccionar un elemento que se encuentra justo al lado de otro elemento en el mismo nivel de la jerarquía.

  • ~ seleccionar los hermanos de un elemento, incluso si no son directamente adyacentes, puedes utilizar el combinador de hermanos general

• Podemos condicionar las reglas de estilo, dependiendo si se cumple o no una condición.

• Si el valor es nulo Sass no crea la regla de estilo.

$esquinas: false;

.boton {

border: 1px solid black;

border-radius: if($esquinas, 5px, null);

}

• Podemos condicionar las reglas de estilo, dependiendo si se cumple o no una condición.

• Si el valor es nulo Sass no crea la regla de estilo.

$esquinas: false;

.boton {

border: 1px solid black;

border-radius: if($esquinas, 5px, null);

}

• Podemos anidar los operadores y se toma el valor más interno.

  • .acordeon {

  • background: orange;

  • &__abierto {

  • background: red;

  • &--cerrado {

  • background: yellow;

  • }

  • }

  • }

• Sass tiene un selector conocido como "marcador de posición" o “placeholder”

• Se parece y actúa mucho como un selector de clases, pero comienza con a % y no está incluido en la salida CSS.

The SCSS syntax uses the file extension .scss. With a few small exceptions, it’s a superset of CSS, which means essentially all valid CSS is valid SCSS as well. Because of its similarity to CSS, it’s the easiest syntax to get used to and the most popular.

Apuntes a la sección 2: Reglas anidadas

• Por medio de la directiva @import podemos estructurar nuestra hoja de estilos en módulos que sean más sencillos de manejar.

• En cambio de la directiva @import de CSS, la directiva en Sass no consume recursos de ancho de banda.

• Sass asume que los archivos tienen la extensión scss o sass, por lo que no hay que incluirlo.

• Cuando transpilamos por medio de los comandos de la consola, todos los archivos scss o sass son procesados.

• Para evitar que los archivos sean procesados, añadimos un guión bajo al inicio del nombre de archivo.

• Según la página de Sass, la directiva @import será sustituida por la directiva @use.

• Podemos utilizar a la directiva @import dentro de una regla de estilo.

• La directiva @mixin le permite crear código CSS que se reutilizará en todo el sitio web.

• La directiva @include se crea para permitirle usar (incluir) el mixin.

• No te repitas (Don't repeat yourself) o DRY.

Los mixins aceptan argumentos. De esta forma puede pasar variables a un mixin.

• Podemos crear parámetros por omisión por medio de los dos puntos después del parámetro.

• Los mixin son especialmente útiles para crear reglas de tipo vendor.

• La directiva @extend le permite compartir un conjunto de propiedades CSS de un selector a otro.

• La directiva @extend es útil si tiene elementos de estilo casi idéntico que solo difieren en algunos pequeños detalles.

• La directiva @media funcionan igual que en CSS, con la salvedad de que se pueden anidar dentro de las reglas CSS.

• Si incluyes una regla @media dentro de una regla CSS, se aplicará a todos los selectores que se encuentren desde esa regla hasta el primer nivel de la hoja de estilos.

• Las reglas @media también se pueden anidar entre sí.

• El resultado la combinación de todas ellas utilizando el operador and.

• Las reglas @media también pueden contener expresiones SassScript (incluyendo variables, funciones y operadores) tanto en los nombres como en los valores.

• La interpolación se puede utilizar en SassScript para inyectar SassScript en cadenas sin comillas.

• Las directivas @debug y @warn mandan un mensaje a la consola.

• Las diferencias son:

  • Puedes desactivar los mensajes de error con la opción --quiet de la línea de comandos o con la opción de configuración :quiet de Sass.

  • Los mensajes de error de @warn también se incluyen en la hoja de estilos generada para que el usuario pueda ver tanto los errores como el lugar exacto en el que se producen.

• Las directivas @at-root hacen que una o más reglas se generen en la raíz de la hoja de estilos en vez de anidarse en sus selectores.

• Se puede utilizar tanto con selectores individuales como con bloques de selectores.

Apuntes a la sección 3: Directivas de Sass

• Las listas son el tipo de dato que utiliza Sass para representar los valores que normalmente se utilizan en las propiedades CSS como margin: 10px 15px 0 0 o font-face: Helvetica, Arial, sans-serif.

• Las listas son simplemente una colección de valores separados por comas o espacios en blanco.

• Técnicamente, cada elemento de la lista también se considera una lista simple de un solo elemento.

• append($list, $val, $separator: auto) Añade un elemento al final de la lista.

• index($list, $value) Regresa el número de índice en la lista.

• is-bracketed($list) Regresa verdadero si la lista usa corchetes y falso si no.

• join($list1, $list2, $separator: auto, $bracketed: auto) Concatena dos listas.

• length($list) Regresa el número de elementos de la lista.

• list-separator($list) Indica el separador de la lista.

• nth($list, $n) Regresa el n-ésimo elemento de una lista.

• set-nth($list, $n, $value) Sustituye el enésimo valor de la lista.

• zip($lists...) Combina “n” listas.

• Las bibliotecas Sass a menudo usan variables con !default para permitir a sus usuarios configurar el CSS de la biblioteca.

• Podemos pasar un número ilimitado de parámetros a un mixin por medio del parámetro $values… (los tres puntos).

• El operador de interpolación #{} se puede utilizar para incrustar el resultado de una expresión de SassScript en un fragmento de CSS.

• Los mapas son asociaciones de claves y valores.

• La clave se utiliza para acceder fácilmente al valor de cualquier elemento del mapa.

• Se utilizan principalmente para agrupar valores y acceder a ellos dinámicamente.

• Los mapas siempre se encierran con paréntesis y los pares clave: valor deben separarse con comas.

• map-get($mapa, llave): Recupera el valor de una llave.

• map-has-key($map, $key, $keys...): Busca el valor asociado a la llave.

• map-keys($map): Regresa una lista de las llaves del mapa.

• map-merge($map1, $map2): Mezcla mapas.

• map-remove($map, $keys...): Elimina un elemento

• map-values($map): Devuelve una lista separada por comas de todos los valores en $map.

• Crearemos un mapa con cada uno de los tipos e botones que deseamos manejar: error, éxito y advertencia con el color de la letra y del fondo.

• Por medio de una sentencia @each recorremos el mapa y creamos una clase para cada llave.

Apuntes a la sección 4: SassScript

• SassScript soporta los cinco operadores aritméticos básicos: suma +, resta -, multiplicación *, división / y módulo %.

• Si realiza operaciones sobre números con diferentes unidades, Sass convertirá automáticamente las unidades siempre que sea posible.

• Los operadores aritméticos también se pueden aplicar a los valores que representan colores.

• Los cálculos siempre se realizan sobre cada componente del color.

• Esto significa que antes de cada operación, el color se descompone en sus tres componentes R, G y B, para después aplicar la operación a cada componente.

• Agrega el valor pasado para cada argumento de palabra clave a la propiedad correspondiente del color y devuelve el color ajustado.

• Todos los argumentos opcionales deben ser números.

  • adjust-color($color,

  • $red: null, $green: null, $blue: null,

  • $hue: null, $saturation: null, $lightness: null,

  • $whiteness: null, $blackness: null,

  • $alpha: null)

• Los operadores relacionales determinan si los números son mayores o menores entre sí. Convierten automáticamente entre unidades compatibles.

• Sass admite algunos operadores que generan cadenas :

  • <expression> + <expression>devuelve una cadena que contiene los valores de ambas expresiones. Si el valor es una cadena entre comillas , el resultado se concatenará; de lo contrario, no se concatenará.

  • <expression> / <expression>devuelve una cadena sin comillas que contiene los valores de ambas expresiones, separados por /.

• A diferencia de lenguajes como JavaScript, Sass usa palabras en lugar de símbolos para sus operadores booleanos .

  • not <expression> devuelve lo opuesto al valor de la expresión: se convierte true en false y false en true.

  • <expression> and <expression> devuelve true si los valores de ambas expresiones son true, y false si alguno lo es false.

  • <expression> or <expression>devuelve true si el valor de cualquiera de las expresiones es true y false si ambos lo son false.

• Las funciones le permiten definir operaciones complejas en valores de SassScript que puede reutilizar en toda su hoja de estilo.

• Las funciones se definen utilizando la directiva @function, que está escrita @function <name>(<arguments...>) { ... }.

• El nombre de una función puede ser cualquier identificador Sass.

• Solo puede contener declaraciones universales , así como la regla @return que indica el valor a usar como resultado de la llamada a la función.

• Las funciones pueden recibir las propiedades o argumentos para su proceso, como una lista de nombres separados por comas.

• La lista de parámetros en Sass puede acabar en coma.

• Por medio de los tres puntos (...) al final indicamos número ilimitado de argumentos.

• Por medio de la directiva @return podemos regresar un valor de la función.

• La regla @if está escrita @if <expression> { ... } y controla si su bloque se evalúa o no (incluida la emisión de estilos como CSS).

• La expresión generalmente devuelve true o false si la expresión devuelve true, el bloque se evalúa y si la expresión devuelve false no lo es.

• Si la expresión es falsa, se puede evaluar el bloque con la directiva @else.

• La regla @each facilita la emisión de estilos o la evaluación de código para cada elemento de una lista o cada par en un mapa.

• Es ideal para estilos repetitivos que solo tienen algunas variaciones entre ellos.

• Suele estar escrito @each <variable> in <expresión> { ... }, donde la expresión devuelve una lista.

• El ciclo @for, escrita:

• @for <variable> from <expresión> to <expresión> { ... } o

• @for <variable> from <expresión> through <expresión> { ... }

• Cuenta hacia arriba o hacia abajo de un número (el resultado de la primera expresión ) a otro (el resultado de la segunda) y evalúa un bloque para cada número intermedio.

La directiva @each podemos utilizar listas y mapas de la misma forma.

• La directiva @while se escribe:

@while <expression> { ... }

• Evalúa su bloque si su expresión regresa verdadero.

• Si su expresión aún regresa true, evalúa su bloque nuevamente.

• Esto continúa hasta que la expresión finalmente regresa false.

• Podemos generar el archivo css de salida con diferente formato:

  • :nested

  • :compact

  • :compressed

  • :expanded

• quote(string) Regresa una cadena con comillas.

• str-index(string, substring) Regresa el número de caracter donde se encuentra la subcadena.

• str-insert(string, insert, index) Inserta una subcadena en el índice indicado.

• str-length(string) Regresa la longitud de una cadena.

• str-slice(string, start, end) Extrae los caracteres desde el caracter inicial al final.

• abs(number) Devuelve el valor absoluto de número.

• ceil(number) Redondea el número al entero más cercano.

• comparable(num1, num2) Devuelve si num1 y num2 son comparables.

• floor(number) Redondea el número hacia abajo al entero más cercano.

• percentage(number) Convierte un número en un porcentaje (multiplica el número por 100).

• random() Devuelve un número aleatorio entre 0 y 1.

• random(number) Devuelve un entero aleatorio entre 1 y número.

• round(number)Redondea el número al entero más cercano.

is-superselector(super, sub) Comprueba si el superselector coincide con todos los elementos que el selector sub coinciden.

selector-append(selectors) Agrega el segundo (y tercero / cuarto, etc.) selector al primer selector.

selector-nest(selectors) Devuelve un nuevo selector que contiene una lista anidada de selectores CSS basada en la lista proporcionada.

selector-parse(selector) Devuelve una lista de cadenas contenidas en el selector usando el mismo formato que el selector principal.

call(function, arguments...) Llama a una función con argumentos y devuelve el resultado.

content-exists() Comprueba si el mixin actual se pasó a un bloque @content.

feature-exists(feature) Comprueba si la función es compatible con la implementación actual de Sass.

function-exists(functionname) Comprueba si la función especificada existe.

Apuntes a la sección 5: Control de flujo y otras funciones

Con este video concluimos el curso de Sass

Archivos del curso Sass