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

1904

Por lo que he estado leyendo, Sass es un lenguaje que hace que CSS sea más poderoso con soporte variable y matemático.

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

bruno077
fuente

Respuestas:

1867

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

Las variables CSS son compatibles y pueden utilizarse, pero no tan bien como las variables de preprocesador.

Por la diferencia entre SCSS y Sass, este texto en la página de documentación de Sass debería responder 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 mejora con las características de Sass que se describen a continuación. Los archivos que usan esta sintaxis tienen la extensión .scss .

La segunda y más antigua sintaxis , conocida como sintaxis con sangría (o, a veces, simplemente "Sass"), proporciona una forma más concisa de escribir CSS. Utiliza sangría en lugar de corchetes para indicar el anidamiento de selectores y líneas nuevas en lugar de punto y coma para separar las propiedades. Los archivos que usan 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í mismo.

ruffin
fuente
229
Al elegir la sintaxis, tenga en cuenta que solo scss permite copiar y pegar css desde stackoverflow y las herramientas de desarrollo de los navegadores, mientras que en sass siempre debe ajustar la sintaxis
fishbone
Otro problema: a partir del 10/05/2019, SASS todavía no admite expresiones de varias líneas, por lo que las listas / mapas grandes deben ser de una sola línea, definidas usando muchas llamadas a funciones o definidas en archivos SCSS. Parece que todavía es una característica planificada, pero no estoy seguro de si hay algún movimiento en la implementación o no todavía.
Joseph Sikorski,
12
@ 0x1ad2 La elección entre scssy sasses más que solo preferencia personal en estos días. scsses mucho más frecuente - utilizado en la mayoría de los marcos de CSS populares como Bootstrap, Foundation, Materializeetc. Los principales marcos de interfaz de usuario favorecen scssmás sasspor defecto - angular, Reaccionar, Vue. Cualquier tutorial o demostración generalmente usará, scsspor ejemplo, create-react-app facebook.github.io/create-react-app/docs/…
Drenai
@fishbone no es del todo cierto, si usa un editor de código decente, puede manejar estilos copiados de los navegadores y reescribirse en sangría
Miro Krsjak
617

Soy uno de los desarrolladores que ayudó a crear Sass.

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

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.

chriseppstein
fuente
55
¿Disculpe? ¿Lo leí bien? ¿Puede Sass realmente importar menos archivos correctamente? ¿Hay alguna sinergia entre mixins / variables?
pilau
8
La similitud con CSS estándar puede ser más importante en entornos grupales donde hay personas que necesitan leer su código, pero solo ocasionalmente, y no tienen tiempo / interés para aprender una sintaxis completamente nueva.
c roald
55
¿La "IU" significa el "idioma"?
djechlin
@djechlin: sí, mi interpretación de "UI" aquí sería la sintaxis del archivo orientada al programador. Por ejemplo, punto y coma o no, etc.
orion elenzil
10
¿Debería reemplazarse "UI" en la respuesta con un término más comúnmente comprendido, como sugirió @orionelenzil?
Michael Freidgeim
383

El .sassarchivo Sass es visualmente diferente del .scssarchivo, p. Ej.

Example.sass - sass es la sintaxis anterior

$color: red

=my-border($color)
  border: 1px solid $color

body
  background: $color
  +my-border(green)

Example.scss - sassy css es la nueva sintaxis a partir 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 .cssa .scss.

Anthuan Vásquez
fuente
@Novocaine +1, estoy de acuerdo. Como programador de C ++, prefiero los corchetes y los puntos y comas. Por cierto, tengo una pregunta, ¿la conversión de .scssa .csslo mismo que .cssa .scss?
JW.ZG
1
Esto es más de lo que me importa en comparación con las respuestas anteriores ... Demasiado perezoso para leer ;-)
LYu
99
@ JW.ZG, no es una conversión, el nativo .csssimplemente es válido .scss. Tan pronto como agregue un código específico de scss, cambiar el nombre del archivo nuevamente terminará como un archivo css no válido. csses un cuadrado y scsses un rectángulo. Todos los cuadrados son rectángulos, pero no todos los rectángulos son cuadrados.
Grant
145

Sass ( Syntactically Awesome StyleSheets ) tiene dos sintaxis:

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

Por lo tanto, ambos forman parte del preprocesador Sass con dos posibles sintaxis diferentes.

La diferencia más importante entre SCSS y Sass original :

SCSS :

  • La sintaxis es similar a CSS (tanto que cada CSS3 válido normal también es SCSS válido , pero la relación en la otra dirección obviamente no ocurre)

  • Utiliza llaves {}

  • Usa punto y coma ;
  • El signo de asignación es :
  • Para crear un mixin , usa la @mixindirectiva
  • Para usar mixin lo precede con la @includedirectiva
  • Los archivos tienen la extensión .scss .

Sass original :

  • La sintaxis es similar a Ruby
  • Sin llaves
  • Sin sangrado estricto
  • Sin punto y coma
  • El signo de asignación es en =lugar de:
  • Para crear un mixin utiliza el = signo
  • Para usar mixin lo precede con el +signo
  • Los archivos tienen la extensión .sass .

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

Conversiones con sass-convert :

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

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

La documentación de Sass y SCSS

simhumileco
fuente
14
Es extraño que una respuesta tan clara y concisa tenga menos votos que otros. He estado revisando montones de fuentes para comprender cuáles son las diferencias entre Sass y Scss y finalmente encontré esto que instantáneamente me iluminó. Buen trabajo, excepto algunos errores de ortografía / gramática.
tnkh
3
@TonyNg gracias. Me alegro de poder ayudarte. En cuanto a los puntos, es muy seguro porque respondí muy tarde, unos 6 años después de hacer preguntas. Siéntase libre de corregirme, donde cometí errores ortográficos o gramaticales.
simhumileco
3
Agregue un ejemplo simple para mostrar la sintaxis diferente y esta respuesta sería perfecta.
Hogan
3
Respuesta limpia, impresionante
Hidayt Rahman
3
¡La gran respuesta es esta!
Mohammad Afrashteh
80

Su sintaxis es diferente, y ese es el pro principal (o contra, según 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 desde mi experiencia usando ambos, a veces incluso en el mismo proyecto.

SASS pro

  • más limpio: si viene de Python, Ruby (incluso puede escribir accesorios con una sintaxis similar a un símbolo) o incluso el mundo de CoffeeScript, será muy natural para usted: escribir mixins, funciones y, en general, cualquier cosa reutilizable .sasses mucho más fácil 'y legible que en .scss(subjetivo).

SASS contras

  • espacio en blanco sensible (subjetivo), no me importa en otros idiomas, pero aquí en CSS simplemente me molesta (problemas: copia, tabulación vs guerra espacial, etc.).
  • sin reglas en línea (esto fue un juego de ruptura para mí), no puedes hacer lo body color: redque puedes hacer en .scssbody {color: red}
  • importando cosas de otros proveedores, copiando fragmentos CSS de vainilla, no es imposible pero es muy aburrido después de un tiempo. La solución es tener .scssarchivos (junto con los .sassarchivos) en su proyecto o convertirlos a .sass.

Aparte de esto, hacen el mismo trabajo.

Ahora, lo que me gusta hacer es escribir mixins y variables .sassy un código que realmente se compilará en CSS .scsssi es posible (es decir, Visual Studio no tiene soporte para, .sasspero cada vez que trabajo en proyectos Rails, generalmente combino dos de ellos, no en un archivo de c).

Últimamente, estoy considerando darle una oportunidad a Stylus (para un preprocesador 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 realmente más flexible cuando la sintaxis está en cuestión.

Y finalmente mixin para comparación de sintaxis .scssvs .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
Gotas
fuente
44
@cimmanon Presenta ventajas y desventajas, enunciadas claramente. Esa es la diferencia entre esta y otras respuestas. Voté para salir del rojo. Pensé que era útil a pesar de que tiene el diagrama de venn habitual de superposición de respuestas que tiene cualquier otra publicación SO. Esto podría ser más útil para alguien que simplemente elige los dos caminos. También creo que es un poco mejor que la respuesta aceptada porque en realidad muestra la diferencia del idioma en lugar de decir "Sass es diferente porque no es SCSS", lo que para mí es inútil. Podría prescindir de las cosas de uso personal, pero aún así :)
coblr
61

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 SCSS válida. 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 por la brevedad de Haml, está dirigido a personas que prefieren concisión en lugar de similitud con CSS. En lugar de corchetes y punto y coma, utiliza la sangría de líneas para especificar bloques. Aunque ya no es la sintaxis primaria, la sintaxis con sangría continuará siendo compatible. Los archivos en la sintaxis sangrada usan la extensión .sass.

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

Licuadora
fuente
22

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.

designerNProgrammer
fuente
21

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

ingrese la descripción de la imagen aquí

Un ejemplo de algunas 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))

Salida CSS 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 guía puedes ver el sitio web oficial .

Srikrushna
fuente
16

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

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

Sass ignora los corchetes y los puntos y comas y pone el anidamiento, lo que me pareció más útil.

usuario3522940
fuente
13

La diferencia entre el artículo SASS y SCSS explica la diferencia en los detalles. No se confunda con las opciones SASS y SCSS, aunque también lo fui inicialmente, .scss es Sassy CSS y es la próxima generación de .sass.

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 usamos; para separar las declaraciones. Incluso he agregado todas las declaraciones para .border en una sola línea para ilustrar este punto más. Por el contrario, el siguiente código SASS debe estar en diferentes líneas con sangría y no se puede usar el;.

/* 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 de las veces 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 la forma tradicional .sass.

Shailesh Vikram Singh
fuente
12

El original sasses similar a la sintaxis de ruby, similar a ruby, jade, etc.

En esas sintaxis, no usamos {}, en su lugar vamos con espacios en blanco, tampoco uso de; ...

En las scsssintaxis son más parecidas CSS, pero con la obtención de más opciones como: anidamiento, declaración, etc., similar lessy otro preprocesamiento CSS...

Básicamente hacen lo mismo, pero pongo un par de líneas de cada una para ver la diferencia de sintaxis, mire el {} , ;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;
}
Alireza
fuente
6

La respuesta compacta:

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

  • Archivos que terminan con .scss representan la sintaxis estándar admitida por Sass. SCSS es un superconjunto de CSS.
  • Los archivos que terminan con .sassrepresentan la sintaxis "más antigua" admitida por Sass que se originó en el mundo Ruby.
Matías
fuente
4

SASS es Syntactically Awesome Style Sheets y es una extensión de CSS que proporciona las características de reglas anidadas, herencia, Mixins, mientras que SCSS es Sassy Cascaded Style Sheets, que es similar a CSS y llena los vacíos e incompatibilidades entre CSS y SASS. Fue licenciado bajo la licencia MIT. Este artículo tiene más información sobre las diferencias: https://www.educba.com/sass-vs-scss/

ShashiWDN
fuente