SASS La guía definitiva para el desarrollo web moderno

SASS: la guía definitiva para el desarrollo web moderno

A medida que se desarrolló la vida de CSS, se ha vuelto cada vez más importante tener más control sobre la organización, así como un mejor flujo de trabajo que el que ofrece actualmente el lenguaje de hojas de estilo. Esta necesidad ha sido satisfecha por preprocesadores CSS como LESS, PostCSS y posiblemente el más popular, Hablar con descaro a. En esta publicación, veremos qué son los preprocesadores, por qué pueden tener un impacto tan positivo en su flujo de trabajo CSS y cómo puede comenzar a usar Sass.

¿Qué es un preprocesador CSS?

Un preprocesador de CSS es esencialmente un lenguaje de secuencias de comandos que convertirá el código CSS con variaciones de sintaxis menores en CSS3 normal. En el caso de Sass, este es un script que originalmente fue escrito en Ruby, aunque hay puertos disponibles que usan otros lenguajes como JavaScript, a través de Node.js.

Cómo empezar con Sass

Hay muchas opciones diferentes para usar Sass. En la línea de comando, existen las opciones de usar la gema Ruby original, la Puerto Node.js, o usando corredores de tareas como Gulp o Grunt. Si prefiere utilizar una GUI, varias recomendaciones incluyen Compass, CodeKit o Hammer.

Lo que hacen todos estos programas es tomar el código Sass de una hoja de estilo (una .sass or .scss archivo), y luego compílelo en un archivo .css expediente. Hay ventajas y desventajas en cada opción, pero si no está seguro de por dónde empezar, uno de los programas GUI sería un buen lugar para comenzar.

Variables

Una de las características más útiles de Sass es la capacidad de crear variables. Al igual que con cualquier otro lenguaje de programación adecuado, puede asignar valores a las variables para recuperarlas cada vez que lo use. Las variables en Sass se escriben con un $ firmar antes del nombre, por ejemplo:

$ mainColor: # dbcbb4;

Esto es útil por al menos dos razones: 1. Siempre que desee reutilizar el mismo color u otro valor, simplemente necesita reutilizar la variable, sin tener que recordar nunca estilos comunes. 2. Si alguna vez necesita cambiar el valor de varios selectores, todo lo que tiene que hacer es cambiar el valor de la variable.

Nesting

Otra característica útil de Sass es la capacidad de anidar declaraciones entre sí. Esto puede resultar útil para mostrar cómo se relacionan las diferentes declaraciones entre sí. Como ejemplo, en lugar de tener que escribir:

.contenedor {ancho: 800px; } .container h1 {tamaño de fuente: 40px; }

Simplemente puedes escribir:

.contenedor {ancho: 800px; h1 {tamaño de fuente: 40px; }}

Las funciones clave

Sass tiene muchas funciones integradas, que permiten la manipulación real del código CSS. Estos son solo algunos ejemplos:

Mezcle dos colores juntos:

mezclar ($ color primario, $ segundo color)

Haz un color más oscuro (donde $amount es un valor de cuánto oscurecerlo):

oscurecer ($ color, $ monto)

Matemáticas

Otra característica útil es la capacidad de aplicar expresiones matemáticas a su marcado. Puede utilizar todos los operadores que suelen admitirse en los lenguajes de programación: suma, resta, división, multiplicación, módulo, igualdad y desigualdad.

Una cosa a tener en cuenta es que no se pueden mezclar unidades de valor. Entonces, mientras lo siguiente es válido:

$ altura del menú: 100% - 20%;

Lo siguiente no sería posible:

$ menu-height: 100% - 40px;

Algunos casos de uso común de Sass

Algunos casos de uso común de Sass

En una publicación anterior, cubrimos cómo configurar Sass y poder convertir sus archivos a CSS estándar. En esta publicación, cubriremos algunas de las técnicas más comunes para aprovechar al máximo Sass, haciendo que una variedad de reglas de estilo sea significativamente más fácil de escribir.

