Différences

Ci-dessous, les différences entre deux révisions de la page.

--- slam4:richclient:css:sass [2015/01/03 02:50] – [Ruby & Compass] 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>
-==== Compilation des fichiers scss dans Eclipse ====
+==== Configuration d'Eclipse ====
-Pour permettre la compilation automatique des fichiers scss en css dans Eclipse :
+=== Association des fichiers scss à l'éditeur css ===
+Dans Window/preferences, ajouter les fichiers scss pour permettre leur ouverture par l'éditeur CSS d'eclipse
-Créer un projet (Static web project, ou java project)
+{{:slam4:richclient:css:fileassociationsscss.png?nolink&600|}}
-Créer un dossier scss et créer le fichier de test suivant :
+{{:slam4:richclient:css:contenttypesscss.png?nolink&600|}}
+=== Compilation des fichiers scss dans Eclipse ===
+  * 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 :
 <sxh css;title:test.scss>
@@ Ligne 55: / 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** :
+  - Choisir **New** et entrez les valeurs suivantes :
+{{:slam4:richclient:css:builderseclipse1.png?600|}}
+|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> |
+  - 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]]