Librairie scss incompatible ?

Bonjour
Quelqu'un peu t il m expliquer en quoi une librairie ( mixins ...) de fichiers scss serait compatible compass et pas sass ruby ou sass lib ? Dans l'article d Hugo Giraudel sur les librairies ; l'auteur de la librairie Susy ( Eric M suzanne) écrit en commentaire " Susy originally required Compass" . Pour moi une librairie est compatible si elle n 'utilise pas les mêmes noms qu'une librairie utilisée dans le projet.

Merci
Modifié par 75lionel (11 May 2016 - 21:57)

En ce qui concerne Ruby Sass et LibSass : Sass a été nativement conçu pour être compilé en Ruby, il bénéficie de toutes les fonctionnalités de base. LibSass est une adaptation permettant une compilation en c++, ce qui a pour bénéfice de permettre une rapidité de compilation accrue, mais certaines fonctionnalités Sass ne sont alors plus supportées, LibSass est donc bridé.

Compass, lui, est une extension étendant les possibilités de Sass, donc les mixins développées avec cette extension ne fonctionnerons forcément pas sur un Sass vanilla.

Mais comme toujours : la théorie c'est bien, expérimenter c'est mieux.
Modifié par Olivier C (07 May 2016 - 08:43)

donc en résumé ; le problème vient du fait que les moteurs sass en ruby est plus avancé en terme de fonctionnalités ( pas rapidité) que la version C . L'information concernant les fonctionnalités manquantes semblent difficiles à trouver ou peu documenté sur le site officiel ?

il semble que la façon de nommer les choses sont imprécises si on ne va pas en profondeur dans l'étude de sass ( moteur C libsass , ruby sass compass , javascript LESS ) . Si on va sur le site de l installation compass ; le titre est " authoring framework" ( donc librairie) mais on remarque que compass est aussi un outil car à sa propre ligne commande "C:> compass " .

Enfin puisque de façon historique compass est implémenté en ruby , le portage vers C sous le nom de libsass se donne la possibilité d'utiliser le langage javascript avec nodesass et modules eyeglass .Un article détails l 'implementation d un module helloworld mais pas son utilisation ( ici ) .


préprocesseur ....... moteur ..............et................. librairie
sass ....................... ruby ...................................... v2/3 , singularity , neat/bourbon ,sass ,susy2 , breakpoint
compass ............. ruby+ ....................................compass ,susy 1 , breakpoint slicer ,
.......+ basé sur sass ..........................................
.......+ sous moteur js eyeglass ..........................singularity
LESS .....................javascript ..............................LESS HAt, LESS element , bootstrap

a noter que
1- bootstrap est historiquement basé sur (moteur/syntax ) LESS et est passé à SASS
2- l' outils prepros supporte beaucoups de moteur html, css ,image, js et "libsass" / ruby sass avec nombreuses librairies et outil de projet ( ftp , serveur http ....) et Angular mais pas ... pas typescript(ici) !!

3-bootstrap 3 ne supporte plus de nouveauté au contraire de la v4 ( en mai 2016)
4-susy maintenant indépendant de compass n utilisent pas la même version sass que compass !!!

Quelques questions et remarques :
0) c'est sur ; LESS et eyeglass est utile si la personne sait coder en js et pas en ruby :
1) singularity existe en version sass et eyeglass : quel en est l'intéret en dehors du cas 0 ?
2) dans quel cas en terme de fonctionnalités eye glass (js) est plus utile que l implémentation ruby (sass) ?
3) si le développeur connait Javascript pourquoi utiliser SASS (ruby) / eyeglass (js ) et pas LESS ( javascript "natif ") ?
4) une librairie compatible sass ( ruby) est elle toujours compatible compass ?
5) est il facile d installer ( oui) et faire fonctionner () gulp et libsass sous microsoft OS ( 8.1 64bit) sans avoir des problèmes ?

Merci
Modifié par 75lionel (08 May 2016 - 01:13)

