Empezando con descarado CSS. Directivas y expresiones de control. Convirtiendo CSS de nuevo a SASS

Lo cual es necesario para compilar código en preprocesadores SASS y LESS. Veamos cómo trabajar con el preprocesador SASS.

Preprocesamiento

Escribir CSS es divertido en sí mismo, pero cuando una hoja de estilo se vuelve enorme, resulta difícil de mantener. Y en este caso el preprocesador nos ayudará. SASS le permite utilizar funciones que no están disponibles en el propio CSS, por ejemplo, variables, anidamiento, mixins, herencia y otras cosas interesantes que devuelven la comodidad de escribir CSS.

Una vez que comienza a usar SASS, el preprocesador procesa su archivo SASS y lo guarda como un archivo CSS simple que puede usar en cualquier sitio.

variables

Piense en las variables como una forma de almacenar información que desea utilizar durante la redacción de cada estilo de proyecto. Puedes almacenar colores, pilas de fuentes o cualquier otro en variables valores CSS que quieres usar. Para crear una variable en Sass necesitas usar el símbolo $. Veamos un ejemplo:

$font-stack: helvética, sans-serif; $color primario: #333; cuerpo (fuente: 100% $font-stack; color: $color-primario; )

Cuando se procesa Sass, toma los valores que configuramos en $font-stack y $primary-color y los inserta en el archivo CSS normal en los lugares donde especificamos las variables como valores. Esto hace que las variables sean una característica poderosa, por ejemplo cuando se trabaja con colores de marca utilizados en un sitio.