mezclas

Con diferentes niveles de compatibilidad del navegador para diferentes propiedades CSS, es común tener que proporcionar diferentes prefijos de proveedores a las propiedades, a fin de garantizar la compatibilidad entre navegadores (especialmente cuando es necesario el soporte para Internet Explorer):

pags {
  -webkit-transform: escala (2); 
      -ms-transform: escala (2);
          transformar: escala (2);
}

 

Esto puede ser una molestia tener que hacerlo repetidamente para cada propiedad con diferentes niveles de soporte. Usando un descaro Mixin puede simplificar el proceso siempre que tenga que repetir grandes secciones de código.

Usando el código para el transform propiedad anterior como ejemplo, podemos convertirlo fácilmente en un mixin reutilizable siempre que queramos utilizar un transform: scale() regla:

@mixin transform-scale ($ x) {
    -webkit-transform: escala ($ x);
        -ms-transform: escala ($ x);
            transformar: escala ($ x);
}

 

Con el mixin anterior, definimos la cantidad que queremos escalar cada transform con $x argumento. Este mixin se puede utilizar en cualquier bloque de código Sass, utilizando el @include declaración de antemano:

pags {
    @include transform-scale (2);
}

 

Para bucles

Similar a los lenguajes de programación como JavaScript, PHP o Python, Sass le permite crear un for bucle, para iterar sobre un número definido de veces. Definido usando el @for palabra clave, la longitud de los bucles de Sass for se puede indicar de dos formas diferentes: "xa y" o "xay", donde x es el punto de partida y y es el punto final. Al definir el bucle con through, el bucle será incluiyendo el valor final (por ejemplo, 1 through 10 incluiría 10 en el ciclo), mientras que usar to haría que el ciclo subiera pero sin incluir el valor final (es decir, 1 to 10 solo iría de 1 a 9). Como ejemplo de uso 1 through 10:

@for $ i del 1 al 10 {
    .col - # {$ i} {ancho: 100% / 10 * $ i; }
}

 

El @for bucle anterior aplicaría un width cálculo a 10 clases CSS diferentes (cada una comenzando con .col- seguido de un número entre 1 y 10). El ciclo establecería un ancho para cada clase CSS, definido por 100% / 10 multiplicado por el número de clases (1 a 10). Esto daría como resultado los siguientes conjuntos de reglas para cada una de las clases:

.col-1 {
    anchura: 10%;   
}
.col-2 {
    anchura: 20%;
}
.col-3 {
    anchura: 30%;
}
.col-4 {
    anchura: 40%;
}
 
...
 
.col-10 {
    anchura: 100%;
}

 

Esta es una forma rápida y sencilla de definir columnas en una estructura de cuadrícula básica.

Parciales

Cuando se trabaja con Sass, a menudo es una buena idea organizar su código en secciones o archivos reutilizables según el tipo de estilos que aplican (por ejemplo, tener un archivo para su diseño de cuadrícula, otro archivo para mixins, otro para esquemas de color, etc. .). Sass fomenta este flujo de trabajo modular mediante el uso de lo que se conoce como parciales. Un parcial sería cualquier archivo Sass que comience con un guión bajo (_), por ejemplo _grid.scss. Luego puede tener un directorio de todos sus parciales, luego un archivo Sass principal para importarlos, como main.scss.

Para importar estos parciales a su archivo principal, simplemente usaría un @import declaración en la parte superior del archivo:

// archivo main.scss
 
@importar 'cuadrícula'
@importar 'mixins'

 

Cuando trabaje con parciales, no es necesario que proporcione el guión bajo o la extensión del nombre de archivo. Sass los detectará automáticamente. Esto facilita el uso de parciales para organizar mejor su código.

 Cómo usar node-sass para compilar archivos Sass en un script npm

cómo compilar el popular preprocesador Sass en CSS normal

Si bien existen numerosas opciones para elegir cómo compilar el popular preprocesador Sass en CSS normal, un compilador que utiliza el motor LibSass se ha vuelto cada vez más común. Inicialmente escrito en Ruby, el uso de la gema Ruby original o un programa basado en Ruby como Compass para compilar Sass rápidamente se convirtió en el anfitrión de una variedad de críticas con respecto a su lento tiempo de compilación y velocidad general. En respuesta a las quejas de rendimiento, el motor Sass original se trasladó a C / C ++ como LibSass, con numerosos contenedores disponibles para ejecutar el motor Sass en casi todos los lenguajes de programación populares. Este tutorial presentará el lenguaje de programación Sass y también proporcionará una guía paso a paso. a usar el contenedor node-sass para compilar su código Sass, directamente como un script npm. Tenga en cuenta que node-sass está destinado a ser utilizado con .scss archivos en lugar de .sass, siendo la primera la opción más común y popular.

Acerca del preprocesador CSS de Sass

Hablar con descaro a, o hojas de estilo sintácticamente impresionantes, es un ejemplo de un preprocesador CSS, que permite desarrolladores web receptivos para crear código en un idioma y luego "traducirlo" a CSS. Con licencia del MIT, Sass cuenta con compatibilidad con CSS y un lenguaje de programación con muchas funciones, lo que lo convierte en una combinación perfecta de las características de una hoja de estilo y un programa de computadora. En este sentido, es una poderosa herramienta para desarrolladores de sitios web que estén familiarizados con la programación, aunque cualquiera puede aprender a operar Sass con suficiente práctica. Además, hay dos ligeras variaciones del lenguaje Sass, el Sassy CSS (abreviado como SCSS) y simplemente Sass. Si bien Sassy CSS es mucho más similar a CSS en términos de sintaxis, Sass es una mejor preferencia para desarrolladores de aplicaciones que están más preocupados por la conveniencia. La última opción omite los corchetes y los puntos y comas y, en su lugar, lee el código basado en sangrías.

Es importante tener en cuenta que la mayoría de los desarrolladores y las fuentes de documentación en línea utilizarán la sintaxis SCSS debido a su similitud con CSS. Además, debe tener en cuenta que los navegadores web no leen archivos Sass o SCSS. Por lo tanto, debe convertir todos los archivos SCSS / Sass a CSS antes de publicar su sitio web en Internet. Para obtener una explicación sobre cómo hacer esto, consulte "Conversión entre archivos SCSS a CSS" a continuación.

Configuración de Sass

Instalar Node.js y NPM

Si aún no tiene Node.js instalado, puede descargar la última versión en su sitio oficial. Si no está familiarizado con este término, Node.js es un entorno de ejecución popular para Javascript. Node viene empaquetado con npm, el administrador de paquetes oficial de Node que brinda a los desarrolladores acceso al código Javascript de código abierto, por lo que se instalará al mismo tiempo. (Si está interesado o necesita instalar npm por separado, puede hacerlo en el página web oficial para npm.) Para comprobar que npm se instaló correctamente, ejecute npm -v en su terminal para confirmar la versión de npm actualmente en su computadora. En el momento en que se actualizó esta publicación de blog, la última versión de npm publicada es 6.7.0.

Instalar node-sass

Una vez que haya instalado npm, es hora de instalar node-sass. Puedes hacerlo corriendo npm install -g node-sass en su terminal para instalar el paquete globalmente (es decir, disponible en todo su sistema), o ejecutar npm install node-sass sin el -g marca para instalar solo en su directorio actual.

Configuración del proyecto con package.json

Asumiendo node-sass ahora está instalado globalmente, es hora de hacer o elegir un directorio de proyecto donde queremos ver nuestros archivos Sass. Navegue hasta el directorio de su proyecto e inicialice el proyecto con un package.json archivo, ejecutando npm init.

Configuración de Sass

Se le pedirá que ingrese una variedad de detalles sobre el proyecto, como package name, version, description y otros detalles. Puede completar esta información ahora o simplemente presionar Enter para cada uno de estos mensajes y complételo más tarde.

Instalar Node.js y NPM

Después de recorrer cada una de las indicaciones, aparecerá una indicación para confirmar la información ingresada (o la información dejada en blanco). Presione enter una vez más y el package.json Se creará el archivo.

Instalar node-sass

Agregue la node-sass guión

Abra la package.json archivo en el editor de texto de su elección, y agregue la siguiente línea dentro del "scripts" :

"scss": "node-sass --watch assets/scss -o assets/css"

La línea de arriba dice npm para ejecutar un script, observando cambios en cualquier .scss archivos en el assets/scss directorio y enviar esos cambios a los archivos CSS correspondientes en un assets/css directorio. Debe cambiar las rutas de sus directorios en consecuencia.

Tu editado package.json El archivo debería verse así:

{
  "nombre": "sass-ex",
  "versión": "1.0.0",
  "Descripción": "",
  "principal": "index.js",
  "guiones": {
    "prueba": "echo \" Error: no se especificó ninguna prueba \ "&& exit 1",
    "scss": "nodo-sass" --reloj activos/SCSS -o activos/css"
  },
  "autor": "",
  "licencia": "VAMOS"
}

 

Guarde el archivo y ciérrelo. Ahora en la raíz del directorio del proyecto, ejecute npm run scss para comenzar a observar cualquier cambio en su .scss archivos.

Formas alternativas de instalar Sass

Es importante tener en cuenta que existen varios métodos alternativos para instalar Sass. Por ejemplo, puede instalar Sass a través de aplicaciones de pago y gratuitas como Kit de código y Aplicación Scout. Además, también puede instalar Sass descargando el paquete desde el sitio oficial de Github y agregarlo directamente a su ruta.

Descripción general de diseñar con Sass

Como se mencionó anteriormente, Sass viene con muchas características beneficiosas que lo convierten en una herramienta poderosa para los desarrolladores de sitios web. Sass adoptó estos rasgos del lenguaje de programación básico, algunos de los cuales esta publicación de blog discutirá a continuación. Para obtener una guía más completa de estas características y cómo implementarlas en su código, visite la guía oficial en el Sitio web de Sass.

Variables

Al igual que en la programación, puede crear e implementar variables en Sass en toda su hoja de estilo. Esto es extremadamente conveniente porque si hay un cierto estilo que desea usar en su sitio web (por ejemplo, un tipo de paquete de fuente, color, etc.), simplemente puede almacenarlo en una variable y usarlo en toda su hoja de estilo. Declarar una variable en Sass es especialmente sencillo para los programadores porque es conceptualmente idéntico a Javascript. Por ejemplo, si declaras $primary-color: #525; ($ variable: value;) al comienzo de su hoja de estilo, entonces puede simplemente ingresar $primary-color para cualquier valor de color.

Nesting

HTML y los lenguajes de programación más populares mantienen una estructura limpia con el uso de sangrías o anidamientos. Por otro lado, una hoja de estilo CSS tradicional es más bien una lista larga y desordenada de varios estilos. Pero con Sass, puede mejorar la legibilidad de sus hojas de estilo colocando diferentes bloques de código dentro de otro código. Por ejemplo, dentro del estilo de una barra de navegación tradicional, puede anidar el código para diseñar la ubicación de los elementos de la lista y el estilo del texto. Esta jerarquía visual de código a través del anidamiento es otra razón por la que muchos desarrolladores gravitarán hacia el uso de Sass en sus sitios web.

Importación de archivos SASS

