[Résolu] SASS et Compass : besoin d'aide pour démarrer

Bonjour à tous,

Avant de commencer, je tiens d'abord à remercier les membres du forum mais également les webmaster pour leur tuto très clair. Il m'arrive souvent de parcourir les articles et les sujets du forum pour y trouver mes réponses (parce que la plupart du temps, tout est dit, c'est propre, c'est clair, et c'est précis!).
C'est donc naturellement que je prend la décision de m'inscrire sur ce site afin de venir réclamer votre aide, à mon tour.

Voilà, maintenant que j'estime avoir atteins un bon niveau en css, je me suis mise en tête de créer des templates css pour un projet futur. Ce faisant, en réflechissant je me suis retrouvé confronté un problème : les variables dans le css ou j'avais trouvé la solution auprès de Sass et Compass . (je passe outre la possibilité de pouvoir utiliser les constantes php).

J'avais déjà entendu parler de Sass et Compass (ainsi que de Less) mais je n'avais jamais mis le nez dedans, jusqu'à dernièrement ou en voyant des démonstrations ça m'a semblé tout simplement génial!
Me voilà donc avec un compass.app d'installer sur l'ordi (car les lignes de commande c'est pas ma tasse de thé - et je suis sous windows). Ruby est également installé.
Je pense avoir fait toutes les installations nécessaire, maintenant et c'est là que j'ai besoin de votre aide, je voudrais mettre ça en local;
J'ai donc easyphp, j'ai créé un nouveau projet à l'intérieur du "weblocal". Créer un fichier index.php et fait un simple test avec deux div, un id. Je suis aller dans "screen.scss" pour y mettre :

@import "compass/reset";
#rouge{width: 200px;height: 200px;border: 1px solid #ff8800;}

Je vois deux choses : l'icone de compass devrait en orange pour indiqué qu'il regarde : ce qui n'est pas le cas. J'ai beau lui dire de regardé il ne le fait pas. Pourtant lorsque je créer un nouveau projet sur le bureau, là pas de problème.
Je pensais qu'il compilé directement le fichier css dans le dossiers stylesheets, mais ce dossier demeure vide (je pense que c'est lié au premier point).

Enfin, et je pense pas que ce soit lié mais que ça va être génant pour la suite. Mon url local n'est pas 127.0.1.1. Ou peut-on le modifié ? (Dans easyphp aucun pb, par contre avec compass je sais pas comment m'y prendre).

Voilà, les informations sur compass et sass reste relativement rare sur le net. Les tuto sont payant ou pas encore en ligne. Les aides en français sont aussi limité, c'est pourquoi j'espère que je pourrais trouvé quelqu'un d'ici utilisant Sass et Compass.

Pour ceux qui comme moi débute, j'ai trouvé ce lien très interessant : http://compass.kkbox.com/doc/getting_started_with_compassapp.html

Merci d'avance pour votre aide

Edit : je viens de me rendre compte de quelque chose :
Lorsque je créer un nouveau projet compass sur mon bureau, les dossiers sass et stylesheets ont par defaut des fichier ie, print et screen .
Lorsque je créé de la même façon un nouveau projet compass dans mon local, seul le dossiers sass contient ces trois fichier. Le dossier stylesheets reste vide. Peut-être qu'en résolvant ce problème ça me permettrait de pouvoir utiliser sass et compass...En tout cas, c'est dans ce sens que s'oriente mes recherches.
Modifié par J_B (14 Mar 2015 - 18:53)

Je vois que mes questions sont peut-être difficile :\.
Moi-même j'y comprend pas grand chose !!
Alors comme j'ai déjà écrit un gros pavé, je me permet de séparer mon edit.

Là, j'ai remarqué l'erreur suivante :
Error: File to import not found or unreadable: compass/reset.

Voici mon screen.scss :

@import "compass/reset";

Autrement dit, y-a rien. L'erreur est la même si je met juste "compass";

Et voici mon build , sur ST3

    "cmd": [
        "sass",
        "--update",
        "--stop-on-error",
        "--no-cache",
        "--style", "compressed",
        "--sourcemap=none",
        "--load-path", "${file_path}",
        "$file:${file_path}/../css/${file_base_name}.min.css",

        "&",

        "sass",
        "--update",
        "--stop-on-error",
        "--no-cache",
        "--sourcemap=none",
        "--load-path", "${file_path}",        
        "$file:${file_path}/../css/${file_base_name}.css"
    ],

    "selector": "source.scss",
    "line_regex": "Line ([0-9]+):",

    "osx":
    {
        "path": "/usr/local/bin:$PATH"
    },

    "windows":
    {
        "shell": "true"
    }

}

Entre temps stylesheets est devenu css

Bon... si quelqu'un passe par là, utilise sass, compass et ST3, je n'y verrai pas d'inconvenient pour tout reprendre à zero s'il le faut

Bien sur si je trouve la solution avant, je la donnerai.
Merci
ps: même si les lignes de commande ne sont "pas ma tasse de thé" en réalité c'est surtout parce que je n'ai pas encore trouvé le temps de me pencher dessus. Mais je ne suis pas contre une manipulation en ligne de commande s'il le faut.
Modifié par J_B (14 Mar 2015 - 23:45)

Désolé de ne pouvoir vous aider car j'utilise un task runner via Node.js (Grunt) pour réaliser ce genre de choses, ce qui me permet de ne pas dépendre d'un IDE (même si moi aussi j'utlise ST3). Mais si vous trouvez la solution ça m'intéresse moi aussi, pour mes petits projets.

Côté Ruby, en admettant que les dossiers scss et css soient au même niveau, vous pouvez taper directement dans le terminal à la racine des styles (merci @Victor) :

sass --watch sass:css -t compressed

Mais c'est relou car il faut le refaire à chaque redémarage (Grunt aussi, mais ça peut faire beaucoup plus de choses).

Bonjour,

Alors j'ai trouvé comment faire, et en fait c'est tout con. Le problème c'est quand cherchant sur internet, il y a une multitude de façon de faire (en fait j'en ai vu trois différente), pour demarrer avec sass et compass.
J'expose donc la mienne, avec Sublime Text 3. Comme c'est encore tout chaud dans ma tête, voici comment procéder :

