Operadores y Funciones en SAS: Uso y Ejemplos Prácticos
Contenido del curso
Carina Payleman
Rosmeri Gloria Ccanto Flores
Facundo Peralta
----- ----
iecgerman .
Angel Raúl Acosta Rojas
Daniel Andres Rojas Paredes
Miguel de la Cruz
Nestor Rios Garcia
Santiago Octavio Varela
Roberto Guzmán
Kenneth Angulo L
Jesus Anguiano Solano
Diego Andrés Lopez Rodriguez
Brandon Argel Verdeja Domínguez
Daniel Andres Rojas Paredes
Daniel Andres Rojas Paredes
Pablo Alejandro Figueroa
Pablo Alejandro Figueroa
Juan David Santamaria Gomez
Ariel Hernán Contini
Necesito un curso intermedio de Sass centrado en funciones 😍
x2
X3
La diferencia entre los mixins y las funciones, es que este último retorna valores :D
¿¿total el operador + y - están en 3er lugar o en 1er luger????
No entiendo como porqué usaría una función en un proyecto real?
No estoy seguro pero me imagino son muy utiles en animaciones con css
A diferencia de los mixins, que son principalmente bloques de estilos reutilizables, las funciones en Sass se centran en la manipulación de datos y en la producción de valores
Por si les sirve:
Contenido de las diapositivas:
Funciones en SASS
Las funciones permiten definir operaciones complejas en valores de Sass. Las funciones se definen usando la regla @function.
Sass como preprocesador tiene una gran cantidad de funciones. Algunos de los ejemplos son:
Operaciones
Sass es compatible con una gran cantidad de operadores útiles para trabajar con diferentes valores. Estos incluyen los operadores matemáticos estándar y operadores para varios otros tipos, por ejemplo: == (doble igual) y != (diferente).
Jerarquía de operaciones
Declaración de una función
Las funciones se llaman utilizando la sintaxis de función CSS normal
Gracias por la "Lecturas recomendadas"
Las funciones tienen la misma utilidad que los mixins ?
No exactamente. Las funciones en Sass devuelven un valor específico —como un cálculo o un color— para usarlo en tus propiedades, mientras que los mixins inyectan bloques enteros de reglas CSS.
Piensa en la función como una calculadora que arroja un resultado, y en el mixin como una plantilla completa lista para imprimir estilos. ¿En qué caso preferirías usar una función en lugar de un mixin?
Operadores Unarios (nivel 1): Actúan sobre un solo operando. Por ejemplo, el operador - unario puede cambiar el signo de un número.
Ejemplo:
$a: 5;
$b: -$a;
// Aquí el "-" es un operador unario, b = -5
Operadores Binarios (+, -) (nivel 3): Actúan entre dos operandos (por ejemplo, dos números) para realizar una suma o una resta.
Ejemplo:
$x: 5;
$y: 3;
$z: $x - $y; // Aquí el "-" es un operador binario que resta y z = 2
En resumen, la diferencia es que los operadores unarios modifican un único valor, mientras que los operadores binarios combinan dos valores.
### Order of Operations
Sass has a pretty standard [order of operations](https://sass-lang.com/documentation/operators/#order-of-operations), from tightest to loosest:
1. The unary operators [not](https://sass-lang.com/documentation/operators/boolean), [+, -](https://sass-lang.com/documentation/operators/numeric#unary-operators), and [/](https://sass-lang.com/documentation/operators/string#unary-operators).
2. The numeric operators [\*, /, and %](https://sass-lang.com/documentation/operators/numeric).
3. The numeric operators [+ and -](https://sass-lang.com/documentation/operators/numeric).
4. The relational operators [>, >=, < and <=](https://sass-lang.com/documentation/operators/relational).
5. The equality operators [== and !=](https://sass-lang.com/documentation/operators/equality).
6. The boolean operator [and](https://sass-lang.com/documentation/operators/boolean).
7. The boolean operator [or](https://sass-lang.com/documentation/operators/boolean).
8. The single equal [=](https://sass-lang.com/documentation/operators/#single-equals), when it’s available.
me causa conflicto que un operador pueda estar en 2 lugares de la gerarquia a la vez, no se si entendi mal ¿ alguien me clarifica porfa?
otra cosa que me llamo la atencion y que aca no se menciona o no se aplica es el uso del operador & imagina que estas usando BEM entonces tiende .card y .card__image, pues los estilos los puedes anidar asi: .card{ &cardimage{}} y si no entiendo mal, sera como si no estuvieras escribiendo .cardimage al mismo nivel que .card pero, con formato anidado, ademas el uso del & (almenos cuando lees con un lector de pantalla ) de una te hace caer en cuenta que es la imagen que esta dentro del contenedor anterior (card) de esco lo de que estan almismo nivel no estoy seguro, si alguien me lo puede confirmar, gracias.
Utilidad principal:
Esconder los cálculos
Genial..!
.
Las funciones permiten definir las operaciones complejas en valores de Sass. Las funciones se definen usando la regla @function
