Ubuntu 16.04 / Comment installer Sass

Pour installer l'ancien Ruby Sass sur Ubuntu 16.04, vous pouvez utiliser le package ruby-sass depuis APT ou la gem sass depuis RubyGems. Cependant, Ruby Sass est une implémentation abandonnée, il ne devrait donc être envisagé que pour reproduire des projets existants, et pour de nouveaux environnements de développement, utilisez un système d'exploitation actuellement pris en charge et Dart Sass. L'installation via gem n'installe pas non plus le dernier Dart Sass.

Vérifiez la prise en charge de l'implémentation et du système d'exploitation avant l'installation

Sass est un outil qui convertit les feuilles de style écrites avec des variables et des règles imbriquées en CSS (Cascading Style Sheets). SCSS est une syntaxe de Sass similaire au CSS utilisant des accolades, et l'extension de fichier est .scss. Même avec le même nom de commande sass, Ruby Sass et Dart Sass sont des implémentations différentes.

Selon le guide officiel de Sass, Ruby Sass a atteint la fin de son support en 2019. Ubuntu 16.04 a également mis fin à son support standard et à la Maintenance de Sécurité Étendue (ESM), et en octobre 2026, un support de sécurité supplémentaire nécessite de vérifier les conditions du service complémentaire Legacy d'Ubuntu Pro. La portée du support du système d'exploitation peut être trouvée dans le guide d'Ubuntu 16.04 de Canonical.

Tout d'abord, sauvegardez votre code source et le CSS existant, et vérifiez les implémentations et les versions utilisées dans le projet Gemfile.lock, package.json, etc. Les deux anciennes méthodes d'installation ci-dessous sont des alternatives, il n'est donc pas nécessaire d'installer les deux.

Installer l'ancien Ruby Sass avec APT

Pour reproduire le paquet de distribution utilisé sur Ubuntu 16.04, vérifiez dans le terminal dans l'ordre suivant. Vous avez besoin d'un compte pouvant exécuter sudo et d'un accès à un dépôt APT qui fonctionne correctement.

sudo apt update
apt-cache policy ruby-sass
sudo apt install ruby-sass
sass --version

Le champ Candidate dans apt-cache policy affiche la version du package sélectionnée pour l'installation. S'il n'y a pas de candidats ou si la mise à jour échoue, ne supposez pas que l'installation est possible ; vérifiez d'abord les paramètres du dépôt, le réseau et le statut de support de l'environnement. N'ajoutez pas arbitrairement un dépôt ni ne désactivez la vérification des signatures simplement parce qu'un package ne peut pas être trouvé.

Après l'installation, la version de Sass devrait être affichée. La version du package de distribution peut différer de la version du gem, et Sass 3.4.23 (Selective Steve) des messages précédents est un exemple de sortie passée. Le résultat actuel de l'installation ne doit pas nécessairement correspondre à cette chaîne.

Installez la version héritée requise avec RubyGems

Ceci est une méthode pour examiner lorsqu'un projet existant nécessite la gem Ruby Sass. Ci-dessous se trouve un exemple spécifiant 3.7.4, et si le projet nécessite une version différente, donnez la priorité à cette exigence. Les informations RubyGems sur Sass 3.7.4 indiquent que Ruby 2.0.0 ou une version supérieure est requis, mais cette condition seule ne signifie pas que toutes les gems dépendantes peuvent être installées sur des versions plus anciennes de Ruby.

sudo apt update
sudo apt install ruby
ruby --version
gem --version
gem install --user-install sass -v 3.7.4 --no-document

--user-install est une option pour l'installer dans le répertoire des gems utilisateur plutôt que sur le système entier. Si un avertissement montre que l'exécutable ne peut pas être trouvé, suivez le guide RubyGems de l’installation utilisateur et ajoutez le bin du répertoire à votre PATH. Dans Bash, vous pouvez appliquer la commande suivante à votre terminal actuel puis vérifier.

export PATH="$(ruby -r rubygems -e 'print Gem.user_dir')/bin:$PATH"
sass --version

Si c'est un paramètre que vous continuerez à utiliser, ajoutez la ligne export ci-dessus à ~/.bashrc une fois et vérifiez-la dans un nouveau terminal. Pour revenir en arrière, supprimez la ligne ajoutée et rouvrez le terminal. Si l'installation échoue, vérifiez les gems dépendantes et la version de Ruby indiquées dans l'erreur, et reproduisez l'environnement basé sur le fichier lock stocké dans le projet et l'environnement à ce moment-là. Ne désactivez pas la vérification HTTPS pour résoudre les erreurs de certificat ou TLS.

