0

I'm trying to do a mixin that I can use to create different types of padding and margin classes. They should be responsive.

Basically, "my formula", eg:

@base-top-space * @space-medium * @space-xs

The formula should give a value in a class depending on what media query it is in. Now, I'm pretty new to less and am trying to figure this out but I'm terribly stuck and I need someone to help. Maybe the whole concept of the function is wrong?

//Global variables for space calculation in a mixin
// Variables for padding and margin sections - also refered to as mixin-space-value
   @base-top-space: 100px;
 @base-right-space: 100px;
@base-bottom-space: @base-top-space;
  @base-left-space: @base-right-space;

// Variables for different types of sizes of space - also refered to as mixin-space-size
 @space-small:      0.75;
@space-medium:      1;
 @space-large:      1.75;
@space-xlarge:      2.5;

// Variables for different types of devices - also refered to as mixin-space-device
@space-xs:  0.5;
@space-sm:  1;
@space-md:  1.25;
@space-lg:  1.5;

//Variables of types of space in mixin
@space-type-padding-top: escape('padding:');
@space-type-padding-top: escape('padding-top:');
@space-type-padding-right: escape('padding-right:');
@space-type-padding-bottom: escape('padding-bottom:');
@space-type-padding-left: escape('padding-left:');

@space-type-margin: escape('margin:');
@space-type-margin-top: escape('margin-top:');
@space-type-margin-right: escape('margin-right:');
@space-type-margin-bottom: escape('margin-bottom:');
@space-type-margin-left: escape('margin-left:');

// Mixin of padding space
// mixin-space-type: eg. padding-top, margin-right...
// 
//      Mixin variables         Global variables
//      ===============         ================
// Eg.: mixin-space-type    =   @space-type-padding-top
// Eg.: mixin-space-value   =   @base-top-space
// Eg.: mixin-space-size    =   @space-small, space-medium, @space-large, @space-large
// Eg.: mixin-space-device  =   @space-xs, @space-sm, @space-md, @space-lg

.mixin-space(@mixin-space-type, @mixin-space-value, @mixin-space-size, @mixin-space-device) {
    @mixin-space-type; abs(@mixin-space-value * @mixin-space-size * @mixin-space-device);
}


@media (max-width: @screen-xs-max) {
    .lg-md-content-margin {
        margin-top: 0px;
    }

    .pad {
        // Generates different types of padding sizes. Eg: .pad-top-s, .pad-top-m, .pad-top-l, .pad-top-xl
        &-top {
            &-s {
    .mixin-space(@space-type-margin-top, @base-top-space, @space-small, @space-xs)
}
            }

            &-m {

            }

            &-l {

            }

            &-xl {

            }
        }

        // Generates different types of padding sizes. Eg: .pad-bot-s, .pad-bot-m, .pad-bot-l, .pad-bot-xl
        &-bot {
            &-s {

            }

            &-m {

            }

            &-l {

            }

            &-xl {

            }
        }
    }
}
benomatis
  • 5,536
  • 7
  • 36
  • 59
Jonas Bröms
  • 53
  • 1
  • 5
  • 2
    Less can support property name interpolation and hence you don't have to include the `:` in the property name and can simply use it as `@{mixin-space-type}: ...` within your mixin. This is the only problem that I could see and your mixin should compile properly once it is fixed. – Harry May 26 '15 at 04:37
  • 2
    You could also optimize your Less code a lot by using loops and associative arrays because I see a lot of repetitive things in the current code. You can find many examples for loops [here](http://stackoverflow.com/search?tab=votes&q=%5bless%5d%20loops) and for associative arrays [here](http://stackoverflow.com/questions/30207980/less-associative-array-in-loop/30209802#30209802) and [here](http://stackoverflow.com/questions/23658087/loop-over-an-array-of-name-value-pairs-in-less). – Harry May 26 '15 at 04:40
  • 1
    Thank you! Regarding the loops and arrays... I know that I'm basically doing it wrong right now but I haven't got the hang of everything yet. But I will! Thanks again! – Jonas Bröms May 26 '15 at 07:01

0 Answers0