SASS (Syntactically Awesome Stylesheet) es un preprocesador de CSS que ayuda a reducir la repetición con CSS y ahorra tiempo. Es un lenguaje de extensión CSS más estable y poderoso que describe el estilo del documento de manera limpia y estructural.
Es un lenguaje de preprocesamiento que proporciona una sintaxis con sangría (su propia sintaxis) para CSS.
Permite escribir código de manera más eficiente y fácil de mantener.
Es un superconjunto de CSS que contiene todas las características de CSS y es un preprocesador de código abierto, codificado en Ruby.
Proporciona un estilo de documento en un formato de buena estructura que CSS plano.
Utiliza métodos reutilizables, declaraciones lógicas y algunas de las funciones integradas, como la manipulación del color, las matemáticas y las listas de parámetros.
Es más estable, potente y compatible con versiones de CSS.
Es un superconjunto de CSS y está basado en JavaScript.
Se lo conoce como azúcar sintáctico para CSS, lo que significa que facilita que el usuario lea o exprese las cosas con mayor claridad.
Utiliza su propia sintaxis y se compila en CSS legible.
Puede escribir CSS fácilmente en menos código en menos tiempo.
Es un preprocesador de código abierto que se interpreta en CSS.
Permite escribir CSS limpio en una construcción de programación.
Ayuda a escribir CSS más rápido.
Es un superconjunto de CSS que ayuda a los diseñadores y desarrolladores a trabajar de manera más eficiente y rápida.
Como Sass es compatible con todas las versiones de CSS, podemos usar cualquier biblioteca CSS disponible.
Es posible utilizar sintaxis anidada y funciones útiles como manipulación de color, matemáticas y otros valores.
El desarrollador necesita tiempo para aprender las nuevas funciones presentes en este preprocesador.
Si hay más personas trabajando en el mismo sitio, utilizará el mismo preprocesador. Algunas personas usan Sass y algunas personas usan CSS para editar los archivos directamente. Por lo que será difícil trabajar con site.
Hay posibilidades de perder los beneficios del inspector de elementos integrado del navegador.
SASS admite dos sintaxis a saber SCSS y Indented sintaxis.
los SCSS (Sassy CSS)es una extensión de la sintaxis CSS que facilita mucho el mantenimiento de hojas de estilo grandes y puede reconocer la sintaxis específica del proveedor y muchos CSS. Los archivos SCSS usan la extensión.scss.
los Indented es una sintaxis anterior y, a veces, simplemente se llama como Sass. Usando esta forma de sintaxis, CSS se puede escribir de forma concisa. Los archivos SASS usan la extensión.sass.
Puede utilizar SASS de tres formas diferentes:
Como herramienta de línea de comandos
Como módulo Ruby
Como complemento para el marco de habilitación de Rack
El anidamiento es la combinación de diferentes estructuras lógicas. Con SASS, podemos combinar varias reglas CSS entre sí. Si utiliza varios selectores, puede utilizar un selector dentro de otro para crear selectores compuestos.
Puede seleccionar el selector principal utilizando el &personaje. Indica dónde se debe insertar el selector principal.
SASS admite el selector de marcador de posición mediante el selector de clase o id . En CSS normal, estos se especifican con "#"o".", pero en SASS se reemplazan por"%".
Hay 5 tipos de operaciones:
Operaciones numéricas
Operaciones de color
Operaciones de cadena
Operaciones booleanas
Operaciones de lista
Permite operaciones matemáticas como suma, resta, multiplicación y división.
Permite utilizar componentes de color junto con operaciones aritméticas.
Las listas representan series de valores que se separan mediante comas o espacios.
Puede realizar operaciones booleanas en el script Sass utilizando los operadores y, o y no.
Los paréntesis son un par de signos que generalmente se marcan con corchetes () o corchetes [] que proporcionan una lógica simbólica que afecta el orden de las operaciones.
Proporciona variables SassScript en selectores y nombres de propiedades utilizando #{ }sintaxis. Puede especificar variables o nombres de propiedades entre llaves.
Puede establecer valores predeterminados para las variables agregando la marca ! Default al final del valor de la variable. No reasignará el valor, si ya está asignado a la variable.
Toma directamente el nombre del archivo para importar y todos los archivos importados se combinarán en un solo archivo CSS.
Estableció una regla de estilo para diferentes tipos de medios.
Se utiliza para compartir reglas y relaciones entre selectores. Puede extender todos los demás estilos de clase en una clase y también puede aplicar sus propios estilos específicos.
Es una colección de reglas anidadas que pueden crear un bloque de estilo en la raíz del documento.
Se utiliza para ejecutar selectivamente las declaraciones de código en función del resultado de la evaluación de una expresión.
Las sentencias @else if se utilizan con la directiva @if, siempre que la sentencia @if falla, las sentencias @else if se intentan y si también fallan, se ejecuta @else.
Te permite generar estilos en un bucle. La variable de contador se utiliza para establecer la salida de cada iteración.
En @each directiva, se define una variable que contiene el valor de cada elemento en una lista.
Se utiliza para definir los mixins que incluye opcionalmente las variables y el argumento después del nombre del mixin.
Se utiliza para incluir el mixin en el documento y los estilos definidos por el mixin se pueden incluir en la regla actual.
Los valores de SassScript se pueden tomar como argumentos en mixins que se dan cuando mixin se incluye y están disponibles como variables dentro del mixin.
Hay dos tipos de argumentos mixtos:
Argumentos de palabras clave
Argumentos variables
Se utiliza para incluir argumentos en los mixins. Los argumentos que se nombran se pueden pasar en cualquier orden y los valores predeterminados de argumento se pueden omitir.
Los argumentos variables se utilizan para pasar cualquier número de argumentos a mixin. Contiene argumentos de palabras clave que se pasan a la función o al mixin.
Usando la directiva de función, puede crear su propia función y usarla en el contexto de su script o puede usarse con cualquier valor.
El archivo CSS que genera el SASS consta de un estilo CSS predeterminado que refleja la estructura del documento. El estilo CSS predeterminado es bueno, pero puede que no sea adecuado para todas las situaciones.
El estilo anidado es el estilo predeterminado de SASS. Esta forma de estilo es muy útil cuando se trata de archivos CSS de gran tamaño.
En el estilo de salida expandido, cada propiedad y regla tiene su propia línea. Toma más espacio en comparación con el estilo CSS anidado.
El estilo CSS compacto ocupa menos espacio de forma competitiva que Expanded y Nested. Se centra principalmente en los selectores más que en sus propiedades.
El estilo CSS comprimido ocupa menos espacio en comparación con todos los demás estilos. Proporciona espacios en blanco solo para separar selectores y una nueva línea al final del archivo.
Utiliza sangría en lugar de{ y } para delimitar bloques.
Para separar declaraciones, usa líneas nuevas en lugar de punto y coma (;) .
La declaración de propiedad y los selectores deben colocarse en su propia línea y las declaraciones dentro{ y }debe colocarse en una nueva línea y sangrar .
Utiliza sangría en lugar de{ y } para delimitar bloques.
Para separar declaraciones, usa líneas nuevas en lugar de punto y coma (;) .
La declaración de propiedad y los selectores deben colocarse en su propia línea y las declaraciones dentro{ y }debe colocarse en una nueva línea y sangrar .
Las propiedades CSS se pueden declarar de dos formas:
Las propiedades se pueden declarar similares a CSS pero sin semicolon(;).
colon(:) se antepondrá a cada nombre de propiedad.
Puede usar = para la directiva @mixin y + para la directiva @include, que requiere menos escritura y hace que su código sea más simple y más fácil de leer.
sass --watch C: \ ruby \ lib \ sass \ style.scss: style.css
Los comentarios ocupan una línea completa y encierran todo el texto anidado debajo de ellos y están basados en líneas en sintaxis sangrada.
sass input.scss output.css
Primero verifica el byte Unicode, luego la declaración @charset y luego la codificación de cadena Ruby.
Luego, si no se establece nada, entonces considera la codificación del juego de caracteres como UTF-8 .
Determine la codificación de caracteres de forma explícita mediante la declaración @charset . Simplemente use "@charset encoding name" al comienzo de la hoja de estilo y SASS asumirá que esta es la codificación de caracteres dada.
Si el archivo de salida de SASS contiene caracteres que no son ASCII, utilizará la declaración @charset .
Sass admite dos tipos de comentarios:
Multiline comments- Estos se escriben usando / * y * /. Los comentarios de varias líneas se conservan en la salida CSS.
Single line comments - Estos están escritos usando //seguido de comentarios. los comentarios de una sola línea no se conservan en la salida CSS.
Evalúa la expresión de SassScript mediante la línea de comandos. Puede ejecutar el shell con la línea de comando sass junto con la opción -i .
Detecta los errores y muestra los valores de expresión de SassScript en el flujo de salida de error estándar.
Muestra el valor de la expresión de SassScript como un error fatal.