Vérifiez l'installation en convertissant SCSS en CSS

Afficher simplement la version ne confirme pas la conversion réelle. Dans un dossier de travail vide séparé, créez un fichier style.scss et enregistrez-y l'intégralité du contenu ci-dessous. Dans un dossier contenant des fichiers existants, assurez-vous d'abord qu'il n'y a pas de conflit avec les noms de fichiers exemples existants.

$brand: #336699;

.notice {
  color: $brand;
  strong {
    font-weight: 700;
  }
}

Exécuter la commande suivante dans ce dossier générera style.css.

sass style.scss style.css

Le CSS généré devrait contenir les sélecteurs et valeurs ci-dessous. Selon l'implémentation et les paramètres du format de sortie, les espaces, sauts de ligne ou commentaires de source map peuvent varier.

.notice {
  color: #336699;
}

.notice strong {
  font-weight: 700;
}

Changez les valeurs de couleur et reconvertissez pour voir si les valeurs dans le CSS changent, confirmant la relation entre les fichiers d'entrée et de sortie. Revenir aux valeurs initiales et exécuter à nouveau restaurera l'état de l'exemple. La conversion Sass est le processus de création de fichiers CSS, et pour l'appliquer à une page web, vous devez charger le CSS de sortie dans le HTML correspondant.

Lorsque les commandes entrent en conflit ou que l'installation doit être annulée

Si sass: command not found apparaît après l'installation, vérifiez si l'installation a réussi et examinez le PATH. Si une version différente de celle attendue apparaît, voyez quel exécutable est sélectionné en premier—qu'il soit installé via APT, gem utilisateur ou un autre outil.

command -v sass
type -a sass
sass --version

Mettre le bin du gem utilisateur devant le PATH peut donner la priorité à cette commande. Dans les environnements avec des installations en double via APT et gem, ne vous fiez pas uniquement au numéro de version ; enregistrez également le chemin. Plutôt que de supprimer des fichiers de manière arbitraire, supprimez-les en utilisant l'outil de gestion utilisé pour l'installation.

• Pour revenir sur une installation APT, utilisez sudo apt remove ruby-sass. Avant d'exécuter, lisez la liste des éléments à supprimer et assurez-vous qu'ils ne sont pas utilisés par d'autres projets.
• Pour supprimer le gem utilisateur dans l'exemple ci-dessus, utilisez gem uninstall --user-install sass -v 3.7.4. Il n'est pas nécessaire de supprimer les autres versions ou dépendances partagées en masse.
• Si l'erreur est causée par une syntaxe SCSS moderne incompatible, une simple réinstallation peut ne pas la résoudre. Compilez avec l'implémentation requise par le projet, ou examinez le code pour passer à Dart Sass.

Passez à Dart Sass dans un nouvel environnement

L'implémentation de référence actuelle de Sass est Dart Sass. La documentation officielle d'installation vous guide pour installer une distribution autonome adaptée à votre système d’exploitation et à votre processeur, ou pour installer Sass avec npm. L’exemple npm dans cette section est à exécuter dans un environnement de développement séparé préparé avec des systèmes d'exploitation pris en charge et la version de Node.js requise par la version correspondante de Sass, et il ne suppose pas l'exécution sur le Node.js par défaut d'Ubuntu 16.04.

Une fois que Node.js et npm sont prêts, vous pouvez installer des dépendances de développement spécifiques au projet dans un nouveau dossier de projet avec la commande suivante. Lors de l'application à un projet existant, sauvegardez d'abord package.json et le fichier de verrouillage, puis vérifiez les paramètres de build existants.

npm init -y
npm install --save-dev sass
npx sass --version
npx sass style.scss style.css

Avant d'exécuter la dernière commande, vous devez enregistrer le style.scss de la section précédente dans le même dossier. npx sass utilise le Sass du projet local installé par cette procédure et peut différer de la commande et de la version globales sass. Vous pouvez vérifier le résultat de l'installation avec npm ls sass et le CSS généré. Les dépendances de développement ajoutées dans cet exemple peuvent être supprimées avec npm uninstall --save-dev sass.

Lors du transfert d'un ancien projet, comparez les résultats de la conversion sur une branche test ou une copie, et examinez les différences CSS et les avertissements avant de les appliquer. Vous pouvez consulter la commande et les options pour la conversion d'un seul fichier dans la documentation de ligne de commande de Dart Sass . L'installation de Ruby Sass et le passage au Dart Sass actuel sont des tâches distinctes.