Usando Sass

SASS es más potente y estable que proporciona potencia al lenguaje básico mediante el uso de la extensión de CSS. Puede utilizar SASS de tres formas diferentes:

  • Como herramienta de línea de comandos
  • Como módulo Ruby
  • Como complemento para el marco de habilitación de Rack

Si está utilizando SASS en Windows, debe instalar Rubyprimero. Para obtener más información sobre la instalación de Ruby, consulte el capítulo Instalación de SASS .

La siguiente tabla muestra los comandos que se utilizan para ejecutar el código SASS:

S. No. Comando y descripción
1

sass input.scss output.css

Se utiliza para ejecutar el código SASS desde la línea de comandos.
2

sass --watch input.scss:output.css

Le informa a SASS que observe el archivo y actualice el CSS cada vez que cambie el archivo SASS.
3

sass --watch app/sass:public/stylesheets

Se utiliza para observar el directorio completo, si SASS contiene muchos archivos en un directorio.

Complemento Rack / Rails / Merb

Rackes una interfaz de servidor web, que se utiliza para desarrollar aplicaciones web en Ruby. Para obtener información sobre Rack, visite este enlace .

Puede habilitar el SASS en el Rails 3 versión usando el environment.rb archivo presente bajo el configcarpeta. Habilite SASS para Rails 3 usando el siguiente código:

config.gem "sass"

Puede usar la siguiente línea para el Gemfile para Rails 3 (y la versión superior), como:

gem "sass"

Railses un marco web de código abierto que utiliza estándares web como JSON, HTML, CSS y JavaScript para mostrar la interfaz de usuario. Para trabajar con Rails, debe tener un conocimiento básico de Ruby y programación orientada a objetos. Obtenga más información sobre el marco de on Rails aquí .

Si desea habilitar el SASS en Rack aplicación, agregue las siguientes líneas a la config.ru archivo, que está presente en el directorio raíz de la aplicación -

require 'sass/plugin/rack'
use Sass::Plugin::Rack

Merbes un marco de aplicación web, que proporciona velocidad y modularidad a Rails. Para saber más sobre Merb, simplemente abra este enlace .

Puede habilitar el SASS en Merb agregando la siguiente línea al config/dependencies.rb archivo -

dependency "merb-haml"

Almacenamiento en caché

SASS almacena en caché documentos como plantillas y parciales, que se pueden reutilizar sin analizarlos a menos que hayan cambiado. Hace que la compilación de archivos SASS sea más rápida y funciona incluso mejor cuando las plantillas se dividen en archivos separados, que se importan todos en un archivo grande. Si elimina los archivos en caché, se volverán a generar la próxima vez que los compile.

Opciones

Puede configurar las opciones en el archivo environment.rb de Rails o en el archivo config.ru de la aplicación Rack usando la siguiente línea:

Sass::Plugin.options[:style] = :compact

También puede configurar opciones en el init.rb archivo de Merb utilizando la siguiente línea -

Merb::Plugin.config[:sass][:style] = :compact

Hay algunas opciones disponibles con SASS y SCSS como se describe en la tabla que se muestra a continuación:

S. No. Opción y descripción
1

:style

Muestra el estilo de la salida.
2

:syntax

Puede usar sintaxis con sangría para sass y sintaxis de extensión CSS para scss .
3

:property_syntax

Utiliza sintaxis con sangría para hacer uso de propiedades. Si no es correcto, arrojará un error. Por ejemplo, considere "background: # F5F5F5" en el que background es un nombre de propiedad y # F5F5F5 es su valor de propiedad. Debe utilizar dos puntos después del nombre de la propiedad.
4

:cache

Acelera la compilación de archivos SASS. Se establece en verdadero de forma predeterminada.
5

:read_cache

Solo lee archivos SASS si la caché no está configurada y read_cache está configurada.
6

:cache_store

Se puede usar para almacenar y acceder al resultado en caché configurándolo en una instancia de Sass :: CacheStores :: Base .
7

:never_update

Nunca debería actualizar el archivo CSS si los archivos de plantilla cambian. De forma predeterminada, se establece en falso.
8

:always_update

Debería actualizar el archivo CSS cada vez que cambien los archivos de plantilla.
9

:always_check

Debe buscar las actualizaciones cada vez que se inicia el servidor. Volverá a compilar y sobrescribirá el archivo CSS, si hay una actualización en el archivo de plantilla SASS.
10

:poll

Utiliza el backend de sondeo para Sass :: Plugin :: Compiler # watch (que observa la plantilla y la actualización de los archivos CSS) configurándolo en verdadero.
11

:full_exception

Muestra la descripción del error cada vez que ocurre una excepción en el código SASS dentro del archivo CSS generado. Muestra un número de línea donde ocurrió un error junto con la fuente en el archivo CSS.
12

:template_location

Proporciona la ruta para el directorio de plantillas en la aplicación.
13

:css_location

Proporciona la ruta para las hojas de estilo CSS en la aplicación.
14

:unix_newlines

Proporciona nuevas líneas al estilo Unix al escribir archivos configurándolo en verdadero.
15

:filename

Es el nombre del archivo que se muestra y se utiliza para informar errores.
dieciséis

:line

Especifica la primera línea de la plantilla SASS y muestra los números de línea para los errores.
17

:load_paths

Se utiliza para cargar las rutas de la plantilla SASS que se incluyen mediante la directiva @import .
18

:filesystem_importer

Se utiliza para importar archivos desde el sistema de archivos que usa la subclase Sass :: Importers :: Base para manejar rutas de carga de cadenas.
19

:sourcemap

Genera mapas de origen que instruyen al navegador a encontrar los estilos SASS. Utiliza tres valores:

  • :auto- Contiene URI relativos. Si no hay un URI relativo, entonces usa "file:" URI.

  • :file - Utiliza "file:" URI, que funcionan localmente, no en un servidor remoto.

  • :inline - Contiene texto de origen en el mapa de origen que se utiliza para crear archivos de mapas de origen de gran tamaño.
20

:line_numbers

Muestra el número de línea de los errores informados en el archivo CSS configurándolo en verdadero.
21

:trace_selectors

Ayuda a rastrear los selectores de importaciones y mixins cuando se establece en verdadero.
22

:debug_info

Proporciona información de depuración del archivo SASS utilizando el número de línea y el archivo cuando se establece en verdadero.
23

:custom

Hace que los datos estén disponibles para las funciones SASS en las aplicaciones separadas.
24

:quiet

Deshabilita las advertencias configurándolo en verdadero.

Selección de sintaxis

Puede determinar qué sintaxis está utilizando en la plantilla SASS utilizando la herramienta de línea de comandos de SASS. De forma predeterminada, SASS utiliza una sintaxis con sangría que es una alternativa a la sintaxis SCSS basada en CSS. Puede usar el programa de línea de comandos SCSS, que es similar al programa SASS, pero por defecto, considera que la sintaxis es SCSS.

Codificaciones

SASS utiliza la codificación de caracteres de las hojas de estilo especificando las siguientes especificaciones CSS:

  • Primero, verifica el byte Unicode, luego la declaración @charset y luego la codificación de cadena Ruby.

  • A continuación, si no se establece nada, entonces considera la codificación del juego de caracteres como UTF-8 .

  • Determine la codificación de caracteres de forma explícita mediante la declaración @charset . Simplemente use "@charset encoding name" al comienzo de la hoja de estilo y SASS asumirá que esta es la codificación de caracteres dada.

  • Si el archivo de salida de SASS contiene caracteres que no son ASCII, usará la declaración @charset .