Utilizzando Sass

SASS è più potente e stabile che fornisce potenza al linguaggio di base utilizzando l'estensione dei CSS. Puoi usare SASS in tre modi diversi:

  • Come strumento da riga di comando
  • Come modulo Ruby
  • Come plugin per Rack enable framework

Se stai usando SASS su Windows, devi installare Rubyprimo. Per ulteriori informazioni sull'installazione di Ruby, fare riferimento al capitolo Installazione di SASS .

La tabella seguente mostra i comandi utilizzati per eseguire il codice SASS:

S. No. Comando e descrizione
1

sass input.scss output.css

Viene utilizzato per eseguire il codice SASS dalla riga di comando.
2

sass --watch input.scss:output.css

Informa SASS di guardare il file e aggiornare il CSS ogni volta che il file SASS cambia.
3

sass --watch app/sass:public/stylesheets

Viene utilizzato per controllare l'intera directory, se SASS contiene molti file in una directory.

Plugin Rack / Rails / Merb

Rackè un'interfaccia per server web, che viene usata per sviluppare applicazioni web in Ruby. Per informazioni su Rack, visitare questo collegamento .

È possibile abilitare il SASS in Rails 3 versione utilizzando il environment.rb file presente sotto il configcartella. Abilita il SASS per Rails 3 utilizzando il codice seguente:

config.gem "sass"

Puoi usare la seguente riga per Gemfile per Rails 3 (e versioni successive), come -

gem "sass"

Railsè un framework web open source che utilizza standard web come JSON, HTML, CSS e JavaScript per la visualizzazione dell'interfaccia utente. Per lavorare con Rails, devi avere una conoscenza di base di Ruby e della programmazione orientata agli oggetti. Ulteriori informazioni sul framework on Rails qui .

Se vuoi abilitare il SASS in Rack applicazione, aggiungere le seguenti righe al file config.ru file, che è presente nella directory principale dell'app -

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

Merbè un framework per applicazioni web, che fornisce velocità e modularità a Rails. Per saperne di più su Merb, basta aprire questo link .

È possibile abilitare il SASS in formato Merb aggiungendo la riga seguente al file config/dependencies.rb file -

dependency "merb-haml"

Caching

SASS memorizza nella cache documenti come modelli e parziali, che possono essere riutilizzati senza analizzarli a meno che non siano stati modificati. Rende la compilazione dei file SASS più veloce e funziona ancora meglio quando i modelli sono divisi in file separati, che vengono tutti importati in un unico file di grandi dimensioni. Se elimini i file memorizzati nella cache, verranno generati di nuovo alla successiva compilazione.

Opzioni

È possibile impostare le opzioni nel file environment.rb di Rails o nel file config.ru dell'applicazione Rack utilizzando la riga seguente:

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

È inoltre possibile impostare le opzioni nel init.rb file Merb utilizzando la seguente riga -

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

Sono disponibili alcune opzioni con SASS e SCSS come descritto nella tabella riportata di seguito:

S. No. Opzione e descrizione
1

:style

Visualizza lo stile dell'output.
2

:syntax

È possibile utilizzare la sintassi rientrata per sass e la sintassi dell'estensione CSS per scss .
3

:property_syntax

Usa la sintassi rientrata per utilizzare le proprietà. Se non è corretto, verrà generato un errore. Ad esempio, si consideri "background: # F5F5F5" in cui background è il nome di una proprietà e # F5F5F5 è il valore della proprietà. È necessario utilizzare i due punti dopo il nome della proprietà.
4

:cache

Accelera la compilazione dei file SASS. È impostato su true per impostazione predefinita.
5

:read_cache

Legge solo i file SASS se la cache non è impostata e read_cache è impostato.
6

:cache_store

Può essere utilizzato per archiviare e accedere al risultato memorizzato nella cache impostandolo su un'istanza di Sass :: CacheStores :: Base .
7

:never_update

Non dovrebbe mai aggiornare il file CSS se i file del modello cambiano. Per impostazione predefinita è impostato su false.
8

:always_update

Dovrebbe aggiornare il file CSS ogni volta che i file del modello cambiano.
9

:always_check

Dovrebbe controllare gli aggiornamenti ogni volta che il server viene avviato. Ricompilerà e sovrascriverà il file CSS, se c'è un aggiornamento nel file modello SASS.
10

:poll

Utilizza il backend di polling per Sass :: Plugin :: Compiler # watch (che controlla il modello e l'aggiornamento dei file CSS) impostandolo su true.
11

:full_exception

Visualizza la descrizione dell'errore ogni volta che si verifica un'eccezione nel codice SASS all'interno del file CSS generato. Visualizza un numero di riga in cui si è verificato un errore insieme alla sorgente nel file CSS.
12

:template_location

Fornisce il percorso per la directory dei modelli nell'applicazione.
13

:css_location

Fornisce il percorso per i fogli di stile CSS nell'applicazione.
14

:unix_newlines

Fornisce newline in stile Unix durante la scrittura di file impostandolo su true.
15

:filename

È il nome del nome del file visualizzato e utilizzato per la segnalazione degli errori.
16

:line

Specifica la prima riga del modello SASS e visualizza i numeri di riga per gli errori.
17

:load_paths

Viene utilizzato per caricare i percorsi per il modello SASS che sono inclusi utilizzando la direttiva @import .
18

:filesystem_importer

Viene utilizzato per importare file dal file system che utilizza la sottoclasse Sass :: Importers :: Base per gestire i percorsi di caricamento delle stringhe.
19

:sourcemap

Genera mappe sorgente che istruiscono il browser a trovare gli stili SASS. Utilizza tre valori:

  • :auto- Contiene URI relativi. Se non è presente alcun URI relativo, utilizza "file:" URI.

  • :file - Utilizza "file:" URI, che funzionano localmente, non su server remoto.

  • :inline - Contiene il testo di origine nella mappa di origine che viene utilizzato per creare file di mappa di origine di grandi dimensioni.
20

:line_numbers

Visualizza il numero di riga per gli errori riportati nel file CSS impostandolo su true.
21

:trace_selectors

Aiuta a tracciare i selettori di importazioni e mixin quando è impostato su true.
22

:debug_info

Fornisce informazioni di debug del file SASS utilizzando il numero di riga e il file quando è impostato su true.
23

:custom

Rende i dati disponibili per le funzioni SASS nelle applicazioni separate.
24

:quiet

Disabilita gli avvisi impostandoli su true.

Selezione della sintassi

È possibile determinare la sintassi che si sta utilizzando nel modello SASS utilizzando lo strumento della riga di comando SASS. Per impostazione predefinita, SASS utilizza la sintassi rientrata che è un'alternativa alla sintassi SCSS basata su CSS. È possibile utilizzare il programma della riga di comando SCSS, che è simile al programma SASS, ma per impostazione predefinita considera la sintassi come SCSS.

Codifiche

SASS utilizza la codifica dei caratteri dei fogli di stile specificando le seguenti specifiche CSS:

  • Per prima cosa, controlla il byte Unicode, la successiva dichiarazione @charset e quindi la codifica della stringa Ruby.

  • Successivamente, se non è impostato nulla, considera la codifica del set di caratteri come UTF-8 .

  • Determina la codifica dei caratteri in modo esplicito utilizzando la dichiarazione @charset . Usa semplicemente "@charset encoding name" all'inizio del foglio di stile e SASS presumerà che questa sia la codifica dei caratteri data.

  • Se il file di output di SASS contiene caratteri non ASCII, utilizzerà la dichiarazione @charset .