¿Qué es Sass? Su guía para este preprocesador CSS superior

¿Qué es Sass?
(Crédito de la imagen: Sass)

¿Qué es Sass? Esa es la pregunta que estamos aquí para responder. Si es nuevo en el diseño web, probablemente haya escuchado el término flotando, pero es posible que no esté al tanto de lo que es exactamente Sass, lo que hace y si debería o no usarlo. En resumen, Sass es un preprocesador de CSS, que agrega características especiales como variables, reglas anidadas y mixins (a veces denominados azúcar sintáctico) en CSS normal. El objetivo es hacer que el proceso de codificación sea más simple y eficiente. Exploremos con más detalle.

Para obtener más herramientas, explore nuestra guía de mejores marcos CSS y la cima herramientas de diseño web intentar.

¿Qué es un preprocesador CSS?

Un preprocesador de CSS es un lenguaje de programación que amplía CSS al permitir que los desarrolladores escriban código en un idioma y luego lo compilen en CSS. Hablar con descaro a es quizás el preprocesador más popular en este momento, pero otros ejemplos bien conocidos incluyen Menos y Aguja .



Antes de continuar, un anuncio de servicio público rápido está en orden: la mayoría de los diseñadores web dirían que si eres nuevo en CSS, es mejor que evites Sass (o cualquier preprocesador, extensión o marco) mientras aún estás aprendiendo. Si bien es cierto que ofrecen muchas ventajas en cuanto a velocidad y eficiencia, es importante que realmente se familiarice con los conceptos básicos de CSS. Asegúrese de aprender los conceptos básicos antes de comenzar a explorar atajos y cosas confusas.

¿Qué es Sass?

hablar con descaro a

Sass es posiblemente la más útil de todas las extensiones CSS

Sass (que significa 'hojas de estilo sintácticamente impresionantes) es una extensión de CSS que le permite usar cosas como variables, reglas anidadas, importaciones en línea y más. También ayuda a mantener las cosas organizadas y le permite crear hojas de estilo más rápido.

Sass es compatible con todas las versiones de CSS. El único requisito para usarlo es que debe tener Ruby instalado. También se pide a los usuarios que sigan las Directrices de la comunidad de Sass .

Cómo usar Sass

En la siguiente sección, describiremos algunos consejos básicos para usar Sass, utilizando ejemplos del sitio web oficial de Sass. Eche un vistazo a Documentación de Sass para obtener referencias y ejemplos adicionales.

Sintaxis

Sass incluye dos opciones de sintaxis:

  • SCSS (CSS atrevido): Usa el .scss extensión de archivo y es totalmente compatible con la sintaxis CSS
  • Sangrado (simplemente llamado 'Sass'): Usos .hablar con descaro a extensión de archivo y sangría en lugar de corchetes; no es totalmente compatible con la sintaxis CSS, pero es más rápido de escribir

Tenga en cuenta que los archivos se pueden convertir de una sintaxis a otra utilizando la sass-convert mando.

Variables

Al igual que otros lenguajes de programación, Sass permite el uso de variables que pueden almacenar información que puede utilizar en toda su hoja de estilo. Por ejemplo, puede almacenar un valor de color en una variable en la parte superior del archivo y luego usar esta variable al configurar el color de sus elementos. Esto le permite cambiar rápidamente sus colores sin tener que modificar cada línea por separado.

Por ejemplo:

|_+_|

Se producirá el siguiente CSS:

|_+_|

Anidamiento

Anidar es un arma de doble filo. Si bien proporciona un método excelente para reducir la cantidad de código que necesita escribir, también puede conducir a CSS sobrecalificado si no se ejecuta con cuidado. La idea es anidar sus selectores CSS de tal manera que imiten su jerarquía HTML.

A continuación, se muestra un estilo de navegación básico que utiliza el anidamiento:

|_+_|

La salida de CSS es la siguiente:

|_+_|

Parciales

Los parciales son archivos Sass más pequeños que se pueden importar (consulte la siguiente sección) a otros archivos Sass. Piense en los parciales como fragmentos de código. Con estos fragmentos de código, su CSS ahora puede ser modular y más fácil de mantener. Un parcial se designa como tal nombrándolo con un guión bajo inicial: _partial.scss .

Importar

Usado con parciales (ver sección anterior), el @importar La directiva le permite importar sus archivos parciales al archivo actual, para construir un solo archivo CSS. Tenga en cuenta cuántas importaciones está utilizando como solicitud HTTP que se generarán para cada una.

|_+_||_+_|

Y la salida CSS correspondiente:

|_+_|

Nota: al importar parciales, no es necesario incluir la extensión del archivo ni el guión bajo.

Mixins

Una de las ventajas de utilizar preprocesadores es su capacidad para tomar código complejo y prolijo y simplificarlo. ¡Aquí es donde los mixins son útiles!

Por ejemplo, si necesita incluir los prefijos del proveedor, puede usar un mixin en su lugar. Eche un vistazo a este ejemplo para radio de borde :

|_+_|

Observe la @mixin directiva en la parte superior. Se le ha dado el nombre radio de borde y usa la variable $ radio como su parámetro. Esta variable se utiliza para establecer el valor del radio para cada elemento.

Más tarde, el @incluir se llama a la directiva, junto con el nombre de mixin ( radio de borde ) y un parámetro ( 10px ). Por lo tanto .box {@include border-radius (10px); } .

Se produce el siguiente CSS:

|_+_|

Extender / Herencia

los @ampliar La directiva ha sido llamada una de las características más poderosas de Sass. Después de verlo en acción, queda claro por qué.

La idea es que con esta directiva no tendrá que incluir varios nombres de clase en sus elementos HTML y puede mantener su código SECO (no lo repita). Sus selectores pueden heredar los estilos de otros selectores y luego ampliarse fácilmente cuando sea necesario. Eso es poderoso.

Operadores

Tener la capacidad de realizar cálculos en su CSS le permite hacer más, como convertir valores de píxeles en porcentajes. Tendrá acceso a funciones matemáticas estándar como suma, resta, multiplicación y división. Por supuesto, estas funciones se pueden combinar para crear cálculos complejos.

Además, Sass incluye algunos funciones integradas para ayudar a manipular los números. Funciones como porcentaje() , suelo() y redondo() para nombrar unos pocos.

Leer más: