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

Introducción

• CSS: la hoja de estilo en cascada es básicamente el lenguaje de secuencias de comandos. CSS se utiliza para el diseño de páginas web.
  CSS es la tecnología web más importante que se usa ampliamente junto con HTML y JavaScript. CSS tiene una extensión de archivo de .css .
• SCSS: la hoja de estilo Syntactically Awesome es el superconjunto de CSS. SCSS es la versión más avanzada de CSS. SCSS fue diseñado por Hampton Catlin y desarrollado por Chris Eppstein y Natalie Weizenbaum. Debido a sus características avanzadas, a menudo se lo denomina Sassy CSS. SCSS tiene la extensión de archivo .scss .

Diferencias:

1. SCSS contiene todas las funciones de CSS y contiene más funciones que no están presentes en CSS, lo que lo convierte en una buena opción para que los desarrolladores lo usen.
2. SCSS está lleno de funciones avanzadas.
3. SCSS ofrece variables, puede acortar su código usando variables. Es una gran ventaja sobre el CSS convencional.
   • Ejemplo: en CSS

     body{
      color: #ffffff;
      font: $ubuntu-font: 'Ubuntu', 
                          'Arial',
                          'Helvetica',
                           sans-serif;
      font-size: xx-large;
      padding: 2rem;
     }
     

     Producción:
     

   • En SCSS

     $white: #ffffff;
     $ubuntu-font: $ubuntu-font: 'Ubuntu', 'Arial', 'Helvetica', sans-serif;
     
     body{
      color: $white;
      font: $ubuntu-font;
      font-size: xx-large;
      padding: 2rem;
     }
     

     Producción:
     

4. Conocer SCSS te ayuda a personalizar Bootstrap 4.
5. SASS agrega la característica de @import que le permite importar sus archivos SCSS personalizados.
   Ejemplo:

   @import "my theme";
   @import "framework/bootstrap";
   

6. SASS nos permite usar sintaxis anidada. Digamos que si tiene que diseñar un ‘párrafo’ específico en ‘div’ en ‘pie de página’, definitivamente puede hacerlo con SASS.
   Ejemplo:

   footer {
       div {
           p {
               margin: 2rem;
               color: #2f2f2f;
           }
       }
   }
   

7. Por último, lo que hace que SASS sea una buena opción para usar es que está bien documentado.

CSS es la base de las páginas web, se usa para el desarrollo de páginas web mediante el diseño de sitios web y aplicaciones web. Puede aprender CSS desde cero siguiendo este tutorial de CSS y ejemplos de CSS .