Hogar › Ajustes › Sintaxis SASS. Preprocesador Sass. Una guía completa y por qué la necesitas

Sintaxis SASS. Preprocesador Sass. Una guía completa y por qué la necesitas

¡Hola amigos!

Esta es una guía detallada del preprocesador. Hablar con descaro a para principiantes. Aquí nos familiarizaremos con el preprocesador Sass, sus ventajas, su sintaxis y consideraremos su uso con ejemplos.

Fresco

Más

Balbucear

Patrocinador del problema - socio de alojamiento: sociowp.ru

Puede descargar todos los ejemplos de Sass/CSS y el proyecto Gulp personalizado para este tutorial desde GitHub.

Hablar con descaro a es uno de los preprocesadores CSS más desarrollados y estables, así como uno de los preprocesadores más populares entre los profesionales.

Beneficios del descaro

Compatible con varias versiones de CSS, gracias a las cuales puedes utilizar cualquier biblioteca CSS en tu proyecto;
Una gran cantidad de funciones diferentes para cualquier ocasión. Pocos preprocesadores CSS pueden presumir de una funcionalidad tan rica;
Sass es uno de los preprocesadores CSS más antiguos y ha adquirido mucha experiencia a lo largo de los muchos años de su existencia;
Una gran oportunidad para utilizar frameworks Sass que hacen la vida más fácil al desarrollador. Uno de esos marcos es Bourbon, que utilizamos en algunas ediciones de Jedi cuando escribimos Sass;
Sintaxis. Puede elegir una de las dos sintaxis que más le convenga: simplificada (SASS) y expandida tipo CSS (SCSS).

Cuando conocí por primera vez los preprocesadores de CSS, yo, como muchos otros desarrolladores web novatos, no entendía completamente la idea de utilizar preprocesadores de CSS. ¿Por qué hacer una capa adicional, usar algunas herramientas, complicar el CSS?, pensé. Pero con el tiempo, comencé a comprender que día tras día escribir CSS se convertía en una tortura, una rutina gris tenía que repetirse muchas acciones, había que copiar selectores, propiedades e incluso bloques enteros de código CSS para lograr el resultado deseado; Hoy, usando ejemplos, te mostraré cómo puedes simplificar tu trabajo usando el preprocesador Sass, diversificar tu desarrollo e incluso divertirte un poco escribiendo algunas funciones más o menos complejas.

Configurando el ambiente

Como entorno para trabajar con Sass en esta lección, como en nuestras otras lecciones, usaremos la versión de Sass para el administrador de tareas Gulp ( trago-descarado). Para utilizar la versión original de Ruby o compilar Sass utilizando un software especial, puede leer las instrucciones en la oficina. sitio web. Esta lección es principalmente de naturaleza práctica, por lo que no nos detendremos en las posibles opciones para conectarnos al proyecto. Conectaremos Sass de la forma más popular, usando Gulp;

Asegúrese de tener instalada la última versión de Node.js y Gulp. Si Node.js no está instalado, descárguelo e instálelo. Después de instalar Node.js, instale gulp con el comando "npm i -g trago"(Windows) o "sudo npm i -g gulp"(Linux, OS X). Leer: .

Npm i --save-dev trago trago-sass

Var gulp = require("gulp"), // Conectar Gulp sass = require("gulp-sass"); // Conecta el paquete Sass gulp.task("sass", function() ( // Crea una tarea "sass" return gulp.src(["sass/**/*.sass", "sass/**/* .scss "]) // Toma source.pipe(sass((outputStyle: "expanded")).on("error", sass.logError)) // Convierte Sass a CSS usando gulp-sass .pipe(gulp. dest(" css")) // Sube el resultado a la carpeta css)); gulp.task("watch", function() ( gulp.watch(["sass/**/*.sass", "sass/**/*.scss"], ["sass"]); // Mirar detrás de los archivos sass en la carpeta sass)); gulp.task("predeterminado", ["ver"]);

Preste atención a la línea 6: aquí usamos uno de los estilos de salida para el archivo resultante: anidado- anidado, por defecto; expandido- ampliado; compacto- compacto, cuando el selector y sus propiedades entre llaves se muestran en una línea; comprimido- comprimido. Además, gracias al procesamiento .on("error", sass.logError) Si se produce un error, no tendremos que recargar el comando de ejecución de Gulpfile y veremos en qué línea del archivo Sass tenemos un error. En los ejemplos usaré el estilo de salida. expandido para mayor claridad.

Debería tener la siguiente estructura de proyecto en su sistema de archivos:

mi proyecto/
- css/
  - común.css
- hablar con descaro a/
  - común.sass
- módulos_nodo/
- gulpfile.js
- paquete.json

Empezamos a ejecutar Gulpfile con el comando trago en la terminal de la carpeta del proyecto.

Aquí tomamos todos los archivos Sass del directorio. hablar con descaro a/ su proyecto y cargue el resultado CSS terminado en una carpeta css/. Además aquí establecemos una observación mirar para cambios en archivos Sass y compilación automática en CSS, si se producen dichos cambios. El archivo CSS resultante se incluye en el diseño.

Si no sabe cómo configurar los paquetes Gulp en este ejemplo, lea el manual de Gulp.

Después de configurar nuestro entorno y Sass se convierte correctamente a CSS al guardar archivos *.sass en el directorio hablar con descaro a/, podrás seguir aprendiendo con seguridad y llevar a la práctica los ejemplos que analizaremos hoy.

Sintaxis descarada

Hay 2 variantes de escritura Sass, 2 sintaxis: SASS y SCSS. La ortografía más antigua de Sass es sintaxis de sangría. Esta es la ortografía que usaremos en nuestra lección. La extensión de archivo para esta sintaxis es *.hablar con descaro a. La segunda opción es la sintaxis, extendiendo la sintaxis CSS, CSS atrevido. SCSS está escrito como CSS normal, pero mejorado con las características adicionales de Sass. Extensión de archivo con sintaxis SCSS - *.scss.

