sass
SCSS vs Sass

Principales diferencias

Aunque la gente suele decir Sass como el nombre de este preprocesador CSS, a menudo se refieren a la sintaxis SCSS . Sass usa la extensión de archivo .sass , mientras que SCSS - Sass usa la extensión .scss . Ambos se conocen como "Sass".

Hablando en general, la sintaxis SCSS usa más comúnmente. SCSS parece a CSS normal con más capacidades, mientras que Sass ve bastante diferente al CSS normal. Ambas sintaxis tienen las mismas habilidades.

Sintaxis

Las principales diferencias son que Sass no usa llaves o punto y coma, donde SCSS hace. Sass también es sensible al espacio en blanco, lo que significa que tiene que sangrar correctamente. En SCSS , puede dar formato y sangrar sus reglas a su gusto.

SCSS:

// nesting in SCSS
.parent {
  margin-top: 1rem;

  .child {
    float: left;
    background: blue;
  }
}

HABLAR CON DESCARO A:

// nesting in Sass
.parent
  margin-top: 1rem

  .child
    float: left
    background: blue

Después de la compilación, ambos producirán el mismo CSS siguiente:

.parent {
  margin-top: 1rem;
}
.parent .child {
  float: left;
  background: blue;
}

Mixins

Sass tiende a ser la sintaxis más "perezosa". Nada ilustra esto mejor que la forma en que define e incluye los mixins.

Definiendo un mixin

= es cómo se define una mezcla en Sass , @mixin en SCSS .

// SCSS
@mixin size($x: 10rem, $y: 20rem) {
  width: $x;
  height: $y;
}
  
// Sass
=size($x: 10rem, $y: 20rem)
  width: $x
  height: $y

Incluyendo una mezcla

+ es cómo incluir en Sass , @include en SCSS .

// SCSS
.element {
  @include size(20rem);
}

// Sass
.element
  +size(20rem)

Mapas

Cuando se trata de mapas, usualmente SCSS es la sintaxis más fácil. Debido a que Sass está basado en sangría, sus mapas deben guardarse en una línea.

// in Sass maps are "unreadable"
$white: ( white-50: rgba(255, 255, 255, .1), white-100: rgba(255, 255, 255, .2), white-200: rgba(255, 255, 255, .3), white-300: rgba(255, 255, 255, .4), white-400: rgba(255, 255, 255, .5), white-500: rgba(255, 255, 255, .6), white-600: rgba(255, 255, 255, .7), white-700: rgba(255, 255, 255, .8), white-800: rgba(255, 255, 255, .9), white-900: rgba(255, 255, 255, 1 )

Debido a que puede formatear su código en varias líneas con SCSS , puede formatear sus mapas para que sean más legibles.

// in SCSS maps are more readable
$white: (
  white-50: rgba(255, 255, 255, .1),
  white-100: rgba(255, 255, 255, .2),
  white-200: rgba(255, 255, 255, .3),
  white-300: rgba(255, 255, 255, .4),
  white-400: rgba(255, 255, 255, .5),
  white-500: rgba(255, 255, 255, .6),
  white-600: rgba(255, 255, 255, .7),
  white-700: rgba(255, 255, 255, .8),
  white-800: rgba(255, 255, 255, .9),
  white-900: rgba(255, 255, 255, 1)
);

Comentarios

Los comentarios en Sass vs. Scss son en gran medida similares, excepto cuando se trata de líneas múltiples. SASS multilíneas SASS son sensibles a la sangría, mientras que SCSS basa en terminadores de comentarios.

Comentario de una sola línea

estilo.scss

// Just this line will be commented!
h1 { color: red; }

style.sass

// Exactly the same as the SCSS Syntax!
h1
  color: red

Comentario multilínea

estilo.scss

Iniciador: /*

Terminador: */

/* This comment takes up
 * two lines.
 */
h1 {
   color: red;
}

Esto dará estilo a los elementos h1 con el color rojo .

style.sass

Ahora, SASS tiene dos iniciadores, pero no los respectivos terminadores. Los comentarios de SASS en SASS son sensibles a los niveles de sangría .

Iniciadores: // y /*

// This is starts a comment,
   and will persist until you 
   return to the original indentaton level.
h1
  color: red

Esto dará estilo a los elementos h1 con el color rojo .

Lo mismo se puede hacer con el iniciador /* :

/* This is starts a comment,
   and will persist until you 
   return to the original indentaton level.
h1
  color: red

Así que ahí lo tienes! Las principales diferencias entre los comentarios en SCSS y SASS !

Comparación entre SCSS y SASS

• SCSS sintaxis de SCSS parece más a una sintaxis de CSS pero la sintaxis de SASS es un poco diferente de SCSS pero ambas producen exactamente el mismo código CSS .
• En SASS no estamos terminando las propiedades de estilo con punto y coma ( ; ) pero en SCSS estamos terminando las propiedades de estilo con ( ; ).
• En SCSS usamos paranthesis {} para cerrar las propiedades de estilo pero en SASS no usamos paranthesis .
• Indentation es muy importante en SASS . Definirá las propiedades anidadas en la class o id del elemento.
• En scss podemos definir múltiples variables en una sola línea, pero en SASS no podemos hacerlo.

para sintaxis de bucle

Con el lanzamiento de sass 3.3 y la versión plus, la sintaxis de condiciones de @if y else se hizo igual. Ahora podemos usar expresiones no solo con scss sino también con sass .

sintaxis sass

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

Compilado para

.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em;
}
.item-3 {
  width: 6em;
}

sintaxis de scss

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

compilado para

.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em;
}
.item-3 {
  width: 6em;
}