sass
SCSS vs Sass
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 deSCSS
parece más a una sintaxis deCSS
pero la sintaxis deSASS
es un poco diferente deSCSS
pero ambas producen exactamente el mismo códigoCSS
. - 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 enSASS
no usamosparanthesis
. -
Indentation
es muy importante enSASS
. Definirá las propiedades anidadas en laclass
oid
del elemento. - En
scss
podemos definir múltiples variables en una sola línea, pero enSASS
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;
}