Utilisation de Sass

SASS est plus puissant et stable qui fournit de la puissance au langage de base en utilisant l'extension de CSS. Vous pouvez utiliser SASS de trois manières différentes -

  • En tant qu'outil de ligne de commande
  • En tant que module Ruby
  • En tant que plugin pour le framework d'activation de rack

Si vous utilisez SASS sur Windows, vous devez installer Rubypremière. Pour plus d'informations sur l'installation de Ruby, reportez-vous au chapitre Installation de SASS .

Le tableau suivant montre les commandes, qui sont utilisées pour exécuter le code SASS -

S. Non. Commande et description
1

sass input.scss output.css

Il est utilisé pour exécuter le code SASS à partir de la ligne de commande.
2

sass --watch input.scss:output.css

Il informe SASS de surveiller le fichier et de mettre à jour le CSS chaque fois que le fichier SASS change.
3

sass --watch app/sass:public/stylesheets

Il est utilisé pour surveiller tout le répertoire, si SASS contient de nombreux fichiers dans un répertoire.

Plugin Rack / Rails / Merb

Rackest une interface de serveur Web, qui est utilisée pour développer des applications Web dans Ruby. Pour plus d'informations sur Rack, visitez simplement ce lien .

Vous pouvez activer le SASS dans le Rails 3 version utilisant le environment.rb dossier présent sous le configdossier. Activez le SASS pour les rails 3 en utilisant le code suivant -

config.gem "sass"

Vous pouvez utiliser la ligne suivante pour le Gemfile pour les Rails 3 (et version supérieure), comme -

gem "sass"

Railsest un framework Web open source qui utilise des standards Web tels que JSON, HTML, CSS et JavaScript pour afficher l'interface utilisateur. Pour travailler avec Rails, vous devez avoir une connaissance de base de Ruby et de la programmation orientée objet. En savoir plus sur le framework on Rails ici .

Si vous souhaitez activer le SASS dans Rack application, ajoutez les lignes suivantes à la config.ru fichier, qui est présent dans le répertoire racine de l'application -

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

Merbest un framework d'application Web, qui offre vitesse et modularité à Rails. Pour en savoir plus sur Merb, ouvrez simplement ce lien .

Vous pouvez activer le SASS dans Merb en ajoutant la ligne suivante au config/dependencies.rb fichier -

dependency "merb-haml"

Mise en cache

SASS met en cache des documents tels que des modèles et des partiels, qui peuvent être réutilisés sans les analyser, sauf s'ils ont été modifiés. Il accélère la compilation des fichiers SASS et fonctionne encore mieux lorsque les modèles sont divisés en fichiers séparés, qui sont tous importés dans un seul gros fichier. Si vous supprimez les fichiers mis en cache, ils seront à nouveau générés lors de la prochaine compilation.

Options

Vous pouvez définir les options dans le fichier environment.rb de Rails ou dans le fichier config.ru de l'application Rack en utilisant la ligne suivante -

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

Vous pouvez également définir des options dans le fichier init.rb de Merb en utilisant la ligne suivante -

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

Certaines options sont disponibles avec SASS et SCSS, comme décrit dans le tableau ci-dessous -

S. Non. Option et description
1

:style

Il affiche le style de la sortie.
2

:syntax

Vous pouvez utiliser la syntaxe indentée pour sass et la syntaxe d'extension CSS pour scss .
3

:property_syntax

Il utilise une syntaxe indentée pour utiliser les propriétés. Si ce n'est pas correct, une erreur sera générée. Par exemple, considérez "background: # F5F5F5" dans lequel background est un nom de propriété et # F5F5F5 est sa valeur de propriété. Vous devez utiliser deux points après le nom de la propriété.
4

:cache

Il accélère la compilation des fichiers SASS. Il est défini sur true par défaut.
5

:read_cache

Il lit uniquement les fichiers SASS si le cache n'est pas défini et si read_cache est défini.
6

:cache_store

