Family.scss. Functions — Sass Documentation. Methods in this module are accessible from the SassScript context.
For example, you can write $color: hsl(120deg, 100%, 50%) and it will call #hsl. The following functions are provided: Note: These functions are described in more detail below. RGB Functions rgb($red, $green, $blue) Creates a Color from red, green, and blue values. rgba($red, $green, $blue, $alpha) Creates a Color from red, green, blue, and alpha values. red($color) Gets the red component of a color. green($color) Gets the green component of a color. blue($color) Gets the blue component of a color. mix($color1, $color2, [$weight]) Mixes two colors together. HSL Functions. Write Better Media Queries with Sass. Les post-processeurs CSS. Vous avez surement entendu parler des post-processeurs CSS.
J’ai personnellement pas mal fait référence à ce concept cette expression ces derniers temps. Que ce soit lorsque je vous racontais comment se passer des préfixes CSS ou lors d’un point sur les pré-processeurs CSS. N’y a-t-il rien qui vous a fait tiquer ? # Du post-processing ? Bon on va pas jouer sur les mots mais quand même un peu. Si on revient sur pré-processeurs, on a quelques choses de sensé. Mais le post-processing ? Bon ok j’avoue que je pinaille un peu. Du coup on appelle ça comment les post-processeurs ? Assez plaisanté, passons donc à l’explication de ce qu’on appelera le post-processing. Why I Don't Use Compass Anymore. Interested in Sass and Sass frameworks?
You might like our course on how to save time and write better code with Sass on our learning platform, Learnable. Compass is one hell of a project. It is by far the biggest Sass framework out there and since it is maintained by Chris Eppstein himself, one of the two Sass core designers, I don’t see it losing in popularity anytime soon. Yet, about a year ago or so, I stopped using Compass altogether. I removed it from our project at work. I think I just got better and more confident with Sass, to a point where Compass did not bring much to the table anymore.
Let me put something straight before going any further: in no way am I saying that Compass is useless. Now, to fully get why we can or cannot remove the Compass dependency, we need to understand what does Compass do at the end of the day. Everything else is pretty much accessory. Autoprefixer does the same Before Compass 1.0.0, prefixes were managed manually in Compass. Okay, now we’re talking. 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 : Malheureusement il ne marche pas si on essaye de lui passer plusieurs shadows pour la même déclaration. 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) :P Et voilà, mon petit mixin tout mignon du début s'est transformé en cette chose énorme, immonde et illisible : Et ça s'utilise comme ça : Donc 9 shadows max.
Sass CSS3 Mixins. Useful scss mixins (rounded corners, gradients, text-field, button)