¡Muy importante! La sintaxis de sangría requiere un cumplimiento muy estricto de la sangría de las propiedades anidadas, y si experimenta errores al ejecutar Gulp o errores implícitos sin especificar una línea en la consola, lo más probable es que el error se deba a sangrías incorrectas. Otro detalle importante: si usa tabulaciones como sangrías, el compilador arrojará un error cuando intente convertir Sass, que, además de tabulaciones, también usa espacios como sangrías. O usas solo tabulaciones o solo espacios.

Sintaxis SASS y SCSS:

SASS - Sintaxis de sangría	SCSS - sintaxis de extensión
$font-stack: Helvetica, sans-serif $primary-color: #333 fuente del cuerpo: 100% $font-stack color: $primary-color	$font-stack: helvética, sans-serif; $color primario: #333; cuerpo (fuente: 100% $font-stack; color: $color-primario; )

Además de las reglas básicas de escritura (llaves, punto y coma al final de las líneas), SASS y SCSS también difieren en la escritura de algunas funciones. Así que tenga cuidado al utilizar ejemplos de Internet y compruebe exactamente qué sintaxis se utiliza. Si un ejemplo bastante grande de Internet está hecho en estilo SCSS y su proyecto está escrito en SASS, puede importarlo a su archivo principal sin cambiar la sintaxis y la extensión del archivo usando la directiva @importar, por ejemplo, si descargaste un archivo carrusel.scss, entonces puedes conectarlo a tu principal.sass línea @importar "carrusel". También puede hacer la situación opuesta, cuando necesite importar archivos *.sass al archivo main.scss. En nuestro ejemplo de Github, importamos todo. _x.x.sass archivos en uno común.sass, donde x.x es el número del título del ejemplo de este artículo.

Usaremos la sintaxis de sangría.

1. Ampliando CSS con Sass

1.1 Reglas de inversión

Sass brinda a los desarrolladores una gran oportunidad de anidar reglas CSS dentro de otras, reduciendo así el tiempo dedicado a escribir/copiar selectores largos y hacer que el código esté más estructurado, con una jerarquía clara.

1.2 Vinculación a un selector principal

Si desea ampliar el selector sin crear una nueva regla, puede vincular selectores adicionales al selector terminado usando el signo & . En la superficie, esto parece crear un selector secundario en la jerarquía, pero usando & , estamos ampliando el selector principal en lugar de crear uno secundario.

Presta atención a la regla. cuerpo.firefox &, que nos permite obtener una nueva cadena de cualquier elemento anterior al actual si se establece al final & .

Además, el enlace principal se puede utilizar para crear selectores compuestos:

1.3 Propiedades anidadas

Para mayor comodidad, puede dividir el sufijo del espacio de nombres de la propiedad en archivos adjuntos. Por ejemplo, margen-arriba, margen-abajo margen-izquierda, margen-el derecho tiene una base común margen y se puede desglosar en archivos adjuntos de la siguiente manera:

1.4 Selectores comodín

A veces surge una situación en la que varios elementos de una página utilizan la misma base CSS, el mismo conjunto de propiedades, específicas solo para ellos. Estas reglas CSS básicas se pueden empaquetar como un selector comodín para usar en varios lugares de Sass. Los selectores comodín se infieren mediante una directiva. @extender.

2. SasScript

SassScript le permite ampliar significativamente las capacidades de Sass mediante el uso de variables personalizadas, aritmética y otras funciones. SassScript se puede utilizar para generar automáticamente nuevos selectores y propiedades.

2.1 Variables en Sass

Es una característica realmente interesante poder definir variables que se pueden usar en cualquier parte de su archivo Sass. Colores, valores predeterminados, unidades, todo esto puede incorporarse a una variable y usarse en el futuro. La variable se define así: $nombre: valor.

2.2 Operaciones con números y cadenas + interpolación

Sass le brinda la posibilidad de utilizar operaciones aritméticas estándar con números, como suma (+), resta (-), división (/) y módulo (%). Operadores de comparación (<, >, <=, >=, ==, !=) también son compatibles con números.

Además, Sass tiene la capacidad de concatenar (conectar) cadenas.

Como podemos ver en el ejemplo. $ suma: 10 + 20 / 2, se observa prioridad al realizar operaciones aritméticas: primero división, luego suma. Para definir el orden de las operaciones, puedes utilizar paréntesis, como en matemáticas. Tenga en cuenta que al agregar 12px + 8px, obtendremos 20px.

También preste atención a las líneas 2 y 9, aquí usamos la interpolación para colocar valores dinámicos en cualquier lugar del archivo Sass, incluso en el lugar donde tenemos el nombre de la propiedad, el nombre del selector o en cualquier línea.

Interpolación- Se trata de obtener un nuevo valor utilizando otros.

El uso más común de la interpolación en Sass es obtener un nuevo valor para una variable “integrándola” en el valor de otra variable, mediante el constructo #{} , Por ejemplo:

No puedes simplemente insertar una variable en una cadena sin usar interpolación, como puedes hacer en PHP con comillas dobles. Asegúrese de utilizar la interpolación en variables.

2.3 Operaciones con flores

Los colores en Sass se pueden sumar, restar, dividir y multiplicar. Todas las operaciones aritméticas se realizan para cada color por separado: rojo, verde y azul.

Tenga en cuenta que al agregar colores rgba, el último parámetro de opacidad de 0,75 no debe ser diferente de los demás en la expresión; de lo contrario, la adición fallará. En su lugar, puede ajustar el canal alfa rgba usando opacificar Y transparentar o controlar la opacidad de un color HEX utilizando la función rgba.

