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 sea el mismo idioma? ¿Similar? ¿Diferente?
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 sea el mismo idioma? ¿Similar? ¿Diferente?
Sass es un preprocesador de CSS con avances de sintaxis. El programa procesa las hojas de estilo en la sintaxis avanzada y las convierte en hojas de estilo CSS normales. Sin embargo, no amplían el estándar CSS en sí.
Las variables CSS son compatibles y se pueden utilizar, pero no tan bien como las variables del preprocesador.
Para conocer la diferencia entre SCSS y Sass, este texto en la página de documentación de Sass debería responder la pregunta:
There are two syntaxes available for Sass. The first, known as
SCSS (Sassy CSS)
and used throughout this reference, is an extension of the syntax of CSS. This means that every valid CSS stylesheet is a valid SCSS file with the same meaning. This syntax is enhanced with the Sass features described below. Files using this syntax have the .scss extension.The second and older syntax, known as the
indented syntax (or sometimes just “Sass”)
, provides a more concise way of writing CSS. It uses indentation rather than brackets to indicate nesting of selectors, and newlines rather than semicolons to separate properties. Files using this syntax have the .sass extension.
Sin embargo, lo all this works only with the Sass pre-compiler
que al final crea CSS. No es una extensión del estándar CSS en sí.
scss
y sass
es más que una simple preferencia personal en estos días. scss
es mucho más frecuente - utilizado en la mayoría de los marcos de CSS populares como Bootstrap
, Foundation
, Materialize
etc. Los principales marcos de interfaz de usuario favorecen scss
más sass
por defecto - angular, Reaccionar, Vue. Todos los tutoriales o demostraciones generalmente usarán, scss
por ejemplo, create-react-app
facebook.github.io/create-react-app/docs/…
Soy uno de los desarrolladores que ayudó a crear Sass.
La diferencia es la sintaxis. Debajo del exterior textual son idénticos. Es por eso que los archivos sass y scss se pueden importar 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 abstracta que se procesa posteriormente en la salida CSS o incluso en uno de los otros formatos a través de la herramienta sass-convert.
Use la sintaxis que más le guste, ambos son totalmente compatibles y puede cambiar entre ellos más tarde si cambia de opinión.
El .sass
archivo Sass es visualmente diferente del .scss
archivo, p. Ej.
$color: red
=my-border($color)
border: 1px solid $color
body
background: $color
+my-border(green)
$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
.
.scss
a .css
lo mismo que .css
a .scss
?
.css
resulta ser válido .scss
. Tan pronto como agregue el código específico de scss, volver a cambiar el nombre del archivo terminará como un archivo css no válido. css
es un cuadrado y scss
es un rectángulo. Todos los cuadrados son rectángulos, pero no todos los rectángulos son cuadrados.
Sass ( Syntactically Awesome StyleSheets ) tiene dos sintaxis:
Por lo tanto, ambos son 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 regular también es SCSS válido , pero la relación en la otra dirección obviamente no ocurre)
Usa aparatos ortopédicos {}
Usa punto y coma ;
El signo de asignación es :
Para crear un mixin usa la @mixin
directiva
Para usar mixin lo precede con la @include
directiva
Los archivos tienen la extensión .scss .
Sass original :
=
lugar de:
=
signo+
signoAlgunos prefieren Sass , la sintaxis original, mientras que otros prefieren SCSS . De cualquier manera, pero vale la pena señalar que la sintaxis con sangría de Sass no ha sido y nunca estará en desuso . (archivo)
Conversiones con sass-convert :
# Convert Sass to SCSS
$ sass-convert style.sass style.scss
# Convert SCSS to Sass
$ sass-convert style.scss style.sass
Su sintaxis es diferente, y esa es la principal ventaja (o desventaja, 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 de mi experiencia usando ambos, a veces incluso en el mismo proyecto.
SASS pro
.sass
es mucho más fácil 'y legible que en .scss
(subjetivo).Contras de SASS
body color: red
que puedes en .scssbody {color: red}
.scss
archivos (junto con .sass
archivos) 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 en un .sass
código que se compilará en CSS .scss
si es posible (es decir, Visual Studio no tiene soporte para, .sass
pero siempre que trabajo en proyectos de Rails, generalmente combino dos de ellos, no en un archivo ofc).
Ú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 algunas otras características). Puede que esa no sea una buena dirección para un equipo, pero cuando la mantienes solo, está bien. En realidad, el lápiz óptico es más flexible cuando se trata de sintaxis.
Y finalmente mixin para la comparación de sintaxis .scss
vs .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 has two syntaxes. The new main syntax (as of Sass 3) is known as “SCSS” (for “Sassy CSS”), and is a superset of CSS3’s syntax. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss.
The second, older syntax is known as the indented syntax (or just “Sass”). Inspired by Haml’s terseness, it’s intended for people who prefer conciseness over similarity to CSS. Instead of brackets and semicolons, it uses the indentation of lines to specify blocks. Although no longer the primary syntax, the indented syntax will continue to be supported. Files in the indented syntax use the extension .sass.
SASS es un lenguaje interpretado que escupe CSS. La estructura de Sass parece 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.
SASS stands for Syntactically Awesome StyleSheets. It is an extension of CSS that adds power and elegance to the basic language. SASS is newly named as SCSS with some chages, but the old one SASS is also there. Before you use SCSS or SASS please see the below difference.
Un ejemplo de alguna sintaxis de 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 obtener más guía, puede ver el sitio web oficial .
La diferencia básica es la sintaxis. Si bien SASS tiene una sintaxis flexible con espacios en blanco y sin punto y coma, SCSS se parece más a CSS.
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 se basa en el anidamiento, que me pareció más útil.
La diferencia entre el artículo de SASS y SCSS explica la diferencia en los detalles. No se confunda con las opciones SASS y SCSS, aunque yo también lo estaba 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 agregué todas las declaraciones para .border en una sola línea para ilustrar más este punto. Por el contrario, el código SASS a continuación debe estar en diferentes líneas con sangría y no hay uso de;.
/* 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á trabajando con Sass, se está refiriendo a la creación en .scss en lugar de en la forma tradicional de .sass.
El original sass
tiene una sintaxis similar a ruby, similar a ruby, jade, etc.
En esas sintaxis, no usamos {}
, sino que usamos espacios en blanco, tampoco usamos ;
...
En las scss
sintaxis son más parecidas CSS
, pero con más opciones como: anidar, declarar, etc., similares a less
y otros preprocesamiento CSS
...
Ellos básicamente hacen lo mismo, pero me pusieron par de líneas de cada uno para ver la diferencia de sintaxis, mirada en 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 CSS de Sass .
.scss
representan la sintaxis estándar admitida por Sass. SCSS es un superconjunto de CSS..sass
representan la sintaxis "más antigua" admitida por Sass que se origina en el mundo Ruby.SASS es Sintactically 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 la de CSS y llena los vacíos e incompatibilidades entre CSS y SASS. Fue licenciado bajo la licencia del MIT. Este artículo tiene más información sobre las diferencias: https://www.educba.com/sass-vs-scss/
SCSS es la nueva sintaxis de Sass. En extensión, .sass para SASS mientras que .scss para SCSS. Aquí SCSS tiene un enfoque de codificación más lógico y complejo que SASS. Por lo tanto, para un novato en el campo del software, la mejor opción es SCSS.
Me encontré preguntándome lo mismo y encontré una explicación sencilla en el CS50 de Harvard :
A language called Sass ... (is) essentially an extension to CSS ... it adds additional features to CSS ... just to make it a little bit more powerful for us to use.
One of the key features of Sass is the ability to use variables
La extensión Sass es .scss
(a diferencia .css
de un archivo CSS normal).
Entonces, cuando preguntamos "¿cuál es la diferencia entre scss y sass?" - la respuesta podría ser simplemente que .scss es simplemente la extensión de archivo que se usa cuando se desea usar Sass en lugar de CSS normal.