-1/ Installer ruby => http://rubyinstaller.org/
-2/Taper dans l'invite de commande window les deux lignes suivantes :

gem install sass

Ceci va installer sass, vous pouvez verifié que ça a bien marché en écrivant sass -version

gem install compass

Ceci installe compass, vous pouvez également verifier que l'installation à bien marché avec compass -version
Voilà pour la partie installation des "composants"

Maintenant sur ST3 :
1/Je part du principe que vous avez déjà installé le package. Dans ce cas,
=> ctrl + shift + p => install
puis installer SASS (perso, j'ai installé tous les pluggins SASS sauf le build que voici ci-après)

2/Créer un fichier build pour ST3, vous allez sur Preferences > Browse Packages puis dans le dossier User/, et créer un fichier SASS.sublime-build contenant ce code :

{
    "cmd": [
        "sass",
        "--update",
        "--stop-on-error",
        "--no-cache",
        "--style", "compressed",
        "--sourcemap=none",
        "--load-path", "${file_path}",
        "$file:${file_path}/../css/${file_base_name}.min.css",

        "&",

        "sass",
        "--update",
        "--stop-on-error",
        "--no-cache",
        "--sourcemap=none",
        "--load-path", "${file_path}",        
        "$file:${file_path}/../css/${file_base_name}.css"
    ],

    "selector": "source.scss",
    "line_regex": "Line ([0-9]+):",

    "osx":
    {
        "path": "/usr/local/bin:$PATH"
    },

    "windows":
    {
        "shell": "true"
    }

}

Pour plus d'information je vous invite à lire le lien suivant : http://blog.smarchal.com/guide-installation-sass-avec-sublime-text-3

MISE EN ROUTE

Se mettre à la racine de son projet web, pour ma part je suis sur EASYPHP, donc je me place dans localweb. Pour les utilisateur de Wamp, ça sera www.
Je créer un dossier sass contenant le fichier style. scss
Je met à la racine un fichier index.php dans lequel je créer trois block histoire de tester si tout va bien.
Attention à l'url d'appel du fichier du css, donc voici mon fichier index.php

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>test sass</title>
	<link rel="stylesheet" href="./css/style.css">
</head>
<body>
	<div id="rouge"></div>
	<div id="bleu"></div>
	<div id="yellow"></div>
</body>
</html>

et le contenu du fichier scss :

$width: 200px;    
#rouge{width: $width;  height: 200px; border: 1px solid red;}
#yellow{width: $width; height: 200px; border:1px solid yellow; }
#bleu{width:$width; height:200px; border:1px solid blue;}

Bon voilà c'est très simplet, c'est juste pour tester si ça fonctionne.

On connect livereload à ST3 (là je part du principe qu'il est déjà installer, si ce n'est pas le cas, allez vite le faire c'est un gain de temps énorme ! )

On actualise le scss (deux fois pour le voir à l'écran, il y a surement moyen de faire que ça se fasse en une fois mais j'ai pas encore trouvé comment, si quelqu'un sait, merci de me l'expliquer );Et là, le build (visible avec un ctrl + B dans ST3) va créer un dossier css s'il n'existe pas déjà, dans lequel il va ajouter deux fichier du même nom que mon fichier scss, c'est à dire : style.css et style.min.css . Le premier étant un fichier css normal, le second le même compressé.

Voilà, je pense avoir fait le tour, j'espère que cette petit contribution pourra aider les personnes qui comme moi on galérer à démarrer avec Sass et Compass.

Et maintenant, il est temp de faire mumuse

Génial ! Merci pour le tuyaux.

a écrit :
On connecte Livereload à ST3 (là je pars du principe qu'il est déjà installé, si ce n'est pas le cas allez vite le faire, c'est un gain de temps énorme !)

Ça c'est certain (je l'utilise en corrélation avec Grunt). Coder sans ce truc là aujourd'hui c'est comme retourner à l'âge de pierre...
Modifié par Olivier C (16 Mar 2015 - 08:21)

Oui, c'est clair ! D'autant plus si on a la chance d'avoir deux ou trois écrans !

Bon il reste un détail à régler dans l'utilisation de compass : ce sont les @import, le chemin d'accès semble faux, et je cherche en vain ou modifier ça. Ou peut-être qu'il me manque le module.
Donc quand j'aurais trouvé je mettrais également la solution ici.

En tout cas J_B, si vous avez suffisamment de bouteille pour configurer les préférences utilisateur de votre ST, vous en aurez assez pour vous pencher sur Grunt ou encore Gulp.

Je ne vous en parle pas parce qu'ils sont les outils du moments chez les intégrateurs front-end, mais parce qu'ils font vraiment beaucoup de choses.

Avec un task runner on peut par exemple : démarrer des serveurs, utiliser des FTP (ça je n'arrive pas encore à le configurer), minifier les js et aussi les styles sass/scss (comme avec Ruby mais ici avec Node.js), on peut autopréfixer ces derniers APRÈS COUP avec Autoprefixer (c'est l'argument qui m'a fait passer à Grunt, plus besoin de maintenir des mixins sass sur ce point), utiliser Livereload (of course), faire des contrôles sur les fichiers js (jshint). Changer automatiquement une date dans un fichier une fois celui-ci modifié, etc...