A medida que sus sitios web y los documentos HTML se vuelven más complejos, esto generalmente resultará en un crecimiento paralelo de sus archivos CSS. Sin embargo, crear más estilos eventualmente saturará sus hojas de estilo, lo que dificultará el mantenimiento y la escritura de manera ordenada. Afortunadamente, al usar Sass, puede dividir sus hojas de estilo en varios archivos Sass. Cuando esté listo para lanzar su sitio web, puede combinar los múltiples archivos SCSS en una hoja de estilo maestra y luego vincular esto a su documento HTML a través de la función de importación. A diferencia de CSS, solo requerirá una solicitud HTTP para cargar la única hoja de estilo "maestra" de Sass; en CSS, el cliente realiza una solicitud HTTP para cada hoja de estilo importada. Para importar una hoja de estilo, simplemente escriba la palabra clave @import seguido del nombre de la hoja de estilo secundario entre comillas (@import "Hoja de estilo";). Esta es otra característica clave de Sass que simplifica el proceso de administración de un sitio web.

Usando Mixins

La mayoría de las personas con experiencia en programación están familiarizadas con la escritura de funciones o métodos en sus programas; sin embargo, los archivos CSS tradicionales no admiten esta función. Afortunadamente, Sass permite a los desarrolladores escribir mixins o un grupo de declaraciones CSS que se agrupan y se pueden usar repetidamente en cualquier lugar de su hoja de estilo. Un mixin es esencialmente el equivalente a una función; puede aceptar un valor de entrada y conectarlo a las declaraciones CSS agrupadas dentro del mixin. Para crear un mixin, simplemente escriba @mixin mixinName(value) seguido de las declaraciones CSS que utilizan el valor introducido. Para invocar este mixin en su hoja de estilo, escriba la palabra clave @include seguido del nombre y el valor del mixin (si corresponde). Sin duda, Mixins en Sass allana el camino para un diseño de sitios web potente y eficiente al crear un código menos repetitivo.

Sass permite a los desarrolladores escribir mixins o un grupo de declaraciones CSS

Uso de herencias y otras directivas

Otra característica de programación poderosa que puede implementar a través del desarrollo de sitios web con Sass es la herencia. Puede referirse a esto como selectores "extendidos" en Sass. Con el uso de @extend, los selectores pueden heredar las propiedades CSS de otros selectores, simplificando enormemente su código al eliminar la necesidad de código repetitivo. Esto crea más flexibilidad en su hoja de estilo al "activar" un selector con la palabra clave @extend. Para utilizar esta función, simplemente cree un selector con el % símbolo delante para indicar que las propiedades CSS en este selector se pueden ampliar. Ahora, cuando esté creando otro selector, puede llamar @extend %selectorName; y sus propiedades serán heredadas por ese nuevo selector.

Aunque se cree que @extend La función es tremendamente popular entre los defensores de Sass, hay muchas funciones básicas de programación que se han integrado en el lenguaje Sass. Por ejemplo, la mayoría de los programadores están familiarizados con el uso de declaraciones condicionales. Ahora, los desarrolladores de Sass pueden usar @if y @else directivas que conducirán a un desarrollo de sitios web mucho más potente. De manera similar, aquellos que estén familiarizados con los bucles for y while tradicionales pueden replicar estas funciones de Java con el @for y @while directivas

Usando operadores

Los programadores utilizan algoritmos impulsados ​​matemáticamente todo el tiempo. Por otro lado, prácticamente no hay uso de las matemáticas involucradas en el diseño CSS tradicional. Afortunadamente, Sass permite a los desarrolladores usar operadores básicos (+, -, *, /,%) para calcular valores de píxeles o porcentajes en declaraciones CSS. Es una herramienta pequeña pero muy práctica para diseñadores que deseen crear sitios web más complejos. Según la documentación oficial de Sass, también hay una biblioteca de funciones basadas en matemáticas que los desarrolladores de Sass pueden usar. En realidad, la mayoría de los programadores probablemente estén familiarizados con muchas de estas funciones en la biblioteca. Incluye funciones como abs($number) para encontrar el valor absoluto, min($numbers…) para encontrar el menor de varios valores, y random() para devolver un valor numérico aleatorio. Para ver todas las funciones disponibles en Sass, visite el sitio de documentación oficial para Sass.

