slam4:richclient:css:sass [SlamWiki 2.1]

Lien vers cette vue comparative

--- slam4:richclient:css:sass [2015/01/03 19:22] – [Configuration d'Eclipse] jcheron
+++ slam4:richclient:css:sass [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 1: / Ligne 1: @@
 ====== Sass ======
+[[http://en.wikipedia.org/wiki/Sass_%28stylesheet_language%29|Sass]] est une technologie permettant d'intégrer variables, fonctions, opérateurs, imports et héritage dans l'élaboration des feuilles de style, via un langage de script ([[http://sass-lang.com/guide|sass ou scss]]).
 ===== Intégration à Eclipse =====
@@ Ligne 34: / Ligne 35: @@
   - Aller dans  Ordinateur -> Propriétés -> Paramètres systèmes avancés -> Variables d'environnement
   - Ajouter une nouvelle variable système :
-    - Variable: SSL_CERT_FILE
+    - Variable: **SSL_CERT_FILE**
-    - Valeur : C:\RubyXXX-XX\cacert.pem
+    - Valeur : **C:\RubyXXX-XX\cacert.pem**
 <html></div></html>
@@ Ligne 51: / Ligne 52: @@
   * Créer un projet (Static web project, ou java project)
+  * Créer un dossier css
   * Créer un dossier scss et créer le fichier de test suivant :
@@ Ligne 62: / Ligne 64: @@
 }
 </sxh>
 Pour permettre la compilation automatique des fichiers scss en css dans Eclipse :
-Afficher les propriétés du projet et activer l'élément **Builders** :
+  - Afficher les propriétés du projet et activer l'élément **Builders** :
+  - Choisir **New** et entrez les valeurs suivantes :
-Choisir **New** et entrez les valeurs suivantes :
+{{:slam4:richclient:css:builderseclipse1.png?600|}}
-{{:slam4:richclient:css:builderseclipse1.png?500|}}
+|Nom du Builder | sass (ou autre) |
+|Location |<sxh bash;gutter:false>C:\{RubyFolder}\bin\compass.bat</sxh> |
+|Working directory |<sxh bash;gutter:false>${project_loc}</sxh> |
+|Arguments |<sxh bash;gutter:false>
+compile --sass-dir "${project_loc}/scss" --css-dir "${project_loc}/css" --javascripts-dir "${project_loc}/js" --images-dir ${project_loc}/img"
+</sxh> |
-//TODO
+  - Dans l'onglet Refresh, sélectionner le dossier contenant les ressources scss à compiler
+  - Dans l'onglet Build options, cocher **During autoBuild**
+Compiler votre projet (Build project), ou activez l'autobuild :\\
+Le dossier **css** doit maintenant contenir le fichier test.css suivant :
+<sxh css;title:test.css>
+/* line 4, ../scss/main.scss */
+body {
+  font: 100% Helvetica, sans-serif;
+  color: #333;
+}
+</sxh>
 [[http://sass-lang.com/guide]]