Sass - Instalación

En este capítulo, aprenderemos el procedimiento paso a paso para instalar Ruby, que se utiliza para ejecutar los archivos SASS.

Requisitos del sistema para SASS

  • Operating System - multiplataforma

  • Browser Support - IE (Internet Explorer 8+), Firefox, Google Chrome, Safari, Opera

  • Programming Language - rubí

Instalación de Ruby

Step 1 - Abre el enlace https://www.ruby-lang.org/en/downloads/, verá una pantalla como se muestra a continuación:

Descargue la versión estable actual del archivo zip.

Step 2 - A continuación, ejecute la configuración para instalar Ruby en el sistema.

Step 3- A continuación, agregue la carpeta bin Ruby a su Variable de usuario PATH y Variable de sistema para trabajar con el comando gem.

Path User Variable -

  • Haga clic derecho en el My Computer icono.

  • Seleccione Properties.

  • A continuación, haga clic en el Advanced pestaña y haga clic en Environment Variables.

En la ventana Variables de entorno , haga doble clic en la RUTA como se muestra en la captura de pantalla que se muestra a continuación:

Obtendrá un cuadro Editar variable de usuario como se muestra. Agregue la ruta de la carpeta ruby ​​bin en el campo Valor variable comoC:\Ruby\bin. Si la ruta ya está configurada para otros archivos, coloque un punto y coma después de eso y agregue la ruta de la carpeta Ruby como se muestra a continuación.

Haga clic en el OK botón.

System Variable -

  • Haga clic en el New botón.

A continuación, el New System Variable El bloque se muestra como se muestra a continuación.

  • Entrar RubyOpten el campo Nombre de variable yrubygemsen el campo Valor de variable . Después de escribir el nombre y el valor de la variable , haga clic en elOK botón.

Step 4 - Abra el símbolo del sistema en su sistema e ingrese la siguiente línea -

gem install sass

Step 5 - A continuación, verá la siguiente pantalla después de instalar SASS correctamente.

Ejemplo

El siguiente es un ejemplo simple de SASS.

<html>
   <head>
      <title> Import example of sass</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css"/>
   </head>

   <body>
      <h1>Simple Example</h1>
      <h3>Welcome to TutorialsPoint</h3>
   </body>
</html>

Ahora, crearemos un archivo como style.scss , que es bastante similar a CSS y la única diferencia es que se guardará con la extensión .scss. Los archivos .htm y .scss deben crearse dentro de la carpetaruby. Puede guardar su archivo .scss en la carpetaruby\lib\sass\ (antes de este proceso, cree una carpeta como sass en el directorio lib).

h1{
   color: #AF80ED;
}

h3{
   color: #DE5E85;
}

Puede decirle a SASS que observe el archivo y actualice el CSS cada vez que cambie el archivo SASS, usando el siguiente comando

sass --watch C:\ruby\lib\sass\style.scss:style.css

Cuando ejecute el comando anterior, creará el archivo style.css automáticamente. Siempre que cambie el archivo SCSS, el archivo style.css se actualizará automáticamente.

El archivo style.css tendrá el siguiente código cuando ejecute el comando dado anteriormente:

style.css

h1 {
   color: #AF80ED;
}
h3 {
   color: #DE5E85;
}

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

  • Guarde el código dado arriba en hello.html archivo.

  • Abra este archivo HTML en un navegador.