Cómo instalar SASS:

SASS o Syntactically Awesome Stylesheets es una extensión de CSS y nos ayuda a escribir estilos más flexibles. Esto agrega más potencia al lenguaje básico de CSS. SASS es un lenguaje de preprocesamiento que se compila en CSS y tiene diferentes sintaxis técnicas. Escribir código en SASS no permite que los navegadores interpreten el código como si no fuera un CSS adecuado, sino que necesitamos un compilador para completar el código que escribimos en CSS para que los navegadores lo interpreten y lo entiendan. Las variables, mixins, reglas anidadas, importaciones en línea, etc. se pueden usar en SASS con sintaxis CSS compatible. Con la ayuda de la biblioteca de estilos de la brújula, Syntactically Awesome Stylesheets mantiene bien organizadas las hojas de estilo grandes y pone en funcionamiento las pequeñas hojas de estilo en muy poco tiempo. Junto con características como la plataforma totalmente compatible con CSS y extensiones de lenguaje como anidamiento, mixins, WTC también proporciona características como muchas funciones importantes para manipular colores y otros valores diferentes. También tiene otras características avanzadas como directivas de control para bibliotecas, formato correctamente, salida personalizable y muchas otras.

A continuación se detallan los requisitos del sistema para la instalación de hojas de estilo sintácticamente impresionantes:

  • Sistema operativo : puede ser cualquier sistema operativo multiplataforma.
  • Lenguaje de programación: el lenguaje de programación es Ruby.
  • Navegador : puede ser cualquier navegador como Google Chrome, Internet Explorer, Safari, Mozilla Firefox, Opera, etc.

Pasos para instalar SASS:

A continuación se detallan los pasos para instalar el paquete Syntactically Awesome Stylesheets en el sistema:

Paso 1:

Descargue la versión estable actual de Ruby utilizando el siguiente enlace. Descarga un archivo zip que debe descomprimirse para una instalación posterior. Winzip o 7zip se pueden usar para descomprimir el archivo.

https://www.ruby-lang.org/en/downloads/

Paso 2:

Después de descomprimir, instale Ruby en el sistema siguiendo el procedimiento de instalación estándar.

Paso 3:

Agregue la carpeta Ruby bin a una variable de usuario PATH y la variable del sistema para que pueda funcionar con el comando gem.
Para agregar las variables PATH:

  1. Primero, haga clic derecho en el icono de mi computadora en el escritorio.
  2. Vaya a propiedades desde el menú desplegable.
  3. Después de eso, haga clic en la pestaña avanzada y luego haga clic en las variables de entorno.
  • Después de que se abra la ventana de variables de entorno, haga doble clic en la RUTA debajo de la columna de variables en la parte superior. A continuación se muestra la captura de pantalla que lo muestra:

  • Al hacer doble clic en RUTA, se abrirá la ventana Editar variable de usuario. Agregue la ruta de ruby ​​bin en el campo de valor para la variable como C: \ Ruby \ bin. En caso de que haya otras rutas establecidas para otros archivos, simplemente coloque un punto y coma y agregue la ruta ruby. A continuación se muestra la captura de pantalla que lo muestra:

  • Haga clic en el botón Aceptar para completar la tarea.

Configuración de la variable del sistema:

  • Bajo el sistema, la pestaña variable hace clic en el nuevo botón.
  • Después de eso, se abrirá la nueva ventana de variable del sistema. Complete con RubyOpt en el campo para el nombre de la variable y RubyGems en el campo para el valor de la variable. Luego haga clic en el botón Aceptar para finalizar la tarea. A continuación se muestra la captura de pantalla que lo muestra:

Etapa 4:

En el símbolo del sistema, ejecute el comando gem install Scss. Esto instalará sass en el sistema.

Paso 5:

SASS al instalarse con éxito mostrará la siguiente pantalla. Compruébalo para ser confirmado.

A continuación se muestra un ejemplo que muestra una implementación básica de SASS.


SASS example

Example
It is a bright and sunny day


SASS example

Example
It is a bright and sunny day


SASS example

Example
It is a bright and sunny day


SASS example

Example
It is a bright and sunny day


SASS example

Example
It is a bright and sunny day

Vamos a crear un buen archivo examples.css que es similar a CSS, espera el hecho de que se guardará con la extensión .scss. Esto debe crearse dentro de la carpeta ruby ​​junto con los archivos .htm. Opcionalmente, el archivo scss también se puede guardar con la ruta de la carpeta ruby ​​\ lib \ scss. Cree la carpeta sass en la carpeta lib antes de crear el archivo scss.

h1( color: #AF80ED; ) h3( color: #DE5E85; )

Se puede indicar a SASS que mire el archivo y actualice el CSS siempre que haya algún cambio en el archivo SCSS. A continuación se muestra el comando:

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

Al ejecutar el comando anterior, creará automáticamente un archivo example.css. Al cambiar el archivo scss, el archivo example.css se actualizará automáticamente.

Al ejecutar el comando anterior, se creará el archivo example.css con los siguientes contenidos.

h1( color: #AF80ED; ) h3( color: #DE5E85; )

Además de los pasos anteriores a continuación, están las otras formas de instalar SASS:

Hay muchas aplicaciones que ofrecen formas fáciles y fáciles de instalar SASS. Estos se pueden descargar de internet. De estos, pocos de estos vienen de forma gratuita, mientras que otros pagan.

NPM también se puede usar para instalar SASS en caso de que el usuario esté usando node.js.

Por lo tanto, en la guía paso a paso anterior, SASS se puede instalar con éxito en un sistema. A continuación se muestra el comando:

npm install -g sass

Pero tenga en cuenta que esta instalación instalará la implementación de JavaScript puro de Syntactically Awesome Stylesheets que es comparativamente más lento que otros métodos dados aquí, pero aún tiene la misma interfaz que los otros métodos. Por lo tanto, en caso de que la lentitud cause algún problema, será muy fácil cambiar a otra implementación en un momento posterior para mejorar la velocidad.

En caso de que algún usuario ejecute el administrador de paquetes Chocolatey para Windows, se puede instalar dart SASS. A continuación se muestra el comando:

choco install sass

En caso de que cualquier usuario use el administrador de paquetes Homebrew para Mac OS X, se puede instalar dart SASS. A continuación se muestra el comando:

brew install sass/sass/sass

Por lo tanto, junto con tantas características, SASS o Syntactically Awesome Stylesheets ofrece una amplia gama de características utilizadas para diseñar páginas web con mayor facilidad. SASS proporciona diferentes extensiones CSS como propiedades anidadas, selecciones de marcador de posición, etc. También admite scripts SASS que ofrecen un shell interactivo para la programación junto con soporte para diferentes variables, tipos de datos, operación, función, interpolación, etc. El proceso de instalación también es muy fácil de usar. realizar. Agregando todas sus características, SASS proporciona una plataforma excepcionalmente excelente que funciona con el diseño web y otros.

Artículos recomendados

Esta ha sido una guía para instalar SASS. Aquí discutimos el proceso paso a paso para instalar SASS. También puede consultar nuestros otros artículos sugeridos para obtener más información:

  1. Guía completa para instalar .NET
  2. ¿Cómo instalar PostgreSQL?
  3. Diferentes pasos para instalar el mecanografiado
  4. Cómo instalar Appium

Categoría:

Desarrollo de software