Mixin: Black & White

Supplemental 46 views
0
0 Flares 0 Flares ×

Let’s say you need some 90% opacity white text on a 15% black opacity background. With regular CSS, you’d have to write all this:

.my-class{
    background:rgba(0,0,0,0.15);
    color:rgba(255,255,255,0.9);
}

SASS to the rescue! Let’s set up two very simple functions:

@function black($opacity){
    @return rgba(0,0,0,$opacity)
}
@function white($opacity){
    @return rgba(255,255,255,$opacity)
}

Now all I need to write is:

.my-class{
    background:black(0.15);
    color:white(0.9);
}

This saves me a ton of time all throughout my stylesheets. As an added bonus, using transparent instead of opaque colors make your elements blend in together better, and your design more coherent.
Provided by: Sacha Greif
Tagged with:
Posted in Sass

Discuss:

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

No Trackbacks.

Login

Register | Lost your password?
0 Flares Twitter 0 Facebook 0 Google+ 0 0 Flares ×