Articles

Diferencia entre .sass and .scss

by admin

Cuando comencé por el camino de los preprocesadores CSS, me abrumaron las diferentes opciones (sass, less, stylus), las diferencias en la sintaxis y, sobre todo, no tenía idea de cómo se suponía que debía comenzar con este nuevo enfoque para escribir CSS.

Si usted es un usuario frecuente de CodePen.io notarás que hay algunas opciones cuando se trata del sabor de CSS que puedes elegir.

  • SASS con Brújula
  • SECS con Brújula
  • MENOS
  • Regular ol’ CSS

no se deje confundir por el DESCARO y SECS opciones, aunque yo estaba inicialmente .scss es CSS descarado y es la próxima generación de .sass. Una explicación desde el sitio web

Sass tiene dos sintaxis. La sintaxis más utilizada se conoce como» SCSS «(para» CSS descarado»), y es un superconjunto de la sintaxis de CSS3. Esto significa que todas las hojas de estilo CSS3 válidas también son SCSS válidas. Los archivos SCSS usan la extensión .scss.

La segunda sintaxis más antigua se conoce como sintaxis con sangría (o simplemente «.sass»). Inspirado en la tersura de Haml, está pensado para personas que prefieren la concisión a la similitud con CSS. En lugar de corchetes y punto y coma, utiliza la sangría de líneas para especificar bloques. Los archivos de la sintaxis con sangría usan la extensión .sass.

Explicación de SASS vs SCSS en el sass-lang.com sitio web

Si eso no tiene sentido, puede ver la diferencia en el código a continuación.

/* SCSS */$blue: #3bbfce;$margin: 16px;.content-navigation { border-color: $blue; color: darken($blue, 9%);}.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}

En el código anterior, podemos usar ; para separar las declaraciones. Incluso he agregado todas las declaraciones de .border en una sola línea para ilustrar este punto más.

Por el contrario, el código SASS de abajo debe estar en líneas diferentes con sangría y no hay uso de ;.

/* SASS */$blue: #3bbfce$margin: 16px.content-navigation border-color: $blue color: darken($blue, 9%).border padding: $margin / 2 margin: $margin / 2 border-color: $blue

Puede ver en el CSS a continuación que el estilo SCSS es mucho más similar al CSS normal que el antiguo enfoque SASS.

/* CSS */.content-navigation { border-color: #3bbfce; color: #2b9eab;}.border { padding: 8px; margin: 8px; border-color: #3bbfce;}

Creo que la mayoría de las veces en estos días, si alguien menciona que está trabajando con Sass, se está refiriendo a la creación .scss en lugar de lo tradicional .sass manera.

Es posible que también quieras ver algunos @mixins útiles que te ayudarán con tu compilación responsiva.