75lionel a écrit :
5) est il facile d installer ( oui) et faire fonctionner () gulp et libsass sous microsoft OS ( 8.1 64bit) sans avoir des problèmes ?

Je faisais encore récemment tourner LibSass ou Ruby Sass sous OS X et je n'avais pas de problème (maintenant je suis passé sous Stylus). Exemple de config' pour l'un et l'autre :

var gulp = require('gulp'),
    // Et encore tout un tas de dépendances, notamment plumber, autoprefixer, sourcemaps...)
    // Il faut forcément commenter l'une des deux dépendances suivantes, sinon collision :
    //sass = require('gulp-sass'),
    sass = require('gulp-ruby-sass');

// @subsection Ruby Sass
// -----------------------------------------------------------------------------

// @link  https://www.npmjs.com/package/gulp-ruby-sass
 

var inputStyles = source + '/Styles/*.scss',
    autoprefixerOptions = { browsers: ['last 2 versions', '> 5%'] };

// Options :
// [1] Évite la colision des fichiers avec les autres tâches Ruby Sass
// [2] Mode de compression du fichier
// [3] Précision après la virgule pour les nombres décimaux
// [4] Pas de sourcemap via le plugin 'gulp-ruby-sass', les sourcemaps sont générées préférentiellement via le plugin 'gulp-sourcemaps' dédié à cette tâche

var inputStyles = source + '/Styles/*.scss';
gulp.task('styles', function() {
  return sass(inputStyles, {
        container: 'Styles',   // [1]
        style: 'compressed',   // [2]
        precision: 2,          // [3]
        sourcemap: false       // [4]
    })
    .pipe(plumber())
    .pipe(sourcemaps.init())
    .on('error', function(err) {
        console.error('Error!', err.message);
    })
    .pipe(autoprefixer(autoprefixerOptions))
    .pipe(sourcemaps.write('../Styles/Maps', {addComment: true}))
    .pipe(gulp.dest(source + '/Public/Styles'));
});

gulp.task('stylesexp', function() {
  return sass(inputStyles, {
        container: 'Expanded', // [1]
        style: 'expanded',     // [2]
        precision: 2,          // [3]
        sourcemap: false       // [4]
    })
    .pipe(plumber())
    .on('error', function(err) {
        console.error('Error!', err.message);
    })
    .pipe(autoprefixer(autoprefixerOptions))
    .pipe(gulp.dest(source + '/Public/Styles/Expanded'));
});


// @subsection LibSass
// -----------------------------------------------------------------------------

// @link  https://www.npmjs.com/package/gulp-sass
 

var inputStyles = source + '/Styles/*.scss',
   autoprefixerOptions = { browsers: ['last 2 versions', '> 5%'] };

gulp.task('styles', function() {
  return gulp
    .src(inputStyles)
    .pipe(plumber())
    .pipe(sourcemaps.init())
    .pipe(sass({ outputStyle: 'compressed' }).on('error', sass.logError))
    .pipe(sourcemaps.write('../Styles/Maps', {addComment: true}))
    .pipe(autoprefixer(autoprefixerOptions))
    .pipe(gulp.dest(source + '/Public/Styles'));
});
gulp.task('stylesexp', function() {
  return gulp
    .src(inputStyles)
    .pipe(plumber())
    .pipe(sass({ outputStyle: 'expanded' }).on('error', sass.logError))
    .pipe(autoprefixer(autoprefixerOptions))
    .pipe(gulp.dest(source + '/Public/Styles/Expanded'));
});

Exemple de ce code dans son contexte : Gulpfile.js
Modifié par Olivier C (08 May 2016 - 09:27)

Merci pour votre fichier de configuration gulp ; je le testerais sur un nouveau répertoire projet . Actuellement libsass ne fonctionne dans mon cas sous windows mais ruby-sass ok !!
Modifié par 75lionel (09 May 2016 - 00:19)