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

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

Además de la respuesta de Idris :

CSS

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

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

SCSS

En SCSS podemos acortar este código usando a @mixinpara no tener que escribir colory widthpropiedades 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 usa 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

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 CSShojas de estilo para un navegador y, para obtener información, SASSagrega mucha funcionalidad adicional a las CSSvariables similares, anidamiento y más, lo que puede hacer que la escritura CSSsea ​​más fácil y rápida.
Los archivos SCSS son procesados ​​por el servidor que ejecuta una aplicación web para generar un archivo tradicional CSSque su navegador pueda entender.

csstambién tiene variables. Puedes usarlos así:

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

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

Y esto es menos

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

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

Definiciones de variables a la derecha:

$      => SCSS, SASS
--     => CSS
@      => LESS

Todas las respuestas son buenas, pero la pregunta es un poco diferente a las respuestas.

"sobre Sass. ¿En qué se diferencia SCSS de CSS" : scss tiene una sintaxis CSS3 bien formada . utiliza el preprocesador sass para crear eso.

y si uso SCSS en lugar de CSS, ¿funcionará igual? si. si su ide es compatible con el preprocesador sass. que funcionará igual.

Sass tiene dos sintaxis. La sintaxis más utilizada se conoce como "SCSS" (para "Sassy CSS"), y es un superconjunto de la sintaxis de CSS3. Esto significa que todas las hojas de estilo CSS3 válidas también son SCSS válidas. Los archivos SCSS usan la extensión .scss.

La segunda sintaxis más antigua se conoce como sintaxis con sangría (o simplemente ".sass"). Inspirado en la concisión de Haml, está destinado a personas que prefieren la concisión a la similitud con CSS. En lugar de corchetes y punto y coma, utiliza la sangría de líneas para especificar bloques. Los archivos en la sintaxis con sangría usan la extensión .sass.

• Más información sobre:

¿Qué es un preprocesador CSS?

CSS en sí mismo carece de lógica y funcionalidad complejas que se requieren para escribir código reutilizable y organizado. Como resultado, un desarrollador está sujeto a limitaciones y enfrentaría una dificultad extrema en el mantenimiento y la escalabilidad del código, especialmente cuando trabaja en proyectos grandes que involucran código extenso y múltiples hojas de estilo CSS. Aquí es donde los preprocesadores de CSS vienen al rescate.

Un preprocesador de CSS es una herramienta que se utiliza para ampliar la funcionalidad básica del CSS estándar predeterminado a través de su propio lenguaje de programación. Nos ayuda a usar una sintaxis lógica compleja como: variables, funciones, mixins, anidación de código y herencia, por nombrar algunos, sobrecargando su CSS vainilla. Mediante el uso de preprocesadores CSS, puede automatizar sin problemas las tareas domésticas, crear fragmentos de código reutilizables, evitar la repetición y la hinchazón del código y escribir bloques de código anidados que estén bien organizados y sean fáciles de leer. Sin embargo, los navegadores solo pueden comprender el código CSS vainilla nativo y no podrán interpretar la sintaxis del preprocesador CSS. Por lo tanto, la sintaxis del preprocesador compleja y avanzada debe compilarse primero en la sintaxis CSS nativa, que luego puede ser interpretada por los navegadores para evitar problemas de compatibilidad entre navegadores.

Avanzando en el artículo, veremos los 3 preprocesadores CSS más populares que utilizan actualmente los desarrolladores de todo el mundo, es decir, Sass, LESS y Stylus. Antes de decidir el ganador entre Sass vs LESS vs Stylus, déjenos conocerlos en detalle primero.

Sass - Hojas de estilo sintácticamente impresionantes

Sass es el acrónimo de "Syntactically Awesome Style Sheets". Sass no solo es el preprocesador CSS más popular del mundo, sino también uno de los más antiguos, lanzado en 2006 por Hampton Catlin y luego desarrollado por Natalie Weizenbaum. Aunque Sass está escrito en lenguaje Ruby, un Precompiler LibSass permite analizar Sass en otros lenguajes y desacoplarlo de Ruby. Sass tiene una comunidad activa masiva y amplios recursos de aprendizaje disponibles en la red para principiantes. Gracias a su madurez, estabilidad y poderosa destreza lógica, Sass se ha establecido a la vanguardia del preprocesador CSS por delante de sus pares rivales.

Sass se puede escribir en 2 sintaxis utilizando Sass o SCSS. ¿Cuál es la diferencia entre los dos? Vamos a averiguar.

Declaración de sintaxis: Sass vs SCSS