Cuerpo (fuente: 100% Helvetica, sans-serif; color: #333; )

Anidamientos

En escribiendo HTML Es posible que hayas notado que tiene una jerarquía visual y anidada clara. Este no es el caso de CSS.

Sass te permitirá anidar selectores CSS de la misma manera que en la jerarquía visual HTML. Pero recuerde que el anidamiento excesivo hace que su documento sea menos legible y comprensible, lo que se considera una mala práctica.

Para entender lo que queremos decir, he aquí un ejemplo típico de estilos de navegación en un sitio web:

Nav ( ul ( margen: 0; relleno: 0; estilo de lista: ninguno; ) li ( pantalla: bloque en línea; ) a ( pantalla: bloque; relleno: 6px 12px; decoración de texto: ninguno; ) )

¿Notaste que los selectores ul, li y a están anidados dentro del selector de navegación? Este gran manera haga que su archivo CSS sea más legible. Cuando genere el archivo CSS, el resultado será algo como esto:

Nav ul (margen: 0; relleno: 0; estilo de lista: ninguno;) nav li (pantalla: bloque en línea;) nav a (pantalla: bloque; relleno: 6px 12px; decoración de texto: ninguno;)

Fragmentación

Puede crear fragmentos de archivos Sass que contengan pequeños fragmentos de CSS que se pueden usar en otros archivos Sass. Esta es una excelente manera de hacer que su CSS sea modular y también más fácil de mantener. Un fragmento es un archivo Sass simple cuyo nombre comienza con un guión bajo, por ejemplo, _partial.scss. El guión bajo en el nombre de un archivo Sass le dice al compilador que es solo un fragmento y no debe compilarse en CSS. Los fragmentos de Sass se incluyen mediante la directiva @import.

Importar

CSS tiene una función de importación que le permite dividir su archivo CSS en archivos más pequeños y hacerlos más fáciles de mantener. Pero este método tiene un inconveniente importante: cada vez que usa @import en CSS, se crea otra solicitud HTTP en CSS. Sass toma la idea de importar archivos a través de la directiva @import, pero en lugar de crear una solicitud HTTP separada, Sass importa el archivo especificado en la directiva al que se llama, es decir. El resultado es un archivo CSS compilado a partir de varios fragmentos.

Por ejemplo, tiene varios fragmentos de archivos Sass: _reset.scss y base.scss. Y queremos importar _reset.scss a base.scss.

// _reset.scss html, cuerpo, ul, ol ( margen: 0; relleno: 0; ) // base.scss @import "reset"; cuerpo (fuente: 100% Helvetica, sans-serif; color de fondo: #efefef;)

Tenga en cuenta que utilizamos @import 'reset'; en el archivo base.scss. Cuando importa un archivo, no necesita especificar la extensión .scss. Sass es un lenguaje inteligente y se resolverá solo. Cuando se genere el CSS obtendrás:

Html, cuerpo, ul, ol ( margen: 0; relleno: 0; ) cuerpo ( fuente: 100% Helvetica, sans-serif; color de fondo: #efefef; )

Mixinas (mixinas)

Algunas cosas en CSS son bastante tediosas de escribir, especialmente en CSS3, donde además a menudo necesitas usar gran número prefijos de proveedores. Mixins le permite crear grupos de declaraciones CSS que usará varias veces en su sitio. Es bueno usar mixins para prefijos de proveedores. Ejemplo de radio de borde:

@mixin border-radius($radius) ( -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; ) .box ( @include radio-borde(10px); )

Para crear un mixin, use la directiva @mixin + el nombre del mixin. Llamamos a nuestro mixin border-radius. Además, en el mixin usamos la variable $radius dentro del paréntesis, lo que nos permite pasar lo que queramos en la variable. Una vez que haya creado un mixin, puede usarlo como parámetro CSS iniciando la llamada con @include y el nombre del mixin. Cuando tu CSS se compila obtendrás esto:

Cuadro ( -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; )

Herencia

Esta es una de las características más útiles de Sass. Usando la directiva @extend, puedes heredar conjuntos de propiedades CSS de un selector a otro. Esto mantiene limpio su archivo Sass. En nuestro ejemplo, le mostraremos cómo diseñar notificaciones de error, advertencia y éxito.

Mensaje (borde: 1px sólido #ccc; relleno: 10px; color: #333; ) .success ( @extend .message; color del borde: verde; ) .error ( @extend .message; color del borde: rojo; ) . advertencia ( @extend .message; color del borde: amarillo; )

El código anterior le permite tomar las propiedades CSS de .message y aplicarlas a .success, .error y .warning. Hay una magia que funciona durante la compilación del archivo CSS que te ayudará a evitar escribir clases innecesarias en elementos HTML. El resultado se ve así:

Mensaje, .éxito, .error, .advertencia (borde: 1px sólido #cccccc; relleno: 10px; color: #333; ) .éxito (color del borde: verde; ) .error (color del borde: rojo; ) .advertencia (color del borde: amarillo;)

Operadores matemáticos

Usar matemáticas en CSS es muy útil. Sass tiene varios operadores matemáticos estándar como +, -, *, / y %. En nuestro ejemplo, estamos haciendo algunos cálculos simples para calcular el ancho del lado y del artículo.

Contenedor ( ancho: 100%; ) artículo ( flotante: izquierda; ancho: 600px / 960px * 100%; ) a un lado ( flotante: derecha; ancho: 300px / 960px * 100%; )

Creamos una cuadrícula modular responsiva simple con un ancho de 960 píxeles. Usando operadores matemáticos, tomamos los datos resultantes con valores de píxeles y los convertimos a porcentajes sin mucho esfuerzo. El CSS compilado se ve así:

Contenedor (ancho: 100%; ) artículo ( float: izquierda; ancho: 62,5%; ) a un lado ( float: derecha; ancho: 31,25%; )

Ejemplo práctico:

En nuestro archivo HTML, solo necesitamos un código muy simple y un enlace al archivo CSS en la carpeta CSS de nuestro proyecto.

¡Eso es todo el HTML que necesitamos! Ahora pasemos a Sass. Inicia sesión en favorito editor de texto y crear nuevo archivo, guárdelo en la carpeta sass y asígnele el nombre style.scss. Para hacerlo más fácil, escribiremos todo en SCSS, que Sass también puede manejar, y SCSS no es muy estricto con los principiantes. Al principio de nuestro archivo escribiremos reinicio básico para HTML, importar para Compass y escribir colores variables para el botón.

@import "brújula"; //Restablecimiento simple de cuerpo, div, a (margen: 0; relleno: 0; borde: 0; ) a (decoración de texto: ninguna;) a:focus (esquema: 0;) // Variables de color $color-botón: #2e6bc6; $botón-inicio: #37a0dc; $botón-detener: #2068a6; $borde: #163861; $texto-sombra: #06304b; //Colores al pasar el cursor $button-hover-color: #2e7dc6; $botón-hover-inicio: #3f9ff0; $botón-desplazamiento-parada: #2874a9; $enfoque-sombra: #0b3c5f; //Estilos de cuerpo básicos (familia de fuentes: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;)

En la parte superior del archivo llamamos a Compass para incluirlo en el archivo y usar las clases abstractas más adelante. Además, escribimos un reinicio simple y ya usamos una propiedad: variables. ¡Esto nos brinda la capacidad de almacenar valores que usaremos en todo nuestro CSS, incluidos colores, valores de fuente y muchos más! Aquí los estoy usando para almacenar los colores usados ​​en el botón y para simplificar la notación, así como reutilizar en la hoja de estilo.

Asignar estilos a un botón

.button (ancho: 158px; alto: 30px; margen: 120px automático; tamaño de fuente: 16px; peso de fuente: negrita; alineación de texto: centro; pantalla: bloque; color: #fff; relleno: 7px 0 0; borde : 1px sólido $borde; sombra de texto: 0 -1px 0 $posición de sombra de texto: relativa)

¡Déle estilo a este botón! Comenzaremos aplicando estilos básicos a la etiqueta de clase del botón. He configurado algunos estilos de botones básicos aquí y observo cómo uso las variables.

¡Ahora vayamos a la parte divertida! ¿Recuerda la importación de Compass colocada al principio de la hoja de estilo? Lo usaremos aquí porque Compass tiene gran biblioteca clases integradas que incluyen prefijos CSS3 para aquellos navegadores que aún necesitan soporte para prefijos.

Botón (ancho: 158 px; alto: 30 px; margen: 120 px automático; tamaño de fuente: 16 px; peso de fuente: negrita; alineación de texto: centro; pantalla: bloque; color: #fff; relleno: 7 px 0 0; borde: 1px solid $border; text-shadow: 0 -1px 0 $text-shadow; posición: relativa; //Clases de brújula @include background($button-color linear-gradient(top, $button-start 20%, $button- detener)); @include border-radius(3px); @include box-shadow(inset 0 1px 0 rgba(#fff, 0.8));

Después de definir inicialmente los estilos, podemos incluir varias clases abstractas para colores de fondo, gradientes lineales, radios de marco y transiciones. ¡Lo mejor es que todo se compilará sólo con los prefijos necesarios y nos ahorrará tiempo al escribirlos! La clase se compilará por ahora en el archivo style.css en lo siguiente:

Botón (ancho: 158 px; alto: 30 px; margen: 120 px automático; tamaño de fuente: 16 px; peso de fuente: negrita; alineación de texto: centro; pantalla: bloque; color: #fff; relleno: 7 px 0 0; borde: 1px sólido #163861; sombra de texto: 0 -1px 0 #06304b; posición: relativa; fondo: #2e6bc6 -webkit-gradient(lineal, 50% 0%, 50% 100%, color-stop(20%, #37a0dc ), color-stop(100%, #2068a6)); fondo: #2e6bc6 -webkit-linear-gradient(arriba, #37a0dc 20%, #2068a6); 37a0dc 20%, #2068a6); fondo: #2e6bc6 -o-linear-gradient(arriba, #37a0dc 20%, #2068a6); -radio-borde: 3px; -radio-borde-moz: 3px; -radio-o-borde: 3px; -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); -shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8); box-shadow: inset 0 1px 0 rgba(255, 255, 255), 0.8); -webkit-transition: todos los 0.3s son fáciles; -transición: todos los 0,3 s facilitan; transición: todos los 0,3 s facilitan; )

Estilos de escritura con elementos anidados

Otra gran característica de un preprocesador como Sass es la capacidad de anidar elementos y adjuntar clases con un elemento principal al que usted asigna estilos. Luego, esto se compila en el CSS requerido para funcionar.

Botón ( &:hover ( @include background($button-hover-color gradiente lineal(arriba, $button-hover-start 20%, $button-hover-stop)); @include box-shadow(recuadro 0 1px 1px rgba(#fff, 0.95)); &:active ( @include background(linear-gradient(bottom, $button-start 20%, $button-stop)); text-shadow: 0 1px 0px $text-shadow; @ incluir box-shadow(inserto 0 2px 8px $focus-shadow) )

Después de los estilos del botón principal, puede anidar selectores de pseudoclase para los estados :hover y :active del elemento, usando un signo comercial que le indica a Sass que se trata de una clase anidada adjunta a elemento padre. En el estado de desplazamiento, puede agregar énfasis al degradado y la sombra interior usando clases abstractas Brújula, mientras que el estado activo: activo invierte el degradado y cambia la sombra del cuadro para que parezca como si se hubiera presionado un botón.

Botón: pasar el cursor (fondo: #2e7dc6 -webkit-gradient(lineal, 50% 0%, 50% 100%, color-stop(20%, #3f9ff0), color-stop(100%, #2874a9)); fondo: #2e7dc6 -webkit-linear-gradient(arriba, #3f9ff0 20%, #2874a9); fondo: #2e7dc6 -moz-linear-gradient(arriba, #3f9ff0 20%, #2874a9); %, #2874a9); fondo: #2e7dc6 gradiente lineal (arriba, #3f9ff0 20%, #2874a9); -webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95); sombra de cuadro: inserto 0 1px 1px rgba(255, 255, 255, 0.95); activo (fondo: -webkit-gradient(lineal, 50% 100%, 50% 0%, color-stop(20%, #37a0dc) , color-stop(100%, #2068a6)); fondo: -webkit-linear -gradient(abajo, #37a0dc 20%, #2068a6); 2068a6); fondo: -o-linear-gradient(abajo, #37a0dc 20%, #2068a6); fondo: linear-gradient(abajo, #37a0dc 20%, #2068a6); -webkit-box-shadow: inserto 0 2px 8px #0b3c5f; -moz-box-shadow: inserto 0 2px 8px #0b3c5f; sombra de cuadro: inserción 0 2px 8px #0b3c5f; )

Lo anterior muestra lo que sucede después de que los estados :active y :hover se compilan en Sass; están escritos como selectores de pseudoclase para el elemento principal en CSS procesable, así como el CSS que necesitamos, completo con alternativas, para completar nuestro botón de tres estados.

Archivo style.scss y hoja de estilo compilada.

Eso es todo lo que hay en nuestro archivo style.scss, porque está organizado, escrito de forma sencilla y contiene clases y variables abstractas que hacen parte del trabajo por nosotros y luego se compilan en el archivo de hoja de estilo final, style.css.

27.07.2017

Esta serie de tutoriales SASS está destinada a principiantes y desarrolladores experimentados. Este es el primero de un tutorial de cuatro partes que lo guiará a través del preprocesador, lo instalará y conocerá algunas de sus características.

¿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 frontend, 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 tienes que preocuparte por Sistema operativo, porque todo quedará 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. Crea un básico archivo html 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 SASS y por qué son las más funciones útiles SASS (y cualquier otro preprocesador CSS).

¡Hola a todos! Qué rápido pasa el tiempo. Ni siquiera me di cuenta de cómo cambié de estilos de escritura de CSS normal al preprocesador Sass. Pero antes no lo entendía: qué tipo de Sass es, para qué se necesita, probablemente sea para profesionales súper avanzados en diseño. Sí, utilizar preprocesadores es un paso adelante nuevo nivel en desarrollo web, pero aquí no hay nada complicado ni aterrador y lo comprobarás leyendo este artículo hasta el final.

Entonces, ¿qué tiene de bueno el preprocesador y Sass específicamente? Diré de inmediato que hay otros, como Less, Stylus, etc. Todos funcionan según el mismo principio, pero cada uno tiene sus propias características. Sass ha ganado gran popularidad entre los profesionales, facilitando mucho el aprendizaje. Lo que pasa es que cuanto más popular es la tecnología, más grande es la comunidad y más extensa es la documentación.

Los preprocesadores están diseñados para aliviar al desarrollador de la mayor parte tareas rutinarias al escribir código, aumentando así la velocidad y la calidad del trabajo. Además de los preprocesadores CSS, también existen preprocesadores HTML, por ejemplo, Pug (Jade).

Estructura del artículo

Documentación

El desarrollador de Sass es el francés Hugo Giraudel, que vive desde hace algún tiempo en Alemania. Naturalmente, la documentación está en inglés, pero personalmente la entiendo bien (es importante saber inglés técnico). Pero también hay una traducción al ruso. todavía lo recomendaría versión en inglés, esto es para acostumbrarse y estudiar inglés cada vez más profundamente. Pero el ruso tampoco es peor.

• Documentación en inglés: http://www.sass-lang.com
• Documentación rusa: https://sass-scss.ru

Compilando Sass a CSS

El software que utilizo para compilar Sass a Css es el complemento del administrador de tareas de Sass. En general, Sass es una aplicación (Gem) lenguaje rubí. Por lo tanto, si desea prescindir de Gulp, para compilar en CSS deberá instalar la plataforma del lenguaje de programación Ruby. No mostraré cómo se hace esto ahora, puedes leer sobre ello en el sitio web oficial.

Sintaxis: Sass, Scss

Permítanme señalar de inmediato que existen 2 sintaxis para escribir código: Sass y Scss.

La sintaxis de Sass difiere ligeramente de la de Scss. Scss se parece más a lo normal codigo css, y Sass omite las llaves y el punto y coma entre las reglas. También existen diferencias en cómo se escriben algunas funciones y hay que tener cuidado con la sintaxis que se elige. Extensiones de archivo para Sass: *.hablar con descaro a, y para Scss - *.scss. La sintaxis de Sass es más antigua y Scss llegó más tarde para facilitar el aprendizaje a los principiantes. Yo mismo comencé a estudiar este preprocesador en Scss, así era más fácil de entender. Ahora me cambié a Sass, es más conveniente para mí.

Si hablamos de Sass, entonces su estructura de código se basa en sangrías (después de todo, no tiene llaves) y debe tener cuidado aquí, ya que tanto un tabulador (TAB - 4 espacios) como espacios ordinarios ( normalmente es un doble espacio). Yo siempre uso un tabulador.

¡Recordar! Si usa una tabulación como sangría, entonces se deben excluir los espacios para que todo sea igual. Y viceversa: si usa espacios, entonces se debe excluir el tabulador. De lo contrario, el compilador arrojará un error.

Hablar con descaro a

.maincontent .main-title tamaño de fuente: 30px peso de fuente: 700 margen: 0 0 30px .descripción margen inferior: 30px p color: #444444 tamaño de fuente: 16px altura de línea: 22px

scs

.maincontent ( .main-title ( tamaño de fuente: 30px; peso de fuente: 700; margen: 0 0 30px; ) .description ( margen inferior: 30px; p ( color: #444444; tamaño de fuente: 16px; línea -altura: 22px;) ) )

En la mayoría de los editores de código (por ejemplo, Texto sublime) hay marcas de sangrías en forma de rayas, lo que evita que nos confundamos. En los ejemplos siguientes utilizaré la sintaxis Sass.

Simplificando tu vida con Sass

Anidamiento de reglas

Esto es lo que me gustó de Sass desde el principio, fue precisamente el anidamiento de reglas CSS unas dentro de otras. Esto ahorra mucho tiempo y el código está estructurado y es fácil de leer. Por ejemplo, si queremos escribir estilos para elementos de un contenedor principal específico, entonces en CSS debemos especificar la clase principal cada vez, por ejemplo así:

Main .title (tamaño de fuente: 30px; color: #444; ) .main .subtitle ( tamaño de fuente: 20px; ) .main .description ( tamaño de fuente: 14px; margen inferior: 30px; )

Es decir, especificamos la clase principal.main en todas partes y esto, a su vez, no es del todo conveniente. Usando Sass, puedes escribirlo así:

scs

.main ( .title ( tamaño de fuente: 30px; color: #444; ) .subtitle ( tamaño de fuente: 20px; ) .description ( tamaño de fuente: 14px; margen inferior: 30px; ) )

Hablar con descaro a

.main .title tamaño de fuente: 30px color: #444 .subtitle tamaño de fuente: 20px .descripción tamaño de fuente: 14px margen inferior: 30px

De acuerdo, se ve mucho mejor y puedes escribir código más rápido, porque escribimos la clase principal.main solo una vez. Si quieres seguirme sin instalar Ruby ni ningún software similar, puedes utilizar el compilador en línea para una demostración.

Propiedades anidadas

Además de las reglas de anidamiento en Sass, existe la posibilidad de anidar propiedades. Por ejemplo, aquí se explica cómo escribir valores de margen:

Hablar con descaro a

.main .title margen: superior: 10px derecho: 15px inferior: 10px izquierdo: 15px

CSS

.main .title (margen superior: 10 px; margen derecho: 15 px; margen inferior: 10 px; margen izquierdo: 15 px;)

Enlace o concatenación del selector - & signo

Podemos acelerar la escritura de nuestro código y hacerlo aún más compacto usando concatenación (conexión) usando el símbolo - & . ¿Cómo funciona esto? Por ejemplo, tenemos clases como: .main-title, .main-subtitle, .main-description. En Sass, estas clases se pueden escribir de la siguiente manera:

Tamaño de fuente principal y del título: 30 px color: #444 Tamaño de fuente del subtítulo: 20 px Tamaño de fuente de la descripción: 14 px margen inferior: 30 px

Título principal (tamaño de fuente: 30 px; color: #444; ) .subtítulo principal ( tamaño de fuente: 20 px; ) .descripción principal ( tamaño de fuente: 14 px; margen inferior: 30 px; )

Usando un símbolo & nos conectamos a la clase raíz, es decir, en en este caso no es necesario seguir repitiendo root.main. Al mismo tiempo, tenga en cuenta que no hemos creado ningún elemento hijo.

/* Enlace */ a ( color: rojo; ) a:hover ( color: azul; ) /* Pseudoelementos */ .main::before ( contenido: ""; display: block; tamaño de fuente: 20px; ) .main ::after (contenido: ""; pantalla: bloque; tamaño de fuente: 30px;)

A veces es necesario especificar una cadena de selectores hasta el elemento actual. Por supuesto, puedes moverlo a la raíz, pero para no romper el anidamiento, puedes escribirlo de la siguiente manera:

Contenedor principal y ancho: 700px

Contenedor.main (ancho: 700px)

Al moverse & después del selector, cambiamos el orden de acoplamiento, es decir, el contenedor de clase en este caso es el padre.

Vinculante al selector principal, pero un nivel superior

Arriba, como ejemplo, demostré el código Sass:

Tamaño de fuente principal y del título: 30 px color: #444 Tamaño de fuente del subtítulo: 20 px Tamaño de fuente de la descripción: 14 px margen inferior: 30 px

Ahora imagine que en el bloque .main-title hay otro elemento al que se le debe aplicar un estilo explícito utilizando toda la cadena de padres. Durante mucho tiempo simplemente especifiqué el nombre raíz (en este caso, .main), pero esto no es muy conveniente. Empecé a hurgar en la documentación de Sass y encontré una solución. De hecho, todo es simple: debemos declarar un enlace al padre y usarlo cuando sea necesario.

Así lo hice antes:

Tamaño de fuente principal y del título: 30px color: #444 .main__icon // especifique la raíz.main; de lo contrario, si usa & se vinculará a .main-title color: #444 ancho: 20px y tamaño de fuente del subtítulo : 20px y descripción tamaño de fuente: 14px margen inferior: 30px

Y ahora puedes hacer esto:

Principal $self: & // enlace al padre &-title tamaño de fuente: 30px color: #444 #($self)__icon // en lugar de & use un enlace al color principal: #444 ancho: 20px &-subtítulo tamaño de fuente: 20px y descripción tamaño de fuente: 14px margen inferior: 30px

Si te diste cuenta, declaramos una referencia al padre: $self: & . Esto me recuerda un poco a una referencia al objeto (this) que desencadenó el evento en javaScript. Ahora, en el lugar correcto, podemos simplemente llamarlo #($self) . Resulta que todo es simple, pero me rascaba la cabeza y pensaba que no había solución a este problema en Sass.

Título principal (tamaño de fuente: 30px; color: #444; ) .título principal .main__icon ( color: #444; ancho: 20px; ) .subtítulo principal ( tamaño de fuente: 20px; ) .descripción principal ( tamaño de fuente: 14px; margen inferior: 30px)

Plantillas

A menudo sucede que varios elementos tienen la misma base estilística, pero se diferencian entre sí sólo en algunas reglas. Tomemos como ejemplo los botones. Si tomamos botones del mismo tamaño, entonces pueden diferir entre sí solo en el color: rojo, verde, gris, etc. Si usa CSS puro, tendrá que especificar todos los colores de los botones en los estilos básicos, separados por comas, o crear clase base. Pero en Sass es mucho más fácil:

%color de fondo del botón: #666 borde: 1px sólido #666 relleno: 0 20px tamaño de fuente: 15px altura de línea: 40px altura: 40px .button-green @extend %button color de fondo: verde color de borde: verde. botón-rojo @extend %botón color-fondo: rojo color-borde: rojo

Botón-verde, .botón-rojo (color de fondo: #666; borde: 1px sólido #666; relleno: 0 20px; tamaño de fuente: 15px; altura de línea: 40px; altura: 40px; ) .button-green ( color de fondo: verde; color de borde: verde; ) .botón-rojo (color de fondo: rojo; color de borde: rojo; )

La plantilla en este caso es el selector de botón % (esto se indica con el signo -%). Esto es conveniente porque el selector de plantilla en sí no está involucrado en ninguna parte y sus estilos son heredados por otros selectores a través de la directiva: @extender. Esta plantilla se puede utilizar tantas veces como desee, reduciendo así la cantidad de código.

SassScript

En Sass, como en los lenguajes de programación, existen funciones tales como: crear variables, operaciones aritméticas(suma, resta, división, multiplicación, etc.), iteraciones (bucles), funciones (mixins) y mucho más. Es decir, Sass es un tipo de lenguaje de programación, que nuevamente está diseñado para simplificar la escritura de código y acelerar significativamente el trabajo.

variables

Una variable en Sass comienza con un signo. $ , y el nombre está escrito en latín, por ejemplo: $color . Cabe señalar que las señales: “ — " Y " _ » son intercambiables. Por ejemplo, si llamaste a $color-red , entonces puedes llamar a $color_red . La variable se define de la siguiente manera: $nombre: valor, por ejemplo: $color: #f6f6f6 .

Una variable declarada fuera de cualquier nivel de anidamiento está disponible globalmente, es decir se puede utilizar en todas partes. Si define una variable en cualquier nivel de anidamiento del selector, estará disponible solo en este nivel. Para que funcione globalmente en todo el documento, debe especificar una palabra clave !global.

Título $tamaño de fuente: 10px !tamaño de fuente global: $tamaño de fuente .subtítulo tamaño de fuente: $tamaño de fuente

En general, las variables son algo maravilloso; sólo necesitas declararlas e ingresar un valor, y luego puedes usarlas tanto como quieras, en cualquier lugar. Por ejemplo, podemos definir colores dándoles nombres específicos, tamaño de fuente, familia de fuentes, etc. y cualquier significado en general.

Directivas

@extender

Ya mencionamos esta directiva anteriormente cuando estudiamos la plantilla en blanco. Consolidemos nuestros conocimientos nuevamente. Al usar @extender Podemos copiar las reglas de cualquier selector. Por ejemplo, durante el diseño puede ser que el elemento " A"y el elemento" B"puede ser similar en apariencia. En este caso, puedes escribir reglas para el elemento “A”, y para “B” puedes simplemente copiar los estilos del elemento “A”, redefiniendo ligeramente las propiedades necesarias.

Block_a color de fondo: #cccccc borde: 5px sólido #999999 relleno: 20px tamaño de fuente: 30px alto: 150px ancho: 150px .block_b @extend .block_a relleno: 15px

Block_a, .block_b (color de fondo: #cccccc; borde: 5px sólido #999999; relleno: 20px; tamaño de fuente: 30px; altura: 150px; ancho: 150px;) .block_b (relleno: 15px;)

EN en este ejemplo Hicimos 2 cuadrados idénticos. Para el cuadrado “B” solo redefinimos relleno: 15 píxeles. Así es como funciona @extend. Utilizo esta directiva con bastante frecuencia.

@importar

Esta directiva le permite combinar varios archivos de estilo en uno. Esto es muy conveniente, especialmente si el proyecto es grande. No debe confundirse con la directiva que existe en CSS: @importar. En CSS, el atributo requerido es: URL().

De hecho, es más conveniente escribir estilos en diferentes archivos y cada uno tiene su propio propósito. Por ejemplo, todo el marco de la página se puede dividir en regiones: header.sass, sidebar.sass, footer.sass. Puede recopilar todo en el archivo principal main.sass usando @import. Los archivos de región también se pueden especificar usando un guión bajo al principio del nombre del archivo, por ejemplo: _header.sass, _sidebar.sass, _footer.sass. Estos archivos se denominan fragmentos. Al importar fragmentos, no es necesario especificar la extensión del archivo.

Importación sencilla

@import "encabezado.sass" @import "sidebar.sass" @import "pie de página.sass"

Importando fragmentos

@import "encabezado" @import "barra lateral" @import "pie de página"

Los archivos de fragmentos pueden tener las siguientes extensiones: *.hablar con descaro a, *.scss o *.css. Por ejemplo, el archivo principal podría tener la extensión *.hablar con descaro a y el encabezado del sitio, por ejemplo, con la extensión *.scss. Es decir, no importa qué extensión del archivo principal tengas. Cabe señalar que al importar, todas las variables y mixins (de ellos hablaremos a continuación) se transfieren al archivo principal en el que se realiza la importación.

También puede especificar la importación de varios archivos separados por comas: @import “encabezado”, “barra lateral”, “pie de página”.

Tenga en cuenta que la importación se produce en el lugar donde especificó la directiva. @importar. Generalmente esto se hace al principio del documento.

@en-raíz

Directiva @en-raíz habla por sí solo y, si se traduce al ruso, sonará así: "desde la raíz". En otras palabras, movemos el selector a la raíz, deshaciendo la cadena de selectores padres. Aquí, por supuesto, puedes hacer la pregunta: "¿Por qué se necesita esta directiva si puedes mover el selector a la raíz manualmente?" La respuesta es simple: la conveniencia de escribir código sin romper la estructura. Cuando aprenda a trabajar con Sass al máximo, comprenderá esto.

Tamaño de fuente principal y título: 30 px color: #444 @at-root .main__icon color: #444 ancho: 20 px

Título principal (tamaño de fuente: 30px; color: #444;) .main__icon (color: #444; ancho: 20px;)

Directivas y expresiones de control

@si directiva

Esta directiva ejecuta estilos si la expresión contenida en ella devuelve cualquier valor excepto FALSO Y nulo.

$color: verde .header @if $color == verde color de fondo: verde @else if $color == azul color de fondo: azul @else color de fondo: #f6f6f6

Encabezado (color de fondo: verde;)

Aquellos que estén familiarizados con al menos los conceptos básicos de un lenguaje de programación (por ejemplo, javaScript o Php) no les resultará difícil entenderlo. La esencia aquí es la misma, lo principal es conocer la sintaxis para escribir código.

@para directiva

En un lenguaje de programación (nuevamente en Javascript o Php) usando Para puedes establecer un ciclo. En Sass, esta directiva hace lo mismo: crea un bucle. Para cada iteración (repetición), se utiliza una variable de contador que cambia los datos de salida.

La directiva tiene 2 formas de escritura: 1. @for $var from<начало>a través de<конец>y 2. @for $var de<начало>a<конец>. Si desea que el último dígito se incluya en el bucle, utilice " a través de". Veamos un ejemplo:

@for $i del 1 al 6 .elem-item-#($i) imagen-de-fondo: url("images/image-#($i).jpg")

Elem-item-1 (imagen de fondo: url("imagenes/imagen-1.jpg"); ) .elem-item-2 (imagen de fondo: url("imagenes/imagen-2.jpg"); ) . elem-item-3 (imagen de fondo: url("imagenes/imagen-3.jpg"); ) .elem-item-4 (imagen de fondo: url("imagenes/imagen-4.jpg"); ) . elem-item-5 (imagen de fondo: url("imagenes/imagen-5.jpg"); )

Para especificar el valor final utilicé la palabra clave " a". En esta situación, el ciclo termina en el número - 5 . Observe lo compacto que se ve el código Sass.

@cada directiva

Directiva @cada Al igual que @for, muestra valores en un bucle y es conveniente porque, además de los números, puede iterar sobre valores específicos. Tomemos el bucle anterior y cambiémoslo a algunos valores.

@each $bgItem en animal, lago, mar, paisaje, naturaleza .elem-item-#($bgItem) imagen de fondo: url("images/image-#($bgItem).jpg")

Elem-item-animal (imagen de fondo: url("imagenes/imagen-animal.jpg"); ) .elem-item-lake (imagen de fondo: url("imagenes/imagen-lake.jpg"); ) . elem-item-sea (imagen de fondo: url("imagenes/imagen-mar.jpg"); ) .elem-item-landscape (imagen de fondo: url("imagenes/imagen-paisaje.jpg"); ) . elem-item-naturaleza (imagen de fondo: url("imagenes/imagen-naturaleza.jpg"); )

En este caso, no se crea una variable de contador y el número de iteraciones depende del número de valores creados después palabra clave « en". Los valores se generan a través de una variable (en este ejemplo, $bgItem), cuyo nombre puede ser arbitrario.

Mixins (funciones)

Los mixins (mixins) son un tipo de función, como en un lenguaje de programación, que está diseñada para deshacerse del código repetitivo. Los mixins pueden contener fragmentos de estilo completos, que están permitidos en Sass. Veamos un ejemplo para mayor claridad.

@mixin align-center posición: superior absoluto: 50% izquierda: 50% transformar: traducir(-50%, -50%) .container @include align-center

Un mixin se crea con la directiva @mixin, seguida de un espacio separado por el nombre del mixin, así como parámetros pasados ​​opcionalmente. Permítanme señalar de inmediato que los signos de guión (-) y guión bajo (_) en el nombre del mixin son intercambiables. Un mixin puede contener no sólo reglas, sino también selectores. Arriba di un ejemplo de un mixin elemental sin parámetros.

Se llama al mixin con la directiva @include y luego, separados por un espacio, indicamos el nombre del mixin creado. En el ejemplo anterior, esto es centrar el bloque a lo largo del eje X y a lo largo del eje Y usando posicionamiento absoluto. Si tiene que usar esto con frecuencia, entonces estará de acuerdo en que es más fácil simplemente llamar a un mixin que escribir estilos de centrado una y otra vez.

Ahora veamos un mixin con parámetros (argumentos).

@mixin border($ancho, $color) borde: ancho: $ancho estilo: color sólido: $color .square @include border(2px, #ccc)

Cuadrado (ancho del borde: 2px; estilo del borde: sólido; color del borde: #ccc;)

Como puedes ver, después del nombre del mixin entre paréntesis especificamos los argumentos, en este caso el ancho y el color del borde. Este es el mixin más simple que proporcioné para mayor claridad. En la práctica, puedes encontrar mixins más complejos utilizando diversas condiciones y variables. Pero no compliquemos todo ahora; siempre debemos comenzar con algo pequeño y simple, y luego avanzar a medida que avanzamos.

Con esto quiero completar mi breve reseña Preprocesador Sass. ¿Por qué pequeño? Sí, porque esto no es todo lo que os dije. En general, usando lo anterior, ahora puede comenzar a usar Sass en lugar de Css de manera segura. Puede obtener más información sobre Sass consultando la documentación que proporcioné anteriormente.

Bueno, ¡gracias a todos por su atención! Como siempre, haz preguntas en los comentarios y suscríbete al canal de Telegram o a la newsletter por correo electrónico (formulario en la barra lateral de la derecha) para no perderte nada interesante.

Nos vemos en mis otras publicaciones...

Ya hay muchos artículos sobre SASS (SCSS), Less on Habrahabr, pero en mi opinión no hay suficiente en el que haya un poco de práctica real. Intentaré llenar este vacío. Hace aproximadamente un año, uno de los artículos de SASS me “enganchó”, y desde entonces me ha encantado tanto esta tecnología que marcación manual El código CSS normal me parece una pérdida de tiempo. Este artículo está dedicado a aquellos diseñadores de diseño (o programadores web) que aún no han oído hablar de SCSS o aún no lo han probado en la práctica. Creo que los camaradas más experimentados no tienen nada que atrapar en esto.

¿Qué es SCSS?

SCSS es un "dialecto" del idioma SASS. ¿Qué es SASS? SASS es un lenguaje similar a HAML (un motor de plantillas muy conciso), pero diseñado para simplificar la creación de código CSS. En pocas palabras, SASS es un lenguaje cuyo código se traduce a código CSS normal mediante un programa especial Ruby. La sintaxis de este lenguaje es muy flexible, tiene en cuenta muchas de las pequeñas cosas que son tan deseables en CSS. Además, incluso tiene lógica (@if, each), matemáticas (puedes sumar números, cadenas y colores). Quizás algunas funciones SCSS le parezcan redundantes, pero, en mi opinión, no serán superfluas, permanecerán "en reserva".

La diferencia entre SCSS y SASS es que SCSS es más similar al código CSS normal. Ejemplo de código SASS:

$azul: #3bbfce $margen: 16px .content-navigation color del borde: $color azul: oscurecer($azul, 9%) .relleno del borde: $margen / 2 margen: $margen / 2 color del borde: $azul
Y lo mismo en SCSS:

$azul: #3bbfce; $margen: 16px; .content-navigation (color del borde: $azul; color: oscurecer($azul, 9%); ) .border (relleno: $margen / 2; margen: $margen / 2; color del borde: $azul; )
Elegí SCSS porque es más fácil de entender para los colegas que aún no están familiarizados con él. También vale la pena señalar que el código CSS normal encaja bien en la sintaxis SCSS.

Instalación y uso

Primero necesitas instalar Ruby. Luego necesitas instalar sass-gem (gem instala sass en la consola). Si todo salió bien, ya está disponible para ti. programa de consola hablar con descaro a. Puede leer sobre todos los matices de su uso aquí: sass --help. Sólo hablaré de dos características básicas:

--mirar

Si ejecuta sass con el parámetro --watch, el programa monitoreará los archivos que especifique. Si cambian, reconstruirá automáticamente todos los archivos CSS necesarios (no todos, sino sólo aquellos asociados con los modificados).

Supongamos que tiene la siguiente estructura de proyecto:

Css ---- scss ------ estilo.scss ---- estilo.css
Es necesario que sass rastree todos los cambios en css/scss/* y guarde el resultado en css/*.css. En este caso, ejecute sass así: sass --watch css/scss:css/. . Aquellos. sass --mira [qué]:[dónde] .

--actualizar

Si necesita actualizar los archivos CSS una vez, utilice --update en lugar de --watch. No habrá vigilancia, ni controles de la necesidad de actualización.

Vale la pena señalar que, a diferencia de Less, SASS no sabe cómo compilar su código directamente en el navegador. En mi opinión, este enfoque (compilación en un servidor o diseñador de diseño de PC) es el único correcto.

Práctica

Entonces, llegamos a lo más importante. Comencemos con @import.

@importar

Inicialmente, antes usando SCSS, todo CSS El código del motor, con el que tengo que trabajar mientras estoy de servicio, estaba en un archivo enorme style.css. Mi IDE (Netbeans (por cierto, aquí hay un complemento para resaltar la sintaxis)) funcionó con una desaceleración significativa. Nadie quería dividirlo en muchos archivos más pequeños y, si fuera necesario, fusionarlos en uno. SCSS maneja este problema automáticamente.

Vale la pena señalar 1 matiz. Si alimenta a sass no con un archivo fuente específico, sino con un directorio, entonces archivos css no se generará para archivos que comiencen con _ . Aquellos. la presencia de un archivo style.scss dará como resultado la creación de un style.css, pero la presencia de un archivo _some.scss no.

Entonces, para incluir el contenido del archivo _template.scss o template.scss escribimos

@importar "plantilla"; // plantillas
Al final, en lugar de 1 archivo style.css grande, terminé con más de cien archivos scss pequeños. A primera vista, puede parecer que esta cantidad es demasiado grande y provocará un tormento terrible. Sin embargo, encuentro el archivo que necesito inmediatamente basándose en la conveniente estructura de directorios. Además, creo que gracias al almacenamiento en caché, este "esquema" tiene más rendimiento.

@anidación

Una de las características más deseables de CSS es el anidamiento de selectores. Ejemplo:

#some ( borde: 1px rojo sólido; .some ( fondo: blanco; ) ) /* => */ #some ( borde: 1px rojo sólido; ) #some .some ( fondo: blanco; )
Otro ejemplo:

Entrada ( borde: 1px gris sólido; fondo: blanco; & ( color: negro; ) &.some_class ( pantalla: ninguna; ) ) /* => */ entrada ( borde: 1px gris sólido; fondo: blanco; ) entrada ( color: negro; ) input.some_class (pantalla: ninguna;)
El carácter & es equivalente al selector principal. digamos la etiqueta Tenemos la clase ie_7 si tenemos Internet Explorer 7 como navegador. El siguiente código le permite deshacerse de todos los "trucos" y comentarios especiales:

$IE_7: "cuerpo.ie_7"; //... .some ( mostrar: bloque en línea; #($IE_7) & ( zoom: 1; mostrar: en línea; ) ) /* => */ .some ( mostrar: bloque en línea; ) body.ie_7 .algunos (zoom: 1; pantalla: en línea;)

$ variables

Las variables son algo útil. Se definen así:

$algunos:rojo;
Las variables no son constantes, se pueden cambiar a medida que avanza el código :) Uno de mis primeros pensamientos resultó en el archivo _const.scss, que contiene todos los colores básicos, tamaños de fuente, etc.

enlace $: #15157d; $link_bottom: $enlace; $input_font_size: 13px; $content_bg: #F1F1F1; $entrada_color: #4E4D4D; $input_color_placeholder: #959595; $text_color: negro; ...
Se supone que el color de los enlaces del sitio es $link.

A ( color: $enlace; ) span.link ( color: $enlace; decoración de texto: subrayado; )
Si luego resulta que el color de los enlaces ha cambiado, basta con cambiar 1 variable (en el caso de CSS, sería necesario reemplazar automáticamente los archivos, quizás incluso de forma selectiva). Supongamos que, de repente, resulta que en algún módulo de contactos, el color de los enlaces es diferente. Hay al menos dos soluciones.

$contactos_enlace: naranja; // código del módulo usando $contacts_link en lugar de $link
Segundo

$__enlace: $enlace; $enlace: naranja; // código del módulo $enlace: $__enlace;
Nuestras variables no están escritas, por lo que pueden contener igualmente cadenas, números y colores.

@matemáticas

Dividamos las matemáticas en 2 categorías: colores y números. Empecemos por los números. Ejemplo sencillo:

Bloque ( $block_width: 500px; relleno: 5px; borde: 1px negro sólido; ancho: $block_width - (5px * 2) - (1px * 2); )
Si lo desea, también puede configurar el relleno con el borde usando variables. Todo depende de la complejidad del diseño.

Otro ejemplo:

Bloque ( $count: 10; $margin_left: 5px; $all_width: 1000px; ancho: $all_width; .sub_element ( ancho: ($all_width / $count) - $margin_left; margen: 0 0 0 $margin_left; ) )
Me gustaría señalar que este tipo Las manipulaciones se utilizan con mucha frecuencia. Sin ellos estoy como sin piernas.

Y ahora los colores. Los colores se pueden sumar y multiplicar:

Algunos ( $color: #010203; color: $color; color del borde: $color - #010101; &:hover ( color: #010203 * 2; ) ) /* => */ .algunos ( color: #010203; color del borde: #000102; .some:hover (color: #020406;)
Algo bastante útil cuando eres demasiado vago para elegir colores. También están disponibles funciones como opacificar y transparente (más

Sass (hojas de estilo sintácticamente impresionantes)- Este es un script metamova, que está compilado en el estilo CSS original. Si está bien familiarizado con CSS + HTML, comprenderá SASS en unos días.

Cualquiera que trabaje con CSS de más de 500 filas tendrá dolor de cabeza sobre cómo solucionarlo. Desafortunadamente, a lo largo de las horas de desarrollo de estándares para estilos en cascada, su estructura no ha cambiado radicalmente. Vimogi antes del diseño, a quien le voy a mentir, se calmaron rápidamente. Si con 50-70 filas de estilos se podía diseñar un sitio simple, hoy en día es obligatorio mostrar algo como esto en el encabezado. Eso y aquello, solo en mi :).

En 2007 apareció la primera versión de SASS, desarrollada por Hampton Catlin. No creo que un conjunto simple de reglas y un compilador simple estuvieran destinados a ser una de las principales herramientas de los maestros de front-end y diseñadores de diseño de la Internet moderna.

Las extensiones de archivos SASS pueden ser .hablar con descaro a і . scs- Esto se debe a la sintaxis seleccionada. El navegador, sin embargo, no comprende ninguno de ellos, por lo que para un entendimiento mutuo es necesario utilizar el compilador. El objetivo es convertir SASS en CSS clásico y simple que sea reconocido por cualquier navegador.

La función del compilador puede descargar js del lado del servidor o el programa instalado en su máquina de trabajo y monitorear los cambios en los archivos de trabajo.

¿Cuáles son las sintaxis en Sass?

El idioma tiene dos “dialectos” principales: SASS y el nuevo SCSS. Las diferencias entre ellos son pequeñas; si se infringen las reglas de sintaxis, el archivo no se puede compilar. La sintaxis SASS no tiene lazos rizados, el anidamiento de elementos en otros nuevos se implementa utilizando entradas adicionales y las reglas de estilo se refuerzan con nuevas filas.

Independientemente de la sintaxis, SCSS es similar a CSS. Entonces cualquier CSS definitivamente será un código SCSS efectivo.

Debido a la falta de arcos y mayúsculas, la sintaxis SASS con CSS no tiene valor.

Vigodi Sass

Te contaré el comienzo en pocas palabras y luego daré un breve informe. Nunca ha habido cambios en CSS y los trucos para la compatibilidad entre navegadores son importantes. Abajo en las colillas verás que SASS está en peligro y los dos problemas están más cerca.

Cambios (variables)

Sass te permite asignar cambios, y esta es una de las ventajas clave. El término, por analogía con php, comienza con el signo de dólar ($), los valores se asignan después del doble signo adicional.

Los mensajes en Sass se pueden dividir en 4 tipos:

1. número (int)
2. cadena
3. Tipo booleano (so/nor, booleano)
4. colores (nombres, nombres)

Te daré un ejemplo sencillo, después de que cualquier tema se vuelva relevante, para que todo te quede claro y puedas entenderlo todo por ti mismo.

sintaxis SCSS

$azul: #3bbfce; /* color */ $margen: 16px; /* acceso */ $fontSize: 14px; /* tamaño del texto */ .content ( border: 1px solid $blue; /* borde azul */ color: darken($blue, 20%); /* oscurecer el color en un 20% */ ) .border ( padding: $ margen/2; margen: $margen/2; color del borde: $azul)

sintaxis SASS

$azul: #3bbfce $margen: 16px $fontSize: 14px .borde de contenido: 1px sólido $color azul: oscurecer($azul, 20%) .relleno del borde: $margen / 2 margen: $margen / 2 color del borde: $ azul

Resultado en CSS

Contenido ( borde: 1px sólido #3bbfce; color: #217882; ) .border ( relleno: 8px; margen: 8px; color del borde: #3bbfce; )

Como puede ver, como resultado eliminaremos el CSS original. Vámonos.

Reglas de anidamiento

Solo valoraría Sass para aquellos que anidan en el nuevo. Esto hará que sea mucho más fácil editar estilos y navegar por el archivo de estilos de trabajo.

Nav ( ul ( margen: 0; relleno: 0; estilo de lista: ninguno; ) li ( pantalla: bloque en línea; ) a ( pantalla: bloque; relleno: 6px 12px; decoración de texto: ninguno; ) )

Nav ul (margen: 0; relleno: 0; estilo de lista: ninguno;) nav li (pantalla: bloque en línea;) nav a (pantalla: bloque; relleno: 6px 12px; decoración de texto: ninguno;)

Ya no tendrás que preocuparte por la inclusión de elementos y la corrección de la descomposición de clases. Insertado visualmente en Sass, la mitad del elemento de regla del padre se conservará dentro de la misma jerarquía de reglas CSS.

Adición (mezcla)

La regla DRY (No repetirse) se implementa en Sass mediante la técnica mixin. Aquellos fragmentos de código que probablemente haya tenido que duplicar en CSS se pueden guardar aquí en un lugar separado e insertarlos en los lugares requeridos. El compilador, al realizar dicho cambio, ahorrará reemplazar el código necesario con él.

@mixin table-base ( th ( text-align: center; font-weight: negrita; ) td, th ( padding: 2px ) ) #data ( @include table-base; )

#data th (text-align: center; font-weight: negrita; ) #data td, #data th ( padding: 2px; )

Argumentos

Además, puede cambiar el código en la ubicación de los argumentos que se le pasan. Por ejemplo, la compatibilidad entre navegadores con Hakami se puede colocar en una fila.

@mixin border-radius($radius) ( -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; ) .box -1 ( @include border-radius(10px); ) .box-2 ( @include border-radius(5px); )

Box-1 ( -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; ) .box-2 ( -webkit-border-radius: 5px; -radio-borde-moz: 5px; -radio-borde-ms: 5px;

Herencia (extender)

Habiendo creado una regla una vez, podemos vikorizarla en medio de otra cosa. El elemento de herencia quita todos los poderes de la clase descendiente, que podemos agregar a otros.

Error ( borde: 1px #f00; fondo: #fdd; ) .error.intrusion ( tamaño de fuente: 1.3em; peso de fuente: negrita; ) .badError ( @extend .error; ancho de borde: 3px; )

Error, .badError (borde: 1px #f00; fondo: #fdd;) .error.intrusion, .badError.intrusion (tamaño de fuente: 1,3em; peso de fuente: negrita;) .badError (ancho de borde: 3px; )

Estas son oportunidades simples para aumentar la fluidez del diseño y evitar que el código se pierda en el código. Cada vez, para mí. Vale recordar que toda la documentación sobre SASS está en el sitio web con ejemplos y una descripción del informe (en inglés).

Compiladores

Los programas compiladores comprueban los archivos .scss y .sass en busca de cambios y compilan automáticamente estilos ya preparados a partir de ellos. Elija por qué: el eje de opciones para complacer a los distribuidores.