3. Directivas y normas

3.1 @importar

Puedes importar a tu archivo Sass hablar con descaro a, scs Y CSS archivos usando directiva @importar, mientras que todos los mixins y variables funcionarán en el archivo principal en el que se realiza la importación.

@import funcionará como @import CSS normal si:

presente en la ruta al archivo http://;
el archivo se llama a través de URL();
o la importación contiene parámetros multimedia.

Para que otro archivo se importe completamente al archivo Sass principal, la extensión del archivo debe ser *.hablar con descaro a, *.scss o *.css.

Veamos algunos ejemplos.

Se importan los siguientes archivos. ellos no lo harán:

Los siguientes archivos voluntad importado:

¡Atención! En nuevas versiones trago-descarado Para importar archivos CSS a Sass necesitas especificar la extensión .css

Es posible importar varios archivos, separados por comas: @importar "encabezado", "medios".

Los archivos que comienzan con un guión bajo se llaman fragmentos y al importar, no requieren especificar guiones bajos ni extensiones. Por ejemplo, archivo _encabezado.sass se puede importar así: @importar "encabezado".

Tenga en cuenta que la importación se produce en la ubicación donde especifica la directiva. @importar. En consecuencia, es posible realizar importaciones anidadas en el lugar donde sea necesario:

#main @import "ejemplo"

3.2 @en la raíz

Directiva @en-raíz eleva las reglas contenidas en él a la raíz, cancelando la cadena del padre. Aquí todo es sencillo:

No analizamos todas las directivas que hay en Sass, sino solo las más utilizadas en la práctica. Si está interesado en profundizar en las directivas de Sass, consulte la documentación.

4. Expresiones

Sass admite el uso de expresiones y funciones para diversas condiciones, implementaciones de bucles, etc.

4.1 Directiva @if()

Directiva @si() le permite ejecutar SassScript bajo ciertas condiciones y tiene la siguiente sintaxis:

4.2 Directiva @for

@para muestra un bloque con estilos un cierto número de veces. Puede configurar una variable de contador en tiempo de ejecución.

Puedes especificar a través de en lugar de a, si necesita ir del 1 al 11 inclusive, y no sólo hasta 10, como en el ejemplo.

4.3 @cada Directiva

Si desea recorrer una lista de valores en lugar de solo números, puede usar la directiva @cada:

4.4 Directiva @ while

@mientras recorre los bloques de estilo mientras la expresión es verdadero.

5. Mezclas

Hagfish- Bloques de código Sass (o mixins de plantillas), que pueden aceptar argumentos (opcionalmente) y pueden ampliar significativamente las posibilidades de escribir estilos y reducir el tiempo dedicado a aplicar las mismas reglas e incluso bloques CSS completos. Es algo así como una función que puede tomar un argumento, realizar una gran cantidad de trabajo y producir un resultado dependiendo del parámetro de entrada.

Un mixin es declarado por una directiva. @mixin, después del anuncio se debe indicar Nombre mixino. Llamado por una directiva mixin @incluir, que toma el nombre del mixin y los argumentos pasados, si los hay.

Amigos, hemos analizado las características principales de Sass, que son suficientes para un trabajo fructífero con estilos de sitios web CSS. Algunas directivas y funciones no están incluidas en esta guía, pero si está interesado en conocer todas las funciones de Sass, le resultará útil.

Responderé la pregunta de inmediato: cómo trabajar con estilos Sass en un sitio web terminado, ¿es realmente necesario editar el CSS terminado y cargarlo a través de FTP? No, no puedes hacer eso. Debería tener una copia local de sus estilos Sass o incluso el sitio completo y, después de terminar el trabajo, implementar (cargar) los estilos terminados a través de FTP. Para esto, puedes usar el paquete Gulp. vinilo-ftp. O configure un entorno Sass en su servidor para compilar archivos cargados a través de FTP/sFTP.

Eso es todo por hoy. ¡Gracias por su atención!

Sass permite anidar reglas CSS unas dentro de otras. La regla interna se aplica solo dentro del selector de reglas externas. No hay otra forma de traducir esto, la frase es ingeniosa, pero en realidad todo es más sencillo, basta con mirar el ejemplo:

archivo scss

#principal p (

color: #00ff00;

ancho: 97%;

