scss que mejor entre diferencia compile css sass

que - ¿Cuál es la diferencia entre SCSS y Sass?



sass scss difference (12)

Por lo que he estado leyendo, Sass es un lenguaje que hace que el CSS sea más poderoso con el soporte de variables y matemáticas.

¿Cuál es la diferencia con SCSS? ¿Se supone que es el mismo idioma? ¿Similar? ¿Diferente?

SASS significa hojas de estilo sintácticamente impresionantes. Es una extensión de CSS que agrega poder y elegancia al lenguaje básico. SASS se nombró recientemente como SCSS con algunos chages, pero el antiguo SASS también está ahí. Antes de usar SCSS o SASS, vea la diferencia a continuación.

Ejemplo de alguna sintaxis SCSS y SASS

SCSS

$font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; } //Mixins @mixin transform($property) { -webkit-transform: $property; -ms-transform: $property; transform: $property; } .box { @include transform(rotate(30deg)); }

HABLAR CON DESCARO A

$font-stack: Helvetica, sans-serif $primary-color: #333 body font: 100% $font-stack color: $primary-color //Mixins =transform($property) -webkit-transform: $property -ms-transform: $property transform: $property .box +transform(rotate(30deg))

CSS de salida después de la compilación (igual para ambos)

body { font: 100% Helvetica, sans-serif; color: #333; } //Mixins .box { -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg); }

Para más información consulte el sitio website oficial.

Desde la página de inicio del idioma.

Sass tiene dos sintaxis. La nueva sintaxis principal (a partir de Sass 3) se conoce como "SCSS" (para "Sassy CSS") , y es un superconjunto de la sintaxis de CSS3. Esto significa que cada hoja de estilo CSS3 válida también es válida SCSS. Los archivos SCSS usan la extensión .scss.

La segunda sintaxis más antigua se conoce como la sintaxis con sangría (o simplemente "Sass"). Inspirado por la terseness de Haml, está dirigido a personas que prefieren la concisión en lugar de la similitud con CSS. En lugar de paréntesis y punto y coma, utiliza la sangría de las líneas para especificar bloques. Aunque ya no es la sintaxis principal, la sintaxis con sangría seguirá siendo compatible. Los archivos en la sintaxis con sangría usan la extensión .sass.

SASS es un lenguaje interpretado que escupe CSS. La estructura de Sass se parece a CSS (de forma remota), pero me parece que la descripción es un poco engañosa; no es un reemplazo para CSS, o una extensión. Es un intérprete que escupe CSS al final, por lo que Sass aún tiene las limitaciones de CSS normal, pero los enmascara con un código simple.

El archivo Sass .sass es visualmente diferente del archivo .scss , por ejemplo,

Example.sass - sass es la sintaxis más antigua

$color: red =my-border($color) border: 1px solid $color body background: $color +my-border(green)

Example.scss - sassy css es la nueva sintaxis de Sass 3

$color: red; @mixin my-border($color) { border: 1px solid $color; } body { background: $color; @include my-border(green); }

Cualquier documento CSS válido se puede convertir a Sassy CSS (SCSS) simplemente cambiando la extensión de .scss a .scss .

La diferencia básica es la sintaxis. Si bien SASS tiene una sintaxis suelta con espacios en blanco y sin punto y coma, el SCSS se parece más a CSS.

Respuesta compacta:

SCSS se refiere a la sintaxis principal admitida por el preprocesador Sass CSS .

  • Los archivos que terminan con .scss representan la sintaxis estándar admitida por Sass. SCSS es un superconjunto de CSS.
  • Los archivos que terminan con .sass representan la sintaxis "más antigua" admitida por Sass que se origina en el mundo ruby.

Sass es un preprocesador CSS con avances de sintaxis. El programa procesa las hojas de estilo en la sintaxis avanzada y las convierte en hojas de estilo CSS normales. Sin embargo, no extienden el estándar CSS en sí.

La razón principal de esto es la adición de características de las que CSS carece dolorosamente (como variables).

La diferencia entre SCSS y Sass, este texto en la página de documentación de Sass debe responder a la pregunta:

Hay dos sintaxis disponibles para Sass. El primero, conocido como SCSS (Sassy CSS) y utilizado a lo largo de esta referencia, es una extensión de la sintaxis de CSS. Esto significa que cada hoja de estilo CSS válida es un archivo SCSS válido con el mismo significado. Esta sintaxis se ha mejorado con las características de Sass que se describen a continuación. Los archivos que utilizan esta sintaxis tienen la extensión .scss .

La segunda y más antigua sintaxis , conocida como la sintaxis con sangría (o a veces simplemente "Sass"), proporciona una forma más concisa de escribir CSS. Utiliza la sangría en lugar de los corchetes para indicar el anidamiento de los selectores y las nuevas líneas en lugar de puntos y coma para separar las propiedades. Los archivos que utilizan esta sintaxis tienen la extensión .sass .

Sin embargo, todo esto funciona solo con el precompilador Sass, que al final crea CSS. No es una extensión del estándar CSS en sí.

Sass fue el primero, y la sintaxis es un poco diferente. Por ejemplo, incluyendo un mixin:

Sass: +mixinname() Scss: @include mixinname()

Sass ignora los rizos y los semiconos y los coloca en el nido, lo que me parece más útil.

Soy uno de los desarrolladores que ayudaron a crear Sass.

La diferencia es la interfaz de usuario. Debajo del exterior textual son idénticos. Es por esto que los archivos sass y scss pueden importarse entre ellos. En realidad, Sass tiene cuatro analizadores de sintaxis: scss, sass, CSS y menos. Todos estos convierten una sintaxis diferente en un árbol de sintaxis abstracta que se procesa en la salida de CSS o incluso en uno de los otros formatos a través de la herramienta sass-convert.

Use la sintaxis que más le guste, ambas son totalmente compatibles y puede cambiar entre ellas más adelante si cambia de opinión.

Su sintaxis es diferente, y ese es el principal pro (o en contra, dependiendo de su perspectiva).

Trataré de no repetir mucho de lo que otros dijeron, puedes buscarlo fácilmente en Google, pero en cambio, me gustaría decir un par de cosas de mi experiencia usando ambas, a veces incluso en el mismo proyecto.

SASS pro

  • más limpio: si viene de Python, Ruby (incluso puede escribir apoyos con una sintaxis similar a un símbolo) o incluso del mundo de CoffeeScript, le resultará muy natural: escribir mixins, funciones y generalmente cualquier cosa reutilizable en .sass es mucho ''Más fácil'' y legible que en .scss (subjetivo).

Contras de SASS

  • sensible al espacio en blanco (subjetivo), no me importa en otros idiomas, pero aquí en CSS simplemente me molesta (problemas: copiar, tab contra guerra espacial, etc.).
  • no hay reglas en línea (esto fue una ruptura de juego para mí), no puedes hacer body color: red como puedes en .scss body {color: red}
  • importar material de otros proveedores, copiar fragmentos de código de vainilla CSS - no imposible pero muy aburrido después de un tiempo. La solución es tener archivos .scss (junto con archivos .sass ) en su proyecto o convertirlos a .sass .

Aparte de esto, hacen el mismo trabajo.

Ahora, lo que me gusta es escribir mixins y variables en .sass y el código que realmente compilará en CSS en .scss si es posible (es decir, Visual Studio no tiene soporte para .sass pero cuando trabajo en proyectos de Rails, por lo general combina dos de ellos, no en un solo archivo ofc).

Últimamente, estoy considerando darle una oportunidad a Stylus (para un preprocesador de CSS de tiempo completo) porque le permite combinar dos sintaxis en un archivo (entre otras características). Puede que esa no sea una buena dirección para un equipo, pero cuando la mantienes sola, está bien. El lápiz óptico es en realidad más flexible cuando se trata de la sintaxis.

Y finalmente mixin para comparación de sintaxis .scss vs .sass :

// SCSS @mixin cover { $color: red; @for $i from 1 through 5 { &.bg-cover#{$i} { background-color: adjust-hue($color, 15deg * $i) } } } .wrapper { @include cover } // SASS =cover $color: red @for $i from 1 through 5 &.bg-cover#{$i} background-color: adjust-hue($color, 15deg * $i) .wrapper +cover

La diferencia entre SASS y SCSS explica la diferencia en los detalles. No se deje confundir por las opciones de SASS y SCSS, aunque inicialmente también fui .scss es Sassy CSS y es la próxima generación de .sass.

Si eso no tiene sentido, puedes 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 utilizamos; para separar las declaraciones. Incluso he agregado todas las declaraciones para .border en una sola línea para ilustrar este punto aún más. En contraste, el código SASS a continuación debe estar en diferentes líneas con sangría y no hay uso del;.

/* 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 enfoque SASS anterior.

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

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

sass original es similar a la sintaxis ruby, similar a ruby, jade, etc.

En esas sintaxis, no usamos {} , en lugar de eso, vamos con espacios en blanco, también sin uso de ; ...

En scss sintaxis son más como CSS , pero con más opciones como: anidar, declarar, etc., similar a less y otros CSS preprocesamiento ...

Básicamente hacen lo mismo, pero puse un par de líneas de cada una para ver la diferencia de sintaxis, mira la {} ; , y spaces :

HABLAR CON DESCARO A:

$width: 100px $color: green div width: $width background-color: $color

SCSS:

$width: 100px; $color: green; div { width: $width; background-color: $color; }

Sass ( Synthactically Awesome StyleSheets ) tiene dos sintaxis:

  • un nuevo: SCSS ( Sassy CSS )
  • y una sintaxis más antigua, original: sangría, que es el Sass original y también se llama Sass .

Así que ambos forman parte del preprocesador Sass con dos sintaxis posibles diferentes.

Las diferencias más importantes entre SCSS y Sass original:

SCSS :

  • Su sintaxis es similar a la de CSS .
  • Use llaves {} .
  • Use punto y coma ; .
  • El signo variable en SCSS es $ .
  • Un signo de asignación en SCSS es :
  • Los archivos que utilizan esta sintaxis tienen la extensión .scss .

Sass original :

  • Su sintaxis es similar a la de Ruby .
  • Aquí no hay usos de llaves.
  • Sin sangría estricta.
  • No hay punto y coma.
  • Signo variable en Sass es ! en lugar de $ .
  • El signo de asignación en Sass es = lugar de :
  • Los archivos que utilizan esta sintaxis tienen la extensión .sass .

Estas son dos sintaxis disponibles para Sass .

Algunos prefieren Sass , la sintaxis original, mientras que otros prefieren SCSS . De cualquier manera, pero vale la pena señalar que la sintaxis con sangría de Sass no ha sido y nunca será obsoleta .

Conversiones con sass-convert :

# Convert Sass to SCSS $ sass-convert style.sass style.scss # Convert SCSS to Sass $ sass-convert style.scss style.sass

SASS REFERENCIA