• SCSS son las siglas de Sassy CSS. A diferencia de Sass, SCSS no se basa en la sangría.
• La extensión .sass se usa como sintaxis original para Sass, mientras que SCSS ofrece una sintaxis más nueva con la extensión .scss.
• A diferencia de Sass, SCSS tiene llaves y punto y coma, al igual que CSS.
• Al contrario que SCSS, Sass es difícil de leer ya que se desvía bastante de CSS. Es por eso que SCSS es la sintaxis de Sass más recomendada, ya que es más fácil de leer y se parece mucho al CSS nativo, mientras que al mismo tiempo disfruta del poder de Sass.

Considere el siguiente ejemplo con la sintaxis Sass vs SCSS junto con el código CSS compilado.

Sass SYNTAX
    $font-color: #fff
    $bg-color: #00f

    #box
      color: $font-color
      background: $bg-color

SCSS SYNTAX
    $font-color: #fff;
    $bg-color: #00f;

    #box{
      color: $font-color;
      background: $bg-color;
    }

En ambos casos, ya sea Sass o SCSS, el código CSS compilado será el mismo:

#box {
      color: #fff;
      background: #00f;

Uso de Sass

Podría decirse que el Bootstrap del framework front-end más popular está escrito en Sass. Hasta la versión 3, Bootstrap estaba escrito en MENOS, pero bootstrap 4 adoptó Sass y aumentó su popularidad. Algunas de las grandes empresas que utilizan Sass son: Zapier, Uber, Airbnb y Kickstarter.

MENOS - Hojas de estilo más delgadas

LESS es un acrónimo de “Leaner Stylesheets”. Fue lanzado en 2009 por Alexis Sellier, 3 años después del lanzamiento inicial de Sass en 2006. Mientras que Sass está escrito en Ruby, LESS está escrito en JavaScript. De hecho, LESS es una biblioteca de JavaScript que amplía la funcionalidad del CSS vainilla nativo con mixins, variables, anidamiento y bucle de conjunto de reglas. Sass vs LESS ha sido un debate acalorado. No es de extrañar que LESS sea el competidor más fuerte de Sass y tenga la segunda base de usuarios más grande. Sin embargo, cuando bootstrap abandonó LESS a favor de Sass con el lanzamiento de Bootstrap 4, la popularidad de LESS disminuyó. Una de las pocas desventajas de LESS sobre Sass es que no admite funciones. A diferencia de Sass, LESS usa @ para declarar variables que pueden causar confusión con @media y @keyframes. Sin embargo, Una ventaja clave de LESS sobre Sass y Stylus o cualquier otro preprocesador, es la facilidad de agregarlo a su proyecto. Puede hacerlo utilizando NPM o incorporando el archivo Less.js. Declaración de sintaxis: LESS Utiliza la extensión .less. La sintaxis de LESS es bastante similar a SCSS con la excepción de que para declarar variables, en lugar del signo $, LESS usa @.

@font-color: #fff;
    @bg-color: #00f

    #box{
      color: @font-color;
      background: @bg-color;
    }

COMPILED CSS
    #box {
        color: #fff;
        background: #00f;
      }

Uso de LESS El popular framework Bootstrap hasta el lanzamiento de la versión 4 estaba escrito en LESS. Sin embargo, otro marco popular llamado SEMANTIC UI todavía está escrito en LESS. Entre las grandes empresas que utilizan Sass se encuentran: Indiegogo, Patreon y WeChat.

Aguja

El lápiz óptico fue lanzado en 2010 por el ex desarrollador de Node JS TJ Holowaychuk, casi 4 años después del lanzamiento de Sass y 1 año después del lanzamiento de LESS. El lápiz está escrito en Node JS y encaja perfectamente con la pila JS. El lápiz estuvo fuertemente influenciado por la destreza lógica del Sass y la simplicidad de LESS. A pesar de que Stylus sigue siendo popular entre los desarrolladores de Node JS, no ha logrado hacerse con una parte considerable por sí mismo. Una ventaja de Stylus sobre Sass o LESS es que está armado con funciones integradas extremadamente poderosas y es capaz de manejar computación pesada.

Declaración de sintaxis: Stylus usa la extensión .styl. Stylus ofrece una gran flexibilidad en la sintaxis de escritura, admite CSS nativo y permite la omisión de corchetes, dos puntos y punto y coma. Además, tenga en cuenta que Stylus no usa los símbolos @ o $ para definir variables. En cambio, Stylus usa los operadores de asignación para indicar una declaración de variable.

STYLUS SYNTAX ESCRITO COMO CSS NATIVO

font-color = #fff;
bg-color = #00f;

#box {
    color: font-color;
    background: bg-color;
}

O

STYLUS SYNTAX SIN TIRANTES RIZADOS

font-color = #fff;
bg-color = #00f;

#box 
    color: font-color;
    background: bg-color;

O

STYLUS SYNTAX SIN COLONES Y SEMICOLONES

font-color = #fff
bg-color = #00f

#box 
    color font-color
    background bg-color