tutorial - ¿Cuál es la diferencia entre CSS y SCSS?

sass--watch

Question

Sé CSS muy bien, pero estoy confundido acerca de Sass. ¿En qué se diferencia SCSS de CSS y si uso SCSS en lugar de CSS funcionará igual?

Answer 1

Además de la respuesta de Idriss :

CSS

En CSS, escribimos el código como se muestra a continuación, en toda su longitud.

body{
 width: 800px;
 color: #ffffff;
}
body content{
 width:750px;
 background:#ffffff;
}

SCSS

En SCSS podemos acortar este código usando un @mixin para que no tengamos que escribir propiedades de color y width una y otra vez. Podemos definir esto a través de una función, de manera similar a PHP u otros lenguajes.

$color: #ffffff;
$width: 800px;

@mixin body{
 width: $width;
 color: $color;

 content{
  width: $width;
  background:$color;
 }
}

HABLAR CON DESCARO A

Sin embargo, en SASS, toda la estructura es visualmente más rápida y limpia que SCSS.

• Es sensible al espacio en blanco cuando utiliza copiar y pegar,

• Parece que actualmente no es compatible con CSS en línea.

  $color: #ffffff
  $width: 800px
  $stack: Helvetica, sans-serif
  
  body
    width: $width
    color: $color
    font: 100% $stack
  
    content
      width: $width
      background:$color

Answer 2

CSS es el lenguaje de estilo que cualquier navegador entiende para diseñar páginas web.

SCSS es un tipo especial de archivo para SASS, un programa escrito en Ruby que ensambla hojas de estilo CSS para un navegador, y para información SASS agrega muchas funcionalidades adicionales a CSS como variables, anidamiento y más que pueden hacer que la escritura CSS sea más fácil y rápida. Los archivos SCSS son procesados ​​por el servidor que ejecuta una aplicación web para generar un CSS tradicional que su navegador puede entender.

Answer 3

Y esto es menos

--primaryColor: #ffffff;
--width: 800px;

body {
    width: var(--width);
    color: var(--primaryColor);
}
.content{
    width: var(--width);
    background: var(--primaryColor);
}

Answer 4

css tiene variables. Puedes usarlos así:

@primarycolor: #ffffff;
@width: 800px;

body{
 width: @width;
 color: @primarycolor;
 .content{
  width: @width;
  background:@primarycolor;
 }
}