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

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

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.

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.

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

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

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.

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.

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 .

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.

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.

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.

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;
}

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.

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/

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.

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.