/**********************************************************************************************/
/*** Installer Ruby ***/
/*** Mots clés : Ruby ***/
/*** http://sass-lang.com/guide ***/
/**********************************************************************************************/
Installer Ruby :
Environnement Windows 10 :
1. télécharger Ruby sur https://www.ruby-lang.org
2. installer Ruby après avoir désarchivé les fichiers
→ cela va créer un répertoire "C:/Ruby23-x64"
3. une fois fait, taper la commande suivante :
> gem update --system
/**********************************************************************************************/
/*** Installer Sass et Compass ***/
/*** Mots clés : Ruby, Sass, Compass ***/
/*** Compass peut être installé tout seul (sans installer Sass auparavant ***/
/*** http://compass-style.org/install/ ***/
/**********************************************************************************************/
Installer SASS :
Environnement Windows 10 :
1. installer Sass en faisant :
> gem install sass
→ normalement tu obtiens un message de succès de type "1 gem installed"
2. créer sur votre pc un répertoire sass (ex: c:\sass)
3. dans windows ce répertoire créer un répertoire "css", un répertoire "scss" et un fichier index.html
4. dans l'invite, va dans ton répertoire est tape :
> sass -–watch scss:css
→ maintenant à chaque mise à jour de tes fichiers .scss, le fichier .css sera automatiquement généré
5. Installer bootstrap-sass :
> gem install bootstrap-sass
Installer juste un environnement Sass (sans bootstrap) :
1. création de mon projet nommé "monprojet" (d:/tools/monprojet/)
2. aller dans ton répertoire projet et taper :
> compass create
→ cela va générer des répertoires et des fichiers dans ton dossier projet
→ pas de bootstrap
→ pour importer les nouveaux styles dans ton projet :
Installer COMPASS et Bootstrap (librairies de mixins) :
1. création automatique d'un répertoire projet
> compass create monprojet -r bootstrap-sass --using bootstrap
→ ça va créer un répertoire "monprojet" avec les fichiers bootstrap dedans
2. importer les styles dans le index.html :
/**********************************************************************************************/
/*** Commandes Compass ***/
/**********************************************************************************************/
Aide :
> compass help
Compiler :
> compass compile
Écouter ton projet :
> compass watch
Supprimer les fichiers CSS générés :
> compass clean
Modifier votre CSS
1. ouvrir /sass/screen.scss
2. ajouter du code CSS, par exemple : .agence { top: -0.5em; }
3. visualiser la modification dans /stylesheets/screen.css et ça s'est juste contenté de le mettre bien en forme :
.agence {
top: -0.5em;
}
/**********************************************************************************************/
/*** Debug Compass ***/
/*** En cas de problème ***/
/**********************************************************************************************/
→ de mon côté ça n'a pas marché tout de suite.
1. le proxy de mon entreprise a bloqué l'installation.
2. il a fallu que je me position dans le répertoire c:\Ruby\bin\
/**********************************************************************************************/
/*** bower ***/
/*** automatiser un maximum de tâches ***/
/*** ex: importer tous les composants un par un ***/
/*** https://www.sitepoint.com/bootstrap-sass-installation-and-customisation/ ***/
/**********************************************************************************************/
1. Installer nodejs via le site nodejs (.exe)
2. Installer Git via http://git-scm.com/downloads
> npm install -g bower
3. Se positionner dans son répertoire de dev (ex: D:\tools\sass\):
> bower install bootstrap-sass
4. Aller dans le répertoire \bower_components\bootstrap-sass\assets\stylesheets
- Dupliquer _bootstrap.scss et le renommer en _bootstrap-custom.scss
- Éditer le fichier custom et commenter les composants dont tu n'as pas besoin.
5. Créer à la racine de votre projet 2 répertoires : /sass et /stylesheet
6. Copier dans le répertoire /sass _variables.scss et le renommer en _customVariables.scss
7. Créer un fichier vide _custom.scss dans le répertoire /sass
8. Créer un fichier vide apps.scss dans le répertoire /sass
@import "customVariables";
@import "../bower_components/bootstrap-sass/assets/stylesheets/bootstrap";
@import "../bower_components/bootstrap-sass/assets/stylesheets/bootstrap-compass";
@import "custom";
9. Ouvrir Ruby cmd
> sass sass/app.scss stylesheets/app.css
→ Un fichier app.css est créé dans le répertoire "stylesheets"
10. Créer à la racine de votre projet un fichier index.html
/*** Avancé ***/
Dans le fichier .bowerrc, spécifier le répertoire des composants de bower ainsi que le nom du json
{
"directory": "le-bricoleur/components/",
"json": "config.json"
}
→ à l'installation, les fichiers seront placés à l'endroit spécifié
Dans le projet, taper :
> bower init
→ génération de bower.json
> npm init
→ génération de package.json (dépendence du projet)
> npm install gulp -g --save-dev
→ met à jour le fichier package.json
> npm install gulp-sass --save-dev
→ module sass
> npm install gulp-util --save-dev
→ module qui permet afficher messages formatés
créer fichier à la racine gulpfile.js
// créer une variable gulp
var gulp = require('gulp');
var gutil = require('gulp-util');
var sass = require('gulp-sass');
gulp.task('test', function() {
return gutil.log(gutil.colors.yellow('bonjour'))
});
// path
var ressources = './app/ressources/';
var sassDir = ressources + 'sass/'; // dans /app/ressources/sass // 2. dossier sass à créer
gulp.task('styles', function() {
return gulp.src(sassDir + 'main.scss') // 1. fichier à créer soi meme
.pipe(sass(
{
outputStyle: "nested"
}
).on('error', sass.logError))
.pipe(gulp.dest('./web/css/'));
})
→ compile avec sass
> gulp test
→ executer la commande
> gulp styles // executer le script
créer index.html