Conversión de archivos SCSS a CSS

Una vez que haya terminado de diseñar sus elementos HTML con Sass, es hora de publicar finalmente su sitio web. Sin embargo, no puede utilizar directamente los archivos SCSS al cargar su sitio web. En su lugar, debe convertir sus archivos a CSS. Con la gema Sass, que se puede instalar a través de la línea de comandos, hay una variedad de ejecutables disponibles. Si no tiene instalada la gema Sass, también puede ejecutar los ejecutables Sass con otra fuente.

  • sass or $ bundle exec sass: Se utiliza para convertir un archivo Sass de origen en un archivo CSS. correr sass --help para obtener más instrucciones.
  • sass-convert or $ bundle exec sass-convert: Se utiliza para convertir entre archivos Sass, SCSS y CSS. correr sass-convert --help para obtener más instrucciones. Este es un ejecutable perfecto para proyectos existentes que le gustaría cambiar al formato SCSS.

Conversión de archivos SCSS a CSS

Otros preprocesadores CSS

Aguja

Stylus es otra alternativa muy popular para un preprocesador CSSSiguiendo el modelo de Sass, Stylus es otra alternativa muy popular para un preprocesador CSS. Una característica particularmente útil que atrae a muchos usuarios hacia Stylus es su lenguaje y sintaxis altamente dinámicos y flexibles. Los usuarios tienen la opción de omitir signos de puntuación como llaves, dos puntos y punto y coma. Incluso pueden omitir ciertas palabras clave (por ejemplo, @mixin) si lo prefieren. Similar a Sass, Stylus integra muchas características de programación poderosas como funciones / mixins, variables, iteración y herencia. Una característica particularmente útil en Stylus es el literal CSS, indicado por @css. Esta palabra clave se puede utilizar para volver al tipo CSS si Stylus no puede atender una solicitud.

Menos

Less, que significa Leaner Stylesheets, es otro preprocesador de CSSLess, que significa Leaner Stylesheets, es otra opción de preprocesador de CSS muy similar a sus alternativas. Ofrece muchas funciones de programación integradas. Esto incluye crear variables, usar mixins, anidar su código y utilizar una biblioteca de funciones integradas. A diferencia de Stylus, Less es más estricto en su sintaxis. De hecho, prácticamente replica la sintaxis del código CSS tradicional. Según sus preferencias personales, puede ver esto como una ventaja o una desventaja.

 

SASS versus MENOS

SASS versus MENOS Necesitamos repasar algunos conceptos básicos para comprender qué son SASS y LESS. Así que comencemos discutiendo el preprocesador de CSS. Un preproceso de CSS es un lenguaje de secuencias de comandos que los programadores utilizan para extender CSS cuando escriben código en un idioma. El preprocesador de CSS luego lo compila en CSS. SASS es el ejemplo más popular de esto. CO preprocesador, mientras que otros como LESS y Stylus son menos conocidos.

¿Qué es SASS?

SASS son las siglas de Syntheically Awesome Style Sheets que permite a los usuarios agregar varias cosas como variables, importaciones en línea, reglas anidadas, etc. a su código. SASS también ayuda a los usuarios a mantener las cosas organizadas a través del proceso de codificación, lo que facilita el manejo de estas hojas. SASS trabaja con todas las versiones de CSS pero los propietarios necesitan tener Ruby instalado en su sistema para ello.

SCSS

De manera similar, SCSS es un tipo de archivo especial en Ruby que ensambla hojas de estilo CSS para un navegador. Entonces, puede decir que SCSS es como CSS pero con un mejor formato para la codificación.

¿Qué es MENOS?

