Buscar..


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.

introduzca la descripción de la imagen aquí

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


Modified text is an extract of the original Stack Overflow Documentation
Licenciado bajo CC BY-SA 3.0
No afiliado a Stack Overflow