Il peut être utilisé pour stocker et accéder au résultat mis en cache en le définissant sur une instance de Sass :: CacheStores :: Base .
sept

:never_update

Il ne doit jamais mettre à jour le fichier CSS si les fichiers de modèle changent. Par défaut, il est défini sur false.
8

:always_update

Il doit mettre à jour le fichier CSS chaque fois que les fichiers de modèle changent.
9

:always_check

Il devrait vérifier les mises à jour chaque fois que le serveur démarre. Il recompilera et écrasera le fichier CSS, s'il y a une mise à jour dans le fichier modèle SASS.
dix

:poll

Il utilise le backend d'interrogation pour Sass :: Plugin :: Compiler # watch (qui surveille le modèle et la mise à jour des fichiers CSS) en le définissant sur true.
11

:full_exception

Il affiche la description de l'erreur chaque fois qu'une exception se produit dans le code SASS dans le fichier CSS généré. Il affiche un numéro de ligne où une erreur s'est produite avec la source dans le fichier CSS.
12

:template_location

Il fournit le chemin du répertoire de modèles dans l'application.
13

:css_location

Il fournit le chemin d'accès aux feuilles de style CSS dans l'application.
14

:unix_newlines

Il fournit des retours à la ligne de style Unix lors de l'écriture de fichiers en le définissant sur true.
15

:filename

Il s'agit du nom du fichier affiché et utilisé pour signaler les erreurs.
16

:line

Il spécifie la première ligne du modèle SASS et affiche les numéros de ligne des erreurs.
17

:load_paths

Il est utilisé pour charger les chemins du modèle SASS qui sont inclus à l'aide de la directive @import .
18

:filesystem_importer

Il est utilisé pour importer des fichiers à partir d'un système de fichiers qui utilise la sous-classe Sass :: Importers :: Base pour gérer les chemins de chargement de chaînes.
19

:sourcemap

Il génère des cartes sources qui indiquent au navigateur de trouver les styles SASS. Il utilise trois valeurs -

  • :auto- Il contient des URI relatifs. S'il n'y a pas d'URI relatif, utilise alors l'URI "file:".

  • :file - Il utilise des URI "file:", qui fonctionnent localement, pas sur un serveur distant.

  • :inline - Il contient du texte source dans la carte source qui est utilisé pour créer de gros fichiers de carte source.
20

:line_numbers

Il affiche le numéro de ligne des erreurs signalées dans le fichier CSS en le définissant sur true.
21

:trace_selectors

Il aide à tracer les sélecteurs d'importations et de mixins lorsqu'il est défini sur true.
22

:debug_info

Il fournit des informations de débogage du fichier SASS en utilisant le numéro de ligne et le fichier lorsqu'il est défini sur true.
23

:custom

Il met les données à la disposition des fonctions SASS dans les applications séparées.
24

:quiet

Il désactive les avertissements en le définissant sur true.

Sélection de la syntaxe

Vous pouvez déterminer la syntaxe que vous utilisez dans le modèle SASS à l'aide de l'outil de ligne de commande SASS. Par défaut, SASS utilise une syntaxe indentée qui est une alternative à la syntaxe SCSS basée sur CSS. Vous pouvez utiliser le programme de ligne de commande SCSS, qui est similaire au programme SASS, mais par défaut, il considère que la syntaxe est SCSS.

Encodages

SASS utilise le codage de caractères des feuilles de style en spécifiant les spécifications CSS suivantes -

  • Tout d'abord, il vérifie l'octet Unicode, la prochaine déclaration @charset , puis l'encodage de la chaîne Ruby.

  • Ensuite, si rien n'est défini, il considère le codage du jeu de caractères comme UTF-8 .

  • Déterminez explicitement le codage des caractères à l'aide de la déclaration @charset . Utilisez simplement "@charset encoding name" au début de la feuille de style et SASS supposera qu'il s'agit du codage de caractères donné.

  • Si le fichier de sortie de SASS contient des caractères non ASCII, il utilisera la déclaration @charset .