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


Según 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?


1332
2018-04-13 19:23


origen


Respuestas:


Sass es un preprocesador CSS con avances de sintaxis. Las hojas de estilo en la sintaxis avanzada son procesadas por el programa, y ​​se convierten en hojas de estilo CSS regulares. Sin embargo, lo hacen no extender el estándar de CSS en sí.

La razón principal de esto es la adición de funciones que CSS carece con dificultad (como las variables).

La diferencia entre SCSS y Sass, este texto en el Página de documentación de Sass debe responder la pregunta:

Hay dos sintaxis disponibles para Sass. El primero, conocido como SCSS (Sassy CSS) y se utiliza 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 funciones de Sass que se describen a continuación. Los archivos que usan esta sintaxis tienen .scss extensión.

El segundo y sintaxis antigua, conocida como la sintaxis indentada (o a veces simplemente "Sass"), proporciona una forma más concisa de escribir CSS. Utiliza indentación en lugar de corchetes para indicar la anidación de selectores y líneas nuevas en lugar de punto y coma para separar las propiedades. Los archivos que usan esta sintaxis tienen .hablar con descaro a extensión.

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


1358
2018-04-13 19:25



Soy uno de los desarrolladores que ayudó a crear Sass.

La diferencia es UI. Debajo del exterior textual son idénticos. Esta es la razón por la que los archivos sass y scss pueden importarse 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 abstracto que luego se procesa en salida CSS o incluso en uno de los otros formatos a través de la herramienta sass-convert.

Utilice la sintaxis que más le guste, ambas son totalmente compatibles y puede cambiar entre ellas más adelante si cambia de opinión.


480
2018-04-20 15:16



El Sass .sass archivo es visualmente diferente de .scss archivo, p.

ejemplo.sass

$color: red

=my-border($color)
  border: 1px solid $color

body
  background: $color
  +my-border(green)

ejemplo.scss

$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 .css a .scss.


264
2017-11-30 03:05



Su sintaxis es diferente, y ese es el principal pro (o engaño, dependiendo de su perspectiva).

Trataré de no repetir mucho de lo que otros dijeron, puedes buscarlo fácilmente en Google, pero en su lugar, me gustaría decir un par de cosas sobre mi experiencia al usar ambos, a veces incluso en el mismo proyecto.

SASS pro 

  • limpiador: si vienes de Python, Ruby (incluso puedes escribir accesorios con sintaxis similar a un símbolo) o incluso el mundo de CoffeeScript, te resultará muy natural: escribir mezclas, funciones y, en general, cualquier material reutilizable en .sasses mucho más "fácil" y legible que en .scss (subjetivo).

Contras SASS

  • espacio en blanco sensible (subjetivo), no me importa en otros idiomas, pero aquí en CSS me molesta (problemas: copia, pestaña vs guerra espacial, etc.).
  • no hay reglas en línea (esto fue un juego que rompió para mí), no puedes hacer body color: red como puedas en .scss body {color: red}
  • importando cosas de otros proveedores, copiando fragmentos de código CSS vainilla, no imposibles pero muy aburridos después de un tiempo. La solución es tener cualquiera .scss archivos (junto con .sass archivos) en su proyecto o para convertirlos a .sass.

Aparte de esto, hacen el mismo trabajo.

Ahora, lo que me gusta hacer es escribir mixins y variables en .sass y código que compilará realmente a CSS en .scss si es posible (es decir, Visual Studio no tiene soporte para .sass pero cada vez que trabajo en proyectos de Rails normalmente combino dos de ellos, no en un archivo de c).

Últimamente, estoy considerando dar Aguja una oportunidad (para un preprocesador de CSS a tiempo completo) porque le permite combinar dos sintaxis en un archivo (entre otras características). Esa puede no ser una buena dirección para que un equipo tome, pero cuando la mantienes sola, está bien. El lápiz es realmente más flexible cuando la sintaxis está en cuestión.

Y finalmente mixin para .scss vs .sass comparación de sintaxis:

// 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

57
2018-05-13 14:16



Desde el página de inicio del idioma

Sass tiene dos sintaxis. El nuevo principal   la sintaxis (a partir de Sass 3) se conoce como   "SCSS" (para "CSS descarado")y es un   superconjunto de la sintaxis de CSS3. Esto significa   que cada hoja de estilo CSS3 válida es   SCSS válido también. Los archivos SCSS usan   extensión .scss.

La segunda sintaxis más antigua se conoce como   la sintaxis con sangría (o simplemente "Sass").   Inspirado por la concisión de Haml, es   destinado a las personas que prefieren   concisión sobre la similitud con CSS.   En lugar de corchetes y punto y coma,   usa la sangría de líneas para   especificar bloques. Aunque ya no es el   sintaxis primaria, la sintaxis indentada   continuará siendo compatible. Archivos   en la sintaxis indentada use la   extensión .sass.

SASS es un interpretado lenguaje que escupe CSS. La estructura de Sass miradas como CSS (a distancia), pero me parece que la descripción es un poco engañosa; sus no un reemplazo para CSS o una extensión. Es un intérprete que arroja CSS al final, por lo que Sass todavía tiene las limitaciones del CSS normal, pero lo enmascara con código simple.


45
2018-04-13 19:27



Hablar con descaro a (Syntactically Awesome StyleSheets) tienen dos sintaxis:

  • uno más nuevo: SCSS (Sassy CSS)
  • y una sintaxis anterior, original: sangrado, que es la original Hablar con descaro a y también se llama Hablar con descaro a.

Entonces ambos son parte de Hablar con descaro a preprocesador con dos sintaxis posibles diferentes.

Las diferencias más importantes entre SCSS y original Hablar con descaro a:

SCSS:

  • La sintaxis es similar a CSS.
  • Use llaves {}.
  • Usa secuaces ;.
  • Signo variable en SCSS es $.
  • Signo de asignación en SCSS es :.
  • Los archivos que usan esta sintaxis tienen .scss extensión.

Original Hablar con descaro a:

  • La sintaxis es similar a Rubí.
  • Aquí no hay usos de llaves.
  • Sin sangría estricta.
  • Sin punto y coma.
  • Signo variable en Hablar con descaro a es ! en lugar de $.
  • Registrarse en la tarea Hablar con descaro a es = en lugar de :.
  • Los archivos que usan esta sintaxis tienen .hablar con descaro a extensión.

Estas son dos sintaxis disponibles para Hablar con descaro a.

Algunos prefieren Hablar con descaro a, la sintaxis original, mientras que otros prefieren SCSS. De cualquier manera, pero vale la pena señalar que Sass la sintaxis indentada 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

REFERENCIA SASS


37
2018-04-10 11:16



La diferencia básica es la sintaxis. Mientras que SASS tiene una sintaxis suelta con espacios en blanco y sin punto y coma, el SCSS se asemeja más a CSS.


18
2018-05-06 10:36