Desde hace tiempo, CSS ha quedado “obsoleto” frente a soluciones como SASS y LESS que aportan grandes ventajas como, entre otras, el uso de variables, anidamiento de elementos, elementos reutilizables, compilación, y…funciones predefinidas.
SASS o LESS
Como esto va de gustos y a mi me gusta siempre aportar mi visión, desde el principio me decanté por el uso de SASS en vez de LESS dado que el segundo depende de JavaScript y suelo evitar en la medida de lo posible el abuso de este tipo de dependencias aunque no podemos olvidar que SASS está basado en Ruby. Si queréis conocer a groso modo las diferencias entre ambos y algunas comparaciones, este artículo de KeyCDN es bastante bueno.
Funciones SASS
SASS dispone de una gran cantidad de funciones predefinidas que podemos usar para aumentar la potencia:
- Funciones RGB
- Funciones HSL
- Funciones de opacidad
- Más funciones de color
- Funciones de string
- Funciones numéricas
- Funciones de listas
- Funciones de maps
- Funciones de selectores
- Funciones introspectivas
- Otras funciones
Además, también nos permite crear nuestras propias funciones lo que ampliará el abanico de lo que podremos hacer sobre CSS sin necesidad de usar CSS.
Un ejemplo del uso de estas funciones sería crear una gama de colores de nuestro sitio a partir de los colores principales haciendo uso de las funciones RGB, HSL y de opacidad, con lo que podremos variar saturación, opacidad, aclarar, descomponer y mezclar para obtener una paleta de colores rica para nuestro sitio web de una forma muy sencilla.
Si no las conocíais, espero que podáis sacar un gran beneficio de estas funciones y si ya las conocíais, podéis aportar casos de uso interesantes y así podremos ayudar a usar mejores prácticas a la hora de maquetar sitios web.
Enjoy coding!!
