Menu
Nadzweb.com
Nadzweb.com

SCSS and the power of mixins

Posted on July 24, 2012July 24, 2012 by admin

I have been working with SASS for sometime now. Today I came across an interesting issue where i had to style individual elements that had specific styles attached to it.

<div style="font-size:12px;padding-left:20px;margin-right:5px;"&gt;
    An
       <div style="font-size:16px;margin-top:10px;padding-right:10px">
            awesome
       </div>
   product, Tell me about it!
</div>

So I wrote a mixin as below:

@mixin generateClassNamesWithVariables($start,$stop, $classname, $css-element, $spacer){
	@for $i from $start through $stop {
	    .#{$classname}#{$i*$spacer} { #{$css-element}: #{$i * $spacer}px; }
	}
}

This is how i have used the above mixin:

@include generateClassNamesWithVariables(1,5,margin-,margin,10);
@include generateClassNamesWithVariables(1,5,margin-top-,margin-top,10);
@include generateClassNamesWithVariables(1,5,margin-bottom-,margin-bottom,10);
@include generateClassNamesWithVariables(1,5,pad-right-,padding-right,10);
@include generateClassNamesWithVariables(1,5,pad-left-,padding-left,10);
@include generateClassNamesWithVariables(1,5,pad-top-,padding-top,5);
@include generateClassNamesWithVariables(1,5,pad-bottom-,padding-bottom,5);
@include generateClassNamesWithVariables(1,5,pad-,padding,10);
@include generateClassNamesWithVariables(10,30,f,font-size,1);

So what this mixin will do is generate the following css.

Now the html will be something like this, it is much cleaner and works like a charm!

<div class="f12 pad-left-20 margin-right-5">
        An  <div class="f16 margin-top-10 pad-right-10">
            awesome</div>
       product
</div>
  • css
  • mixins
  • sass
  • scss
  • 4 thoughts on “SCSS and the power of mixins”

    1. fai says:
      July 24, 2012 at 4:17 pm

      good post mate, keep it up…chuur…

      Reply
    2. Penny Imes says:
      July 27, 2012 at 5:25 pm

      Hello there, I found your blog via Google at the same time as looking for a related topic, your website came up, it appears great. I’ve bookmarked it in my google bookmarks.

      Reply
    3. DianneLVoros says:
      August 8, 2016 at 7:02 am

      What’s up to every single one, it’s in fact
      a nice for me to pay a quick visit this web page, it consists of important Information.

      Reply
    4. Anonymous says:
      November 14, 2016 at 10:05 pm

      An intriguing discussion may be worth comment. I think that
      you need to write a little more about this issue.

      Reply

    Leave a Reply Cancel reply

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

    *
    To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
    Anti-spam image

    Tags

    .htaccess angular angular2 angular2-pipes angular4 angularjs apache bigdata blockchain children codeigniter computer graphics ethereum flot flot charts funny hadoop http javascript jquery kanban lena linux love math mathematics microsoft misc node js php phpframework php frameworks postgres pun-intended python react sass scrum scss silverstripe software ssl story valentines day wordpress

    Archives

    Recent Posts

    • Install only Postgres client 11 on Ubuntu 18.04
    • PostgreSQL – Granting access to users
    • Querying JSONB Postgres fields in SQLAlchemy
    • Angular – Writing unit tests for setTimeout in functions
    • Angular 6 – getting previous url from angular router
    ©2021 Nadzweb.com | Powered by WordPress & Superb Themes