SASS et LESS : mixin pour multiple shadow

J’ai posté une astuce il y a peu pour rendre mon mixin SASS box-shadow compatible avec plusieurs shadows dans la même déclaration. Je me suis retrouvé avec un truc assez moche et surtout très redondant.

Sans plus attendre…

Mixin multiple box-shadow v2

@mixin box-shadow($params) {
  -webkit-box-shadow : #{$params};
     -moz-box-shadow : #{$params};
          box-shadow : #{$params};
}

Voilà comment ça s’utilise :

@include box-shadow( "0 0 5px #333 , inset 0 0 2px #666" );

Et c’est tout ! 😀

En fait le principe est de passer une STRING en paramètre (donc concrètement tout ce que vous voulez) puis dans le code du mixin on se sert des #{ } pour échapper les guillemets.

Continue reading “SASS et LESS : mixin pour multiple shadow” →

SASS : un mixin box-shadow qui supporte plusieurs shadows

Mon mixin box-shadow me rend bien des services, il permet d’écrire :

UPDATE : j’ai trouvé beaucoup plus simple que la technique décrite ici.

@include box-shadow(0px 0px 5px #666);

Qui est ensuite compilé en ça :

-webkit-box-shadow: 0px 0px 5px #666;
   -moz-box-shadow: 0px 0px 5px #666;
        box-shadow: 0px 0px 5px #666;

Le code SCSS de mon mixin en question :

@mixin box-shadow($params) {
  -webkit-box-shadow: $params;
     -moz-box-shadow: $params;
          box-shadow: $params;
}

Malheureusement il ne marche pas si on essaye de lui passer plusieurs shadows pour la même déclaration. Un truc comme ça quoi :

box-shadow: 0px 0px 10px #666,
            0px 0px 15px #666,
            0px 0px 20px #666,
            etc...

Pas moyen d’y arriver avec mon mixin tel quel…

Donc après quelques recherches du côté de Compass puis du côté de StackOverflow je l’ai modifié pour lui permettre de supporter plusieurs shadows dans la même déclaration (9 shadows maximum pour être plus exacte, on va dire que ça suffira hein) 😛

Et voilà, mon petit mixin tout mignon du début s’est transformé en cette chose énorme, immonde et illisible :

@mixin box-shadow( $shadow1, $shadow2:false, $shadow3:false, $shadow4:false, $shadow5:false, $shadow6:false, $shadow7:false, $shadow8:false, $shadow9:false ) {
$params: $shadow1;
@if $shadow2 { $params: $shadow1, $shadow2; }
@if $shadow3 != false { $params: $shadow1, $shadow2, $shadow3; }
@if $shadow4 != false { $params: $shadow1, $shadow2, $shadow3, $shadow4; }
@if $shadow5 != false { $params: $shadow1, $shadow2, $shadow3, $shadow4, $shadow5; }
@if $shadow6 != false { $params: $shadow1, $shadow2, $shadow3, $shadow4, $shadow5, $shadow6; }
@if $shadow7 != false { $params: $shadow1, $shadow2, $shadow3, $shadow4, $shadow5, $shadow6, $shadow7}
@if $shadow8 != false { $params: $shadow1, $shadow2, $shadow3, $shadow4, $shadow5, $shadow6, $shadow7, $shadow8 }
@if $shadow9 != false { $params: $shadow1, $shadow2, $shadow3, $shadow4, $shadow5, $shadow6, $shadow7, $shadow8, $shadow9 }

-webkit-box-shadow: $params;
   -moz-box-shadow: $params;
        box-shadow: $params;
}

Et ça s’utilise comme ça :

@include box-shadow( 0px 0px 5px blue, 0px 0px 5px lightBlue, etc. );

Donc 9 shadows max. Mais on peut toujours paramétrer le mixin pour qu’il en accepte plus.

Je vais quand même chercher un moyen de simplifier tout ça, peut-être avec @each je sais pas mais ça vaudrait le coup. Enfin bon au moins maintenant il supporte le multiple shadows ! 😀

UPDATE : j’ai trouvé beaucoup plus simple que la technique décrite ici.

Mieux organiser ses fichiers CSS avec SASS

Déjà SASS c’est quoi ?

Alors SASS ou bien SCSS est un langage qui permet d’améliorer nos CSS traditionnels. C’est basé sur Ruby et ça s’installe sur l’ordinateur en tant qu’exécutable. Vous écrivez votre CSS de manière plus sympa et ensuite ça compile ce que vous avez écrit en une feuille de style CSS tout ce qu’il y a de plus classique. Et c’est cette feuille de style que votre page web appelle. Cette étape de compilation peut soit être faite à la main ou bien peut se faire tout seule chaque fois que vous faite une modification. SASS a un concurrent direct qui s’appelle LESS et qui fait sensiblement la même chose avec quelque légères variantes syntaxiques.

Continue reading →