Caja roja (

color de fondo: #ff0000;

color: #000;

CSS compilado

1 2 3 4 5 6 7 8

#principal p (

color: #00ff00;

ancho: 97%;

#principal p .redbox (

color de fondo: #ff0000;

color: #000;

Esto ayuda a evitar la repetición del selector principal y hace que sea mucho más fácil comprender un grupo de capas CSS con una gran cantidad de selectores anidados. Por ejemplo:

archivo scss

10 11 12

#principal (

ancho: 97%;

pag, div (

tamaño de fuente: 2em;

peso de fuente: negrita;

pre(

tamaño de fuente: 3em;

CSS compilado

11 12 13 14

#principal (

ancho: 97%;

#p principal,

#div principal (

tamaño de fuente: 2em;

#pa principal,

#div principal a (

peso de fuente: negrita;

#principal pre (

tamaño de fuente: 3em;

Referencia al padre de selectores (&)

No está claro por qué los desarrolladores de Sass lo llamaron así. En general, en pocas palabras, esto se puede llamar una referencia a uno mismo. Si no me equivoco, así lo llama la documentación de less (permítanme recordarles que less tomó muchas cosas de sass y también tomó prestado este diseño). Probablemente muchos se preguntarán ¿para qué sirve esto? Comencemos con el hecho de que sin esta construcción sería imposible implementar una única pseudoclase. U otro ejemplo, necesitamos proporcionar otros estilos de elementos dependiendo de qué clase tiene cuerpo html del documento. Te lo mostraré con un ejemplo de la documentación oficial.

archivo scss

1 2 3 4 5 6 7 8 9 10

peso de fuente: negrita;

decoración de texto: ninguna;

&: flotar (

decoración de texto: subrayado;

cuerpo .firefox & (

peso de fuente: normal;

CSS compilado

1 2 3 4 5 6 7 8 9 10

peso de fuente: negrita;

decoración de texto: ninguna;

un: pasar el cursor (

decoración de texto: subrayado;

cuerpo .firefox a (

peso de fuente: normal;

Creo que todo está claro con las pseudoclases. Echemos un vistazo más de cerca a la línea. cuerpo.firefox &. ¿Qué está pasando aquí? Si un enlace a sí mismo aparece detrás de algún elemento (puede ser un solo elemento html o una clase, id, no importa en absoluto), esto le dice al compilador que esta disposición cancela el anidamiento estándar de elementos. El compilador eliminará dicho elemento del flujo estándar. Si observa el ejemplo anterior, puede tener la sensación de que se compilará CSS en el que habrá un cuerpo.firefox un , pero no. Una referencia a sí mismo sigue al elemento con la clase, por lo que el compilador generará cuerpo.firefox a

archivo scss

1 2 3 4 5 6 7 8 9

#principal (

(Se ha cancelado el anidamiento estándar de elementos). Esto es algo bastante fundamental y debe entenderse. Los principiantes que acaban de cambiar a algún preprocesador no entienden muy bien cómo funciona la autorreferencia y, a menudo, escriben código que no funciona. Sólo necesitas recordar esto.

peso de fuente: negrita;

&: flotar (

color: negro;

CSS compilado

1 2 3 4 5 6 7 8 9

#principal (

color: rojo;

color : negro

peso de fuente: negrita;

#principal a: pasar el cursor (

color: negro;

En el ejemplo anterior puedes ver que la referencia a sí mismo &:flotar invertido en #principal e invertido en a, es independiente, no hay elementos delante de él, por lo que el anidamiento estándar funciona y el compilador genera #principal a: flotar.

En diferentes momentos, el mundo ha experimentado revoluciones tecnológicas. Esto sucedió a rachas. A grandes rasgos, bronce y bam, llegó la Edad del Hierro. Ahora no sabemos quién inventó la rueda o el arado, pero en ese momento estos descubrimientos fueron de naturaleza revolucionaria y cambiaron la vida tanto de las personas como de toda la humanidad. En la vida de la web, o más concretamente, en la vida de los maquetadores, hubo tres innovaciones que cambiaron su vida, y la cambiaron radicalmente. La primera son, por supuesto, las hojas de estilo en cascada, pero eso fue en los primeros días de la web. El segundo es jquery. Ahora viajar a través del modelo DOM se ha vuelto simple y conveniente, además de varios efectos. Y tercero, estamos en una época más moderna, esto es BEM. Acepta escribir algo interesante una vez y luego usarlo en diferentes proyectos sin ningún problema. La siguiente construcción del lenguaje Sass le ayudará con esto.

archivo scss

1 2 3 4 5 6

#principal (

&-barra lateral (

borde: 1px rojo sólido;

CSS compilado

1 2 3 4 5 6

#principal (

#barra lateral principal (

borde: 1px rojo sólido;

Tomé un ejemplo de la documentación. En la vida real, según BEM, esto no será id-ik #principal A .principal, pero la esencia no cambiará. te daré uno simple

El artículo "SASS para diseñadores y más" del 21/02/2013 ha cambiado de nombre a " Sintaxis SASS" y actualizado (2014-02-17)

Hablar con descaro a- este es un lenguaje de preprocesador; Los preprocesadores compilan el código CSS que escribimos en el lenguaje del procesador (SASS) en código CSS puro.

La documentación de SASS está más dirigida a programadores, por lo que los diseñadores no siempre están dispuestos a empezar a trabajar con SASS. Además, los beneficios de utilizar SASS desde la perspectiva del diseñador no siempre se indican claramente.

En este artículo quiero cubrir algunos principios simples. No soy un experto en SASS, pero debo señalar que usar sass es una decisión acertada.

Entonces, ¿cuáles son estos beneficios? Podrás estructurar lógicamente tu código, acelerando así el proceso de escritura de código; el número de repeticiones se reducirá significativamente (las variables nos ayudarán con esto), el código será mucho más fácil de mantener. El lenguaje SASS facilita el trabajo en un proyecto, sin importar quién sea: programador o diseñador. Esto es cierto.

variables

En SASS el nombre variable comienza con un signo de dólar ($). Los valores de las variables son idénticos a los valores de las propiedades CSS.

Comencemos con lo básico, es decir, las variables. Veamos las variables basadas en el siguiente ejemplo. Tendemos a utilizar varios colores en un documento. Como resultado, tendrás que escribir valores de color en formato hexadecimal o rgb una y otra vez. Si queremos cambiar algún color, tendremos que realizar el autoreemplazo en todo el documento. Sin embargo, no podemos estar seguros de que no capturaremos un valor innecesario.

A (color: #822733;).summary (color: #822733;).copyright (color: #822733;)

Por ejemplo, puede tener varias reglas que determinen el color rojo oscuro para los selectores deseados. El lenguaje SASS nos permite hacer lo siguiente: al principio del documento podemos definir una variable llamada $brand-color y luego en el documento reemplazar el valor con el nombre de la variable. Luego, si necesitamos cambiar el color, solo necesitamos cambiar el valor de la variable $brand-color y esto cambiará el color de todas las reglas que usan la variable $brand-color.

// Mi biblioteca de colores SASS $brand-color: #822733; a (color: $color-marca;).summary (color: $color-marca;).copyright (color: $color-marca;)

Valores numéricos para variables.

Las variables pueden contener no sólo cadenas, sino también números que puedes manipular. Si usa cuadrículas o escalas de diseño basadas en valores específicos, es probable que esté usando estos valores en todo su archivo de estilo. Por ejemplo, si usa constantemente un valor de 10px, entonces podría definir una variable como $unit = 10px. Esta variable se puede utilizar repetidamente en su código. En lugar del nombre de la variable, como es habitual, se sustituirá el valor (10px).

Pero ¿qué pasa si necesitas duplicar el valor de una variable? Por ejemplo, desea duplicar el margen inferior de un elemento. Usando SASS puedes agregar matemáticas simples (+ , - , * , / , %), por ejemplo en nuestro caso:

$unidad = 10px; h1, h2, h3 (margen inferior: $unidad;) p (margen inferior: $unidad;) a un lado (margen inferior: $unidad*2; /* 20px */) pie de página( margen superior: $unidad* 4; /* 40px */)

Impurezas

Impureza Se puede comparar con un bloque de declaraciones repetidas en el código. Este es un fragmento de código que puede usar en cualquier parte de su documento. No sólo eliminará repeticiones innecesarias, sino que también hará que el código sea más limpio, ya que eliminará la necesidad de utilizar la misma clase para diferentes elementos.

Por ejemplo, tienes un separador en tu sitio web que utilizas con bastante frecuencia. Por ejemplo, puedes usarlo para dividir bloques principales (por ejemplo, artículos y encabezado) o incluso párrafos. El divisor tiene un relleno inferior, un margen inferior, un borde y una sombra.

Para crear un borde, puede agregar la clase .shadow-border al elemento. Pero esto contaminará significativamente su archivo html y css.

Borde de sombra (borde inferior: 1px sólido #a4a4a4; -webkit-box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6); sombra de cuadro: 0px 2px 5px 0px rgba(200, 200, 200 , 0,6); relleno inferior: 20 px; margen inferior: 40 px;

Si desea una estructura correcta en el archivo CSS y un marcado HTML limpio, debe agregar la regla anterior a los elementos HTML correspondientes. Vale la pena señalar que si hay muchos elementos con un delimitador, esto "estropeará" significativamente el archivo de estilo, lo que dificultará su mantenimiento.

Encabezado, artículo, p.intro (borde inferior: 1px sólido #a4a4a4; -webkit-box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6); box-shadow: 0px 2px 5px 0px rgba(200 , 200, 200, 0,6); relleno inferior: 20 px; margen inferior: 40 px);

Usando @mixin, puede definir un nombre para el bloque de anuncios. Este nombre no debe estar asociado de ninguna manera con su HTML.

@mixin borde-sombra ( borde inferior: 1px sólido #a4a4a4; -webkit-box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6); sombra-cuadro: 0px 2px 5px 0px rgba(200, 200 , 200, 0,6); relleno inferior: 20 px; margen inferior: 40 px;)

Luego, para incluir un mixin en un elemento, sólo necesitas incluir el nombre del mixin: @include Shadow-border;

@mixin borde-sombra ( borde inferior: 1px sólido #a4a4a4; -webkit-box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6); sombra-cuadro: 0px 2px 5px 0px rgba(200, 200 , 200, 0.6); padding-bottom: 20px;margin-bottom: 40px;) artículo ( @include Shadow-border;) encabezado ( @include Shadow-border;) p.intro ( @include Shadow-border;)

Se ve bien.

Opciones para mixins

Los parámetros para mixins se especifican entre paréntesis después del nombre del mixin; El contenido del mixin está encerrado entre llaves.

@mixin border-radius($radius: 1px) ( -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; ) /* USE */ .example-class( color de fondo: #900; @include radio de borde (20px)

Anidamiento de impurezas

A veces resulta muy conveniente poder anidar una impureza dentro de otra. Por ejemplo, necesitamos agregar un mixin a un mixin ya existente:

$color del borde: #a4a4a4; $unidad: 10px; @mixin sombra-sutil ( -webkit-box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6); box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6); ) @mixin borde-sombra ( @include sombra-sutil; fondo-borde: $unidad/10 sólido $color-borde; fondo-relleno: $unidad*2; fondo-margen: $unidad*4;) artículo ( @include borde-sombra ;) encabezado ( @include Shadow-border;) p.intro ( @include Shadow-border;)

Adjuntos

Los mixins no son lo único que puedes poner en los selectores CSS (o más bien, bloques de declaración en un archivo sass). En SASS puedes anidar elementos uno dentro del otro. Esto eliminará selectores duplicados y hará que el código sea más fácil de leer.

/* CSS normal */ .module h3 (peso de fuente: negrita;) .module p (padding-bottom: 10px;)

/* escribir en SASS */ .module ( h3( font-weight: negrita;) p ( padding-bottom: 10px;) )

Archivos adjuntos y consultas @media

Los archivos adjuntos se vuelven increíblemente útiles cuando se trabaja con consultas de medios. Normalmente, cuando trabaja con consultas de medios, debe crear estilos adicionales para diferentes resoluciones de pantalla y, a veces, incluso crear un archivo de estilo separado.

/* ventana de visualización: cualquiera, incluidos los navegadores que no admiten @media */ artículo ( font-size: 14px; line-height: 25px;) artículo h2 ( font-size: 18px; padding-bottom: 15px;) /* para ventanas gráficas de 300 px y más anchas (móvil primero) */ @pantalla solo de medios y (ancho mínimo: 300 px) (artículo (altura de línea: 20 px; ancho: 90 %;) artículo h2 (padding-bottom: 10 px;)) / * para ventanas gráficas de 600 px y más anchas */ @pantalla solo de medios y (ancho mínimo: 600 px) (artículo (alto de línea: 25 px; ancho: 80 %;) artículo h2 (padding-bottom: 15 px;)) /* para 900 px ventanas gráficas y más anchas */ @pantalla solo de medios y (ancho mínimo: 900 px) (artículo (ancho: 60%;)) /* para ventanas gráficas de 1200 px y más anchas */ pantalla solo @media y (ancho mínimo: 1200 px) (artículo (tamaño de fuente: 16px; alto de línea: 30px; ancho: 50%;) artículo h2 (tamaño de fuente: 21px; alto de línea: 35px; fondo de relleno: 20px;))

SASS, por otro lado, le permite anidar todas las consultas de medios directamente dentro de los elementos. Esto le facilitará la búsqueda y edición de estilos que afectan el diseño adaptable.

Artículo (tamaño de fuente: 14 px; altura de línea: 25 px; h2 (tamaño de fuente: 18 px; padding-bottom: 15 px;) @media solo pantalla y (ancho mínimo: 300 px) (altura de línea: 20 px; ancho: 90%; h2 ( padding-bottom: 10px; ) ) solo pantalla @media y (ancho mínimo: 600px) ( line-height: 25px; ancho: 80%; h2 ( padding-bottom: 15px;) ) solo @media pantalla y (ancho mínimo: 900 px) (ancho: 60%;) @media solo pantalla y (ancho mínimo: 1200 px) (tamaño de fuente: 16 px; altura de línea: 30 px; ancho: 50 %; h2 (fuente- tamaño: 21 px; altura de línea: 35 px; relleno inferior: 20 px;

Importando, operador @import en SASS

@operador de importación
le permite incluir el contenido de un archivo CSS(SCSS) de terceros en el archivo CSS(SCSS) actual.
No se permite insertar @import después de ninguna declaración que no sea @charset u otra @import.

Para incluir contenido, por ejemplo, _style_two.scss, debes escribir así:

@importar "style_two.scss"; /* conectar sin guión bajo */

Importante: si no conecta un archivo específico, sino una carpeta, entonces no se generarán archivos CSS para los archivos que comienzan con _ .
Por ejemplo, tener un archivo style.scss dará como resultado la creación de style.css, pero tener un archivo _some.scss no. Por lo tanto, el guión bajo significa que el archivo no es una hoja de estilo independiente y sólo se puede importar a otra hoja de estilo.

Bucles en SASS

La sintaxis para la declaración de bucle (cada) es la siguiente: $var en . $var es el nombre de la variable y Enumere el valor de la variable $var.
$var se reemplaza con valores de , luego el contenido del ciclo se muestra en el archivo de estilo (por el número de valores ).
Por ejemplo:

SCSS

@each $animal en puma, babosa de mar, garceta, salamandra ( .#($animal)-icon ( background-image: url("/images/#($animal).png"); ) )

Compilado en:

CSS

.puma-icon (imagen de fondo: url("/images/puma.png"); ) .sea-slug-icon (imagen de fondo: url("/images/sea-slug.png"); ) .egret -icono (imagen de fondo: url("/images/egret.png"); ) .salamander-icon (imagen de fondo: url("/images/salamander.png"); )

operador @extender

A menudo existe una situación en la que una clase necesita tener todos los estilos de otra clase, además de sus propios estilos. La solución más común es utilizar dos clases; el primero contiene estilos generales, el segundo contiene estilos específicos.

El operador @extend evita estos problemas al permitir que un selector herede estilos de otro selector. Por ejemplo:

SCSS

.error ( borde: 1px #f00; color de fondo: #fdd; ) .error.intrusion ( imagen de fondo: url("/image/hacked.png"); ) .seriousError ( @extend .error; ancho de borde : 3px )

Compilado en:

CSS

.error, .seriousError ( borde: 1px #f00; color de fondo: #fdd; ) .error.intrusion, .seriousError.intrusion ( imagen de fondo: url("/image/hacked.png"); ) .seriousError ( ancho de borde: 3px)

Traducción del artículo: La guía absoluta de Sass para principiantes.
Andrés Chalkley.

¿Qué es SASS?

HABLAR CON DESCARO A es una abreviatura de Hojas de estilo sintácticamente impresionantes es un metalenguaje basado en CSS cuyo nombre se puede traducir como "CSS con excelente sintaxis", diseñado por Hampton Catlin.

Es una forma de simplificar el proceso de creación de estilos CSS, haciendo mucho más fácil desarrollar y posteriormente mantener el código.

Por ejemplo, ¿alguna vez, mientras atendía a un determinado cliente indeciso, tuvo que revisar todo el contenido de un archivo de estilo para encontrar un valor de color HEX específico para reemplazarlo por otro? ¿O recurrir a una aplicación de calculadora que no siempre está a mano para calcular el ancho de columna de una plantilla de varias columnas?

SASS tiene herramientas a su disposición para liberarte de esta rutina. Estos incluyen variables, mixino, anidando Y herencia del selector.

En principio, el código SASS es similar a CSS, pero la principal característica distintiva que llama la atención de inmediato es la ausencia de un punto y coma después de cada par propiedad-valor y la ausencia de llaves.

Tomemos como ejemplo el siguiente fragmento de código CSS:

#rascacielos_ad
{
mostrar: bloquear;
ancho: 120px;
altura: 600 px;
}

#leaderboard_ad
{
mostrar: bloquear;
ancho: 728px;
altura: 90 píxeles;
}

Lo cual es equivalente a este SASS:

#rascacielos_ad
pantalla: bloque
ancho: 120px
altura: 600px

#leaderboard_ad
pantalla: bloque
ancho: 728px
altura: 90px

SASS utiliza un espaciado (sangría al comienzo de la siguiente línea) de dos espacios para indicar el anidamiento de fragmentos de código. ( *En el último fragmento, para mayor claridad, resalté estos espacios con un fondo rojo.)

Ahora que tenemos una idea de cómo se crea el código SASS, veamos los problemas que lo hacen así. excelente.

Variables.

En SASS, para declarar una variable debes preceder su nombre con el símbolo del dólar $. Y si el nombre de su variable es, digamos, rojo , luego de los dos puntos podemos indicar el siguiente valor correspondiente a ella:

SASS tiene funciones integradas como oscurecer y aclarar que se pueden utilizar para modificar los valores de este tipo de variables.

Entonces, en el siguiente ejemplo, el color de fuente en los párrafos también será rojo, pero más oscuro que el usado en los títulos h1:

$rojo: #FF4848
$tamaño de fuente: 12px
h1
color: $ rojo

pag
color: oscurecer ($rojo, 10%)

Con las variables puedes realizar operaciones aritméticas como sumas y restas, siempre y cuando los valores utilizados sean del mismo tipo de datos. Si, por ejemplo, quisiéramos aplicar un tinte más oscuro, entonces todo lo que tenemos que hacer es restar del valor de color ya utilizado en el código, almacenado en una variable, un pequeño valor hexadecimal HEX igual a, digamos, #101. Lo mismo se aplica al caso en el que es necesario cambiar el valor del tamaño de fuente, digamos, aumentarlo en 10 píxeles, para ello simplemente agregamos los píxeles que faltan:

p.suma_y_resta
color: $rojo - #101
tamaño de fuente: $fontsize + 10px

Anidación.

Hay dos tipos de anidamiento en SASS.

Anidamiento de selectores.

Este es el primer tipo de anidamiento, similar al utilizado para estructurar el código HTML:

$tamaño de fuente: 12px

Vocero
.nombre
fuente:
peso: negrita
tamaño: $tamaño de fuente + 10px
.posición
fuente:
tamaño: $ tamaño de fuente

Si observa el código CSS resultante, cualquier comentario será innecesario. Anidando la clase .name dentro de la clase .speaker ( *de la misma manera - usando dos espacios al principio de la siguiente línea) se crea el selector CSS .speaker.name. Lo mismo se aplica al siguiente nombre de clase .position , ubicado después de la declaración de propiedades para el primer selector, lo que resulta en el anidamiento del segundo selector .speaker.position :

Nombre.altavoz(
peso de fuente: negrita;
tamaño de fuente: 22px; )
.posición.del.altavoz (
tamaño de fuente: 12px; )

Anidamiento de propiedades.

El segundo tipo de anidamiento le permite estructurar propiedades con un prefijo (* familia de fuentes, tamaño de fuente, peso de fuente o estilo de borde, color de borde, radio de borde, etc.):

$tamaño de fuente: 12px

Vocero
.nombre
fuente:
peso: negrita
tamaño: $tamaño de fuente + 10px
.posición
fuente:
tamaño: $ tamaño de fuente

En el ejemplo anterior, usamos la declaración de la fuente de propiedad universal principal: y luego, en una nueva línea después de una sangría de dos espacios, indicamos la segunda parte de la propiedad, que generalmente se encuentra después del guión.

Es decir, si especificamos la propiedad fuente:, en la siguiente línea después de dos espacios la propiedad peso:, como resultado esto será equivalente a la conocida propiedad peso-fuente.

Nombre.altavoz(
peso de fuente: negrita;
tamaño de fuente: 22px; )
.posición.del.altavoz (
tamaño de fuente: 12px; )

El módulo proporciona soporte para todas las propiedades que contienen guiones.

Este tipo de anidamiento es una excelente manera de organizar y estructurar su código CSS y evitar repeticiones no deseadas. ( *SECO- “No te repitas” - “No te repitas”. Situaciones en las que cuando CSS formatea ciertos elementos, sus estilos se repiten y/o anulan en otros lugares, lo que complica la legibilidad y el mantenimiento del código.).

Pez bruja.

Otra gran característica de SASS es mixino.

Los mixins le permiten reutilizar fragmentos enteros de código SASS e incluso pasarles argumentos si es necesario. Y lo que es más importante, también puedes especificar sus valores originales.

Para definir un mixin, utilice la palabra clave SASS especialmente reservada @mixin seguida del nombre del mixin de su elección. Si es necesario presentar argumentos, enumérelos entre paréntesis. Los valores predeterminados para el argumento se especifican al definir el mixin, separados por dos puntos. ( *En otras palabras, los mixins son funciones CSS.)

El procedimiento para usar mixins es muy simple: después de la palabra clave @include, especifique el nombre del mixin deseado y enumere los parámetros necesarios, si los hay, entre paréntesis.

Eche un vistazo al siguiente ejemplo:

@mixin border-radius($amount: 5px) /* define el mixin */
-moz-border-radius: $cantidad
-webkit-border-radius: $cantidad
radio-borde: $cantidad

h1 /* usar mixin */
@incluye radio de borde (2px)

Vocero
@incluye radio de borde

Este SASS, después de la compilación, se convertirá al siguiente código CSS:

h1 (
-moz-border-radio: 2px;
-webkit-border-radio: 2px;
radio de borde: 2x; )

Vocero (
-moz-border-radio: 5px;
-webkit-border-radio: 5px;
radio del borde: 5px; )

Para el encabezado h1 especificamos explícitamente el valor del radio de la esquina del borde, pero para el elemento con el nombre de clase .speaker no hicimos esto, por lo que se tomó el valor predeterminado de 5px.

Herencia de selectores.

Otro excelente Una característica de la sintaxis SASS es la capacidad de los selectores de heredar todos los estilos definidos para otros selectores. Para aprovechar esta característica, debe usar la palabra clave @extend, seguida de un selector cuyas propiedades desea heredar:

h1
borde: 4px sólido #ff9aa9

Vocero
@extender h1
ancho de borde: 2px

Qué se compilará en:

h1,.altavoz (
borde: 4px sólido #ff9aa9; )

Vocero (
ancho de borde: 2px; )

(*Tenga en cuenta que la declaración del borde: 4px solid #ff9aa9;)

no se repite dentro de una regla con el selector .speaker, sino que se agrega un segundo selector a la primera regla. En otras palabras, no hay duplicación de código.

Pruebe SASS en acción.

En línea.

Puede experimentar SASS en línea sin instalar primero el módulo en su computadora local. Pero antes de empezar a experimentar, en la parte inferior de la página, seleccione la opción.

"Sintaxis sangrada"

Instalado en la PC.

SASS en sí es una aplicación (joya) de la plataforma Ruby. Por tanto, para instalarlo no puedes prescindir de instalar primero la propia plataforma y el gestor de paquetes de este lenguaje de programación RubyGems. Después de instalar con éxito la plataforma y el administrador, ejecute el siguiente comando en la consola:

gema instalar descaro

El módulo SASS se puede utilizar como herramienta para convertir sus archivos SASS en archivos de formato CSS en modo de línea de comandos.

Esto se puede hacer, por ejemplo, ingresando el siguiente comando:

sass --ver sass_folder:stylesheets_folder

Donde sass_folder es la ruta a la carpeta que contiene los archivos SASS (es decir, con la extensión .sass) y stylesheets_folder es la ruta a la carpeta en la que se guardarán los archivos CSS resultantes después de la compilación. El comando --watch le dice al módulo que debe observar cualquier cambio en la carpeta especificada y, si los hay, después de guardarlos, convertir los archivos .sass originales en archivos .css equivalentes.

Conversión inversa de CSS a SASS.

Puede comenzar a usar SASS convirtiendo los estilos utilizados en sus proyectos existentes a este formato usando la utilidad "sass-convert". Para hacer esto, en la línea de comando, ingrese la ruta a la carpeta cuyo contenido desea convertir (*es decir, simplemente vaya al directorio deseado donde se encuentran los archivos fuente

). Luego ejecute la utilidad mencionada anteriormente y proporciónele los siguientes parámetros:

sass-convertir --de css --a sass –R. Donde el indicador -R especifica la forma recursiva de realizar la operación. Y el siguiente punto después de este.)

27.07.2017

significa que los archivos .sass resultantes se guardarán en el directorio actual. (

¿Qué es SASS?

SASS (Hojas de estilo sintácticamente impresionantes)- uno de los más populares. Es un conjunto de funciones CSS que le permiten codificar de forma más rápida y eficiente. SASS admite la integración con Firefox Firebug. SassScript le permite crear variables, estilos anidados y selectores heredados.

SASS hace que sea rápido y fácil escribir menos código CSS (a veces mucho menos) y administrarlo dinámicamente como un lenguaje de programación (por cierto, no es un lenguaje de programación). Es una gran herramienta para escribir CSS más funcional y limpio que puede acelerar el flujo de trabajo de cualquier diseñador y desarrollador.

¿Por qué necesitas SASS?

La mayoría de los marcos de front-end, incluidos Bootstrap, Materialise y Foundation, se crean con este excelente preprocesador. Conocer SASS le ayudará a utilizar más funciones de estos marcos.

¿Cómo utilizar SASS?

Existen multitud de aplicaciones que hacen que empezar a utilizar SASS sea fácil y rápido: CodeKit, Compass, Koala, etc. Aprenderá sobre ellos en otras partes del tutorial. En este capítulo, no utilizaremos ninguna aplicación o herramienta que no sean las necesarias para ejecutar SASS en una computadora. No tendrás que preocuparte por el sistema operativo porque todo estará claro para todos los usuarios.

Descargar e instalar SASS

Sólo puedes instalar SASS en una máquina que ya tenga Ruby instalado:

Ruby viene preinstalado en Mac, por lo que puedes instalar Sass Macintosh de inmediato;
Si estás en Windows, primero deberás descargar Ruby;
Ruby en Linux se puede descargar a través del administrador de paquetes apt, rbenv o rvm.

Una vez que Ruby esté instalado, puede instalar SASS en su máquina. Abramos una línea de comando de Ruby e instalemos SASS en su sistema:

Gem instalar descaro

Si el comando anterior no funciona, es posible que tengas que usar el comando sudo:

Sudo gem instalar descaro

Si desea verificar la versión de SASS, use el siguiente comando:

SASS está instalado. Creemos una carpeta de proyecto y llamémosla sass-basic. Cree un archivo html básico con el siguiente código:

Mi primer proyecto SASS

Hola amigo, estoy aprendiendo SASS y es realmente increíble.

Cuerpo( alineación de texto: centro; ) h1( color: #333; ) p( color: #666; )

Ahora necesita compilar este archivo usando la línea de comando/terminal. Abramos un símbolo del sistema en el mismo directorio (es posible que deba usar el símbolo del sistema de Ruby si el símbolo del sistema normal no funciona). Escriba lo siguiente y presione Entrar:

Sass --ver estilo.scss:estilo.css

Notarás que se han generado nuevos archivos: style.css y style.css.map. Vale la pena señalar que no es necesario tocar el archivo del mapa, al igual que el archivo .css. Si desea realizar algún cambio, puede hacerlo a través de style.scss. No es necesario que repita este proceso cada vez que cambie de estilo. La compilación SASS funcionará automáticamente cuando realice cambios en el archivo .scss.

En el próximo capítulo, veremos las variables de SASS y por qué son la característica más útil de SASS (y de cualquier otro preprocesador de CSS).

Popular en la categoría: