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

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?

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.

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.

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.

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

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

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.

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.

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.

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 .

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.

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.

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

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.

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/