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

2192

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 sea el mismo idioma? ¿Similar? ¿Diferente?

1
2125

Sass es un preprocesador de 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 amplían el estándar CSS en sí.

Las variables CSS son compatibles y se pueden utilizar, pero no tan bien como las variables del preprocesador.

Para conocer la diferencia entre SCSS y Sass, este texto en la página de documentación de Sass debería responder la pregunta:

There are two syntaxes available for Sass. The first, known as SCSS (Sassy CSS) and used throughout this reference, is an extension of the syntax of CSS. This means that every valid CSS stylesheet is a valid SCSS file with the same meaning. This syntax is enhanced with the Sass features described below. Files using this syntax have the .scss extension.

The second and older syntax, known as the indented syntax (or sometimes just “Sass”), provides a more concise way of writing CSS. It uses indentation rather than brackets to indicate nesting of selectors, and newlines rather than semicolons to separate properties. Files using this syntax have the .sass extension.

Sin embargo, lo all this works only with the Sass pre-compilerque al final crea CSS. No es una extensión del estándar CSS en sí.

8
  • 351
    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 23/11/2016 a las 6:49
  • 23
    CSS3 tiene variables: developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
    Josh
    11/02/2017 a las 21:29
  • 2
    Otro problema: a partir del 2019-05-10, 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 mediante muchas llamadas a funciones o definidas en archivos SCSS. Parece que todavía es una característica planificada, pero no estoy seguro de si realmente hay algún movimiento en la implementación o aún no. 10 de mayo de 2019 a las 17:20
  • 27
    @ 0x1ad2 La elección entre scssy sasses más que una simple 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. Todos los tutoriales o demostraciones generalmente usarán, scsspor ejemplo, create-react-app facebook.github.io/create-react-app/docs/…
    Drenai
    11/08/19 a las 23:42
  • 1
    A partir de hoy, dice " Con algunas pequeñas excepciones , es un superconjunto de CSS, lo que significa que esencialmente todo CSS válido es también SCSS válido". ... simplemente no puede escribir algo así sin proporcionar un enlace a más detalles sobre las "pequeñas excepciones" :( 27/10/20 a las 9:42
688

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

La diferencia es la sintaxis. Debajo del exterior textual son idénticos. Es por eso que los archivos sass y scss se pueden importar entre sí. 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 posteriormente en la salida 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, ambos son totalmente compatibles y puede cambiar entre ellos más tarde si cambia de opinión.

5
  • sesenta y cinco
    ¿Perdóneme? ¿Lo leí bien? ¿Puede Sass importar archivos Less correctamente? ¿Existe alguna sinergia entre mixins / variables?
    pilau
    1 de junio de 2013 a las 13:30
  • 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
    16 de agosto de 2014 a las 21:25
  • 6
    ¿La "interfaz de usuario" significa el "idioma"? 20 feb 2019 a las 16:09
  • @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. 14/03/19 a las 16:13
  • 14
    ¿Debería reemplazarse "UI" en la respuesta por un término más comúnmente comprendido, como sugirió @orionelenzil? 14 de mayo de 2019 a las 22:07
414

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

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 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.

6
  • 1
    @Novocaine +1, estoy de acuerdo. Como programador de C ++, prefiero los corchetes y el punto y coma. Por cierto, tengo una pregunta, ¿la conversión de .scssa .csslo mismo que .cssa .scss?
    JW.ZG
    2 de febrero de 2016 a las 4:42
  • 1
    Esto es más lo que me importa en comparación con las respuestas anteriores ... Demasiado perezoso para leer ;-)
    LYu
    21/09/18 a las 21:04
  • 9
    @ JW.ZG, no es una conversión, el nativo .cssresulta ser válido .scss. Tan pronto como agregue el código específico de scss, volver a cambiar el nombre del archivo 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
    13/06/19 a las 2:38
  • @Grant excepto que algunos rectángulos deben modificarse para convertirse en cuadrados. CSS nunca necesita ser modificado para convertirse en SCSS, simplemente lo es. 20 nov.20 a las 0:42
  • 1
    Voto a favor por proporcionar fragmentos de código. Las otras respuestas brindan más información de fondo, pero esta me permitió reconocer rápidamente qué sintaxis había visto en el pasado y cuáles me parecían familiares. 15 dic.20 a las 5:04
210

Sass ( Syntactically Awesome StyleSheets ) tiene dos sintaxis:

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

Por lo tanto, ambos son 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 regular también es SCSS válido , pero la relación en la otra dirección obviamente no ocurre)

  • Usa aparatos ortopédicos {}

  • 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 tirantes
  • Sin sangría estricta
  • Sin punto y coma
  • El signo de asignación es en =lugar de:
  • Para crear un mixin usa 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 con sangría de Sass no ha sido y nunca estará en desuso . (archivo)

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

3
  • 19
    Es extraño que una respuesta tan clara y concisa tenga menos votos que otras. He estado revisando montones de fuentes para comprender cuáles son las diferencias entre Sass y Scss y finalmente encontré esto que me iluminó instantáneamente. Buen trabajo excepto algunos errores ortográficos / gramaticales.
    tnkh
    6 de noviembre de 2017 a las 2:50
  • 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. 6/11/2017 a las 10:47
  • 5
    Agregue un ejemplo simple para mostrar la sintaxis diferente y esta respuesta sería perfecta.
    hogan
    1 de mayo de 2019 a las 5:22
89

Su sintaxis es diferente, y esa es la principal ventaja (o desventaja, 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 de 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 sintaxis similar a un símbolo) o incluso el mundo de CoffeeScript, le resultará muy natural: escribir mixins, funciones y, en general, cualquier material reutilizable .sasses mucho más fácil 'y legible que en .scss(subjetivo).

Contras de SASS

  • 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 rompimiento para mí), no puedes hacer lo body color: redque puedes en .scssbody {color: red}
  • importar cosas de otros proveedores, copiar fragmentos de CSS vanilla, no imposible, pero muy aburrido después de un tiempo. La solución es tener .scssarchivos (junto con .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 en un .sasscódigo que se compilará en CSS .scsssi es posible (es decir, Visual Studio no tiene soporte para, .sasspero siempre que trabajo en proyectos de Rails, generalmente combino dos de ellos, no en un archivo ofc).

Ú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 algunas otras características). Puede que esa no sea una buena dirección para un equipo, pero cuando la mantienes solo, está bien. En realidad, el lápiz óptico es más flexible cuando se trata de sintaxis.

Y finalmente mixin para la 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
1
  • 5
    @cimmanon Presenta pros y contras, explicados con claridad. Esa es la diferencia entre esta y otras respuestas. Yo voté a favor de retirarme del rojo. Pensé que era útil a pesar de que tiene el diagrama de venn habitual de superposición de respuestas que tienen todas las demás publicaciones de SO. Esto podría ser más útil para alguien que simplemente elija entre 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 simplemente decir "Sass es diferente porque no es SCSS", lo cual para mí es inútil. Podría prescindir de las cosas de uso personal, pero aún así :)
    coblr
    13 de mayo de 2015 a las 22:01
72

Desde la página de inicio del idioma

Sass has two syntaxes. The new main syntax (as of Sass 3) is known as “SCSS” (for “Sassy CSS”), and is a superset of CSS3’s syntax. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss.

The second, older syntax is known as the indented syntax (or just “Sass”). Inspired by Haml’s terseness, it’s intended for people who prefer conciseness over similarity to CSS. Instead of brackets and semicolons, it uses the indentation of lines to specify blocks. Although no longer the primary syntax, the indented syntax will continue to be supported. Files in the indented syntax use the extension .sass.

SASS es un lenguaje interpretado que escupe CSS. La estructura de Sass parece 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.

0
31

SASS stands for Syntactically Awesome StyleSheets. It is an extension of CSS that adds power and elegance to the basic language. SASS is newly named as SCSS with some chages, but the old one SASS is also there. Before you use SCSS or SASS please see the below difference.

ingrese la descripción de la imagen aquí

Un ejemplo de alguna sintaxis de 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 obtener más guía, puede ver el sitio web oficial .

1
  • Ruby Sass fue la implementación original de Sass, pero llegó al final de su vida útil el 26 de marzo de 2019. Dart Sass es ahora la implementación principal de Sass.
    nCardot
    22 de mayo a las 17:08
23

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

18

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 se basa en el anidamiento, que me pareció más útil.

13

La diferencia entre el artículo de SASS y SCSS explica la diferencia en los detalles. No se confunda con las opciones SASS y SCSS, aunque yo también lo estaba 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 agregué todas las declaraciones para .border en una sola línea para ilustrar más este punto. Por el contrario, el código SASS a continuación debe estar en diferentes líneas 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 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á trabajando con Sass, se está refiriendo a la creación en .scss en lugar de en la forma tradicional de .sass.

12

El original sasstiene una sintaxis similar a ruby, similar a ruby, jade, etc.

En esas sintaxis, no usamos {}, sino que usamos espacios en blanco, tampoco usamos ;...

En las scsssintaxis son más parecidas CSS, pero con más opciones como: anidar, declarar, etc., similares a lessy otros preprocesamiento CSS...

Ellos básicamente hacen lo mismo, pero me pusieron par de líneas de cada uno para ver la diferencia de sintaxis, mirada en 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;
}
1
  • Ruby Sass fue la implementación original de Sass, pero llegó al final de su vida útil el 26 de marzo de 2019. Dart Sass es ahora la implementación principal de Sass.
    nCardot
    22 de mayo a las 17:09
9

La respuesta compacta:

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

  • Los archivos que terminan en .scssrepresentan la sintaxis estándar admitida por Sass. SCSS es un superconjunto de CSS.
  • Los archivos que terminan en .sassrepresentan la sintaxis "más antigua" admitida por Sass que se origina en el mundo Ruby.
1
  • 1
    Ruby Sass fue la implementación original de Sass, pero llegó al final de su vida útil el 26 de marzo de 2019. Dart Sass es ahora la implementación principal de Sass.
    nCardot
    22 de mayo a las 17:06
6

SASS es Sintactically 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 la de CSS y llena los vacíos e incompatibilidades entre CSS y SASS. Fue licenciado bajo la licencia del MIT. Este artículo tiene más información sobre las diferencias: https://www.educba.com/sass-vs-scss/

0

SCSS es la nueva sintaxis de Sass. En extensión, .sass para SASS mientras que .scss para SCSS. Aquí SCSS tiene un enfoque de codificación más lógico y complejo que SASS. Por lo tanto, para un novato en el campo del software, la mejor opción es SCSS.

0

Me encontré preguntándome lo mismo y encontré una explicación sencilla en el CS50 de Harvard :

A language called Sass ... (is) essentially an extension to CSS ... it adds additional features to CSS ... just to make it a little bit more powerful for us to use.

One of the key features of Sass is the ability to use variables

La extensión Sass es .scss(a diferencia .cssde un archivo CSS normal).

Entonces, cuando preguntamos "¿cuál es la diferencia entre scss y sass?" - la respuesta podría ser simplemente que .scss es simplemente la extensión de archivo que se usa cuando se desea usar Sass en lugar de CSS normal.