var Phenix = function () {
Troll du Web depuis 1996

SASS


Un fichier sourcemap SASS pour Foundation

Un de mes collègues a trouvé une solution pour avoir un fichier source map quand on compile Foundation.

Son fichier fait d’autres trucs, je n’ai extrait que la partie source map.

On commence par installer gulp-sourcemap :

  1. npm install gulp-sourcemaps --save-dev

Ensuite on adapte le fichier gulpfile.js pour qu’il génère le sourcemap :

  1. var gulp = require('gulp');
  2. var $ = require('gulp-load-plugins')();
  3.  
  4. var sassPaths = [
  5. 'bower_components/foundation-sites/scss',
  6. 'bower_components/motion-ui/src'
  7. ];
  8.  
  9. gulp.task('sass', function() {
  10. return gulp.src('scss/app.scss')
  11. .pipe($.sourcemaps.init())
  12. .pipe($.sass({
  13. includePaths: sassPaths,
  14. outputStyle: 'compressed' // if css compressed **file size**
  15. }).on('error', $.sass.logError))
  16. .pipe($.autoprefixer({
  17. browsers: ['last 2 versions', 'ie >= 9']
  18. }))
  19. .pipe($.sourcemaps.write('../css'))
  20. .pipe(gulp.dest('css'));
  21. });
  22.  
  23. gulp.task('default', ['sass'], function() {
  24. gulp.watch(['scss/**/*.scss'], ['sass']);
  25. });

Sass-convert memo

Petit mémo pour la commande sass-convert qui permet de convertir un fichier CSS existant en fichier .scss (ou .sass, il suffit d’adapter le paramètre —to)

Convertir tout un répertoire de fichier css

  1. sass-convert --from css --to scss --trace -R .

Convertir un fichier

  1. sass-convert --from css --to scss --trace perso.css > perso.scss