LESS son las siglas de Learner Style Sheets y es una extensión de lenguaje compatible con versiones anteriores que la gente usa en CSS. Es bastante fácil de aprender MENOS porque se parece a CSS. Puede usar LESS para anidar reglas dentro de reglas debido a que las reglas se aplican dentro del selector de reglas externas.

Esto permite a los desarrolladores y diseñadores agregar sus propias reglas CSS de acuerdo con la estructura DOM en un documento. Estas reglas anidadas facilitan la comprensión y el seguimiento al ejecutar un código.

MENOS o SAAS: ¿Qué debo usar?

Es bastante difícil entender si LESS es mejor que SAAS o viceversa, pero podemos comparar sus características para tener una idea más clara de cuál de los usuarios deben optar. Hagamos un análisis comparativo de SASS y LESS para tener una mejor idea de cuál es mejor.

SASS y LESS utilizan funciones y combinaciones similares. Sin embargo, SASS usa Ruby como lenguaje base. Por otro lado, MENOS utiliza JavaScript para codificar. La diferencia en el lenguaje de codificación todavía no le da una ventaja a ninguno de estos lenguajes.

MENOS permite a los usuarios usar los Mixins solo bajo ciertas condiciones. Si bien esto suena como una característica útil, también explica el límite de enlace lógico en MENOS. SASS, proporciona un enfoque diferente. Por ejemplo, SASS permite a los usuarios utilizar bucles y distinciones orientadas a mayúsculas y minúsculas durante la programación.

SASS brinda a los usuarios la libertad de usar SCSS o una sintaxis con sangría, lo que les da la libertad de cumplir con las reglas CSS o desviarse de ellas. Sin embargo, el código en LESS es automáticamente un superconjunto de CSS. SASS es más popular entre la comunidad de desarrolladores, pero no solo por su función, sino porque es un lenguaje más antiguo.

¿Qué es mejor SASS o SCSS o MENOS?

Echemos un vistazo a las características individuales de SASS, SCSS y LESS, para ver cuáles de estas extensiones CSS son mejores para los desarrolladores.

SASS

  • SASS ayuda a reducir la repetición en CSS para ahorrar tiempo y es una extensión de CSS. Es un superconjunto de CSS que está codificado en el lenguaje Ruby.
  • SASS tiene su sintaxis y la compila en CSS de forma legible
  • SASS puede informar errores en la sintaxis
  • Permite a los usuarios crear sus funciones y utilizarlas en el contexto del usuario.
  • SASS usa la mezcla para crear estilos que puede usar y reutilizar
  • SASS se enfoca más en la base de conocimiento, por lo tanto, no tiene elementos visuales.

MENOS

  • LESS ayuda a los usuarios a mantener, personalizar, administrar y manejar hojas de estilo para sitios web. Es un lenguaje dinámico y funciona en varios navegadores.
  • Desarrollado en JavaScript, lo que lo convierte en un superconjunto de CSS utilizado para reducir la redundancia
  • Explica los errores precisos, así como la ubicación de los errores.
  • Ayuda a manipular valores a través de JavaScript, que puede cambiar colores, funciones redondas, funciones de techo, etc.
  • LESS también usa Mixens.
  • LESS proporciona documentaciones con imágenes atractivas con pasos fáciles de seguir.

SCSS

  • SCSS es un tipo especial de archivo para SASS que permite una funcionalidad adicional en CSS.
  • SCSS no requiere un código de sintaxis
  • SCSS no necesita seguir sangrías estrictas, a diferencia de SASSS
  • SCSS se parece a SASS en estilos de escritura, pero es necesario el uso de corchetes y punto y coma
  • Tiene una extensión de archivo
  • SCSS tiene una comunidad de desarrolladores más pequeña en comparación con SASS, por lo que el soporte con SCSS también es menor.

¿Bootstrap usa SASS O MENOS?

¿Bootstrap usa SASS O MENOS? Bootstrap es una opción popular para la comunidad de desarrollo a nivel mundial, y dado que LESS fue una gran influencia en el mercado durante Boostrap 3, ofreció una alternativa SASS. Sin embargo, las cosas cambian por completo cuando se considera Boostrap 4. Es porque Boostrap 4 usa SASS por completo. Esta es la primera vez que el código fuente de Boostrap usa SAAS.

Por lo tanto, es seguro decir que SASS es una consideración más segura para el futuro. Los expertos creen que Boostrap hizo este movimiento audaz porque la cantidad de usuarios de SASS es casi el doble en comparación con los usuarios de MENOS.

¿Por qué más desarrolladores utilizan LESS y SASS en lugar de CSS?

Reciente las tendencias del mercado revelan que ahora más desarrolladores están usando LESS y SASS en lugar de CSS por varias razones. Por ejemplo, cualquier proyecto que comienza, requiere solo unas pocas reglas de CSS, pero luego las reglas se complican a medida que avanza el proyecto. Esto hace que CSS sea difícil de aprender y adaptarse para proyectos más avanzados. Por lo tanto, a la gente le gusta optar por opciones como LESS y SASS que tienen funciones listas para producción disponibles.

De manera similar, el desarrollo a través de CSS requiere mucho tiempo y aumenta el tiempo promedio requerido para completar una tarea. Otros lenguajes como JavaScript celebran conferencias periódicas para comunicar los avances, pero no existe tal cosa en CSS. Todas estas cosas hacen que LESS y SASS sean una alternativa mucho mejor que CSS.

Dicho esto, está claro que tanto SASS como LESS desempeñan un papel fundamental en el mundo del desarrollo. SASS sigue siendo popular a pesar de llegar a la industria antes que LESS. Ambas extensiones tienen sus méritos y deméritos y todo depende de cómo los usuarios las utilicen.

Conclusión

Con todo, Sass es una gran herramienta para desarrolladores de sitios web que buscan mejorar su diseño web con funciones básicas de programación. La instalación no solo es sencilla, sino que el lenguaje y la sintaxis de Sass se aprenden rápidamente.

Las diversas funciones de programación, como mixins y variables, y la jerarquía visual de Sass crean hojas de estilo más eficientes y fáciles de mantener.

Espero que este artículo le sirva de guía a medida que experimenta con las tecnologías de vanguardia descritas anteriormente.

angelo frisina

Biografía del autor

Angelo ha estado involucrado en el mundo creativo de TI durante más de 20 años. Construyó su primer sitio web en 1998 utilizando Dreamweaver, Flash y Photoshop. Amplió sus conocimientos y experiencia al aprender una gama más amplia de habilidades de programación, como HTML / CSS, Flash ActionScript y XML.

Angelo completó una capacitación formal con el programa CIW (Certified Internet Webmasters) en Sydney, Australia, y aprendió los fundamentos básicos de las redes de computadoras y cómo se relaciona con la infraestructura de la red mundial.

Además de ejecutar Sunlight Media, Angelo disfruta escribiendo contenido informativo relacionado con el desarrollo web y de aplicaciones, el marketing digital y otros temas relacionados con la tecnología.

3 Comentarios

  • Garret Corwin Febrero 15, 2019 3 en: 08 pm

    He hecho esto y muchas variedades de esto sin suerte. La terminal siempre arroja el mismo error: falta el script: scss. Tengo la sensación de que es porque estoy usando node-sass 4.11.0 y ha habido cambios desde que salieron la mayoría de estas guías. ¿Alguna idea? Gracias

    • Jordania Abril 15, 2019 2 en: 39 pm

      Esto se debe a que hay un error tipográfico al configurar el script. No debe haber comillas después de node-sass. Entonces, en lugar de “scss”: “node-sass” –watch assets / scss -o assets / css ”, la línea debería leer
      “Scss”: “node-sass –watch assets / scss -o assets / css”

Publicar un comentario

Los comentarios están moderados. Su correo electrónico se mantiene privado. Los campos obligatorios están marcados *