Tag Archives: margins

Sass mixin to generate a full set of classes with mediaqueries variants

Here we are, we need a full set of some specific classes, why don’t write a sass mixin for that?

do more with less code!

The need classes are like:

.margin-top-small { margin-top: $gutter-grid-width / 2; }
.margin-top-normal { margin-top: $gutter-grid-width; }
.margin-top-large { margin-top: $gutter-grid-width * 2; }
.margin-top-xlarge { margin-top: $gutter-grid-width * 3; }

.margin-bottom-small { margin-bottom: $gutter-grid-width / 2; }
.margin-bottom-normal { margin-bottom: $gutter-grid-width; }
.margin-bottom-large { margin-bottom: $gutter-grid-width * 2; }
.margin-bottom-xlarge { margin-bottom: $gutter-grid-width * 3; }

and then we need some classes for specific mediaqueries

.margin-top-md-small, .margin-top-md-normal, .margin-top-md-large
.margin-top-sm-small, ...
.margin-top-xs-small, ...

and so on, if you ask why, the answer is: we like to use those classes here and there in several projects to have a solid and common understanding of margins, especially used for separate content elements in a complex CMS like TYPO3 in a middle company with several developers.

<div class="margin-top-large margin-bottom-small"> 

since the set is growing and i need also specific mediaquery classes I create a sass mixin to generate the whole set:

@mixin class-property-scale($classname, $property) {

	$list: none, xsmall, small, large, xlarge, xxlarge;
	$scale: 0, 1/3, 1/2, 1, 2, 3;

	@for $i from 1 through length($list) {
	   .#{$classname}-#{nth($list, $i)} {
		   #{$property}: $grid-gutter-width * nth($scale, $i)
	   }
	}

}

and the usage is

// create a full set of margin padding for varius mediaqueries

// all devices
@include class-property-scale(mt, margin-top);
@include class-property-scale(mb, margin-bottom);
@include class-property-scale(pt, padding-top);
@include class-property-scale(pb, padding-bottom);

// only small screen
@media (max-width: $screen-sm-max) {
	@include class-property-scale(mt-xs, margin-top);
	@include class-property-scale(mb-xs, margin-bottom);
	@include class-property-scale(pt-xs, padding-top);
	@include class-property-scale(pb-xs, padding-bottom);
}

// tablets
@media (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
	@include class-property-scale(mt-sm, margin-top);
	@include class-property-scale(mb-sm, margin-bottom);
	@include class-property-scale(pt-sm, padding-top);
	@include class-property-scale(pb-sm, padding-bottom);
}

// desktop
@media (min-width: $screen-md-min) {
	@include class-property-scale(pr-md, padding-right);
	@include class-property-scale(mt-md, margin-top);
	@include class-property-scale(mb-md, margin-bottom);
	@include class-property-scale(pt-md, padding-top);
	@include class-property-scale(pb-md, padding-bottom);
}

(instead of margin-top-large i used mt-large and mb-large)
and the result in my final css is :


.mt-none {
    margin-top: 0
}

.mt-xsmall {
    margin-top: 10px
}

.mt-small {
    margin-top: 15px
}

.mt-large {
    margin-top: 30px
}

.mt-xlarge {
    margin-top: 60px
}

.mt-xxlarge {
    margin-top: 90px
}

.mb-none {
    margin-bottom: 0
}

.mb-xsmall {
    margin-bottom: 10px
}

.mb-small {
    margin-bottom: 15px
}

.mb-large {
    margin-bottom: 30px
}

.mb-xlarge {
    margin-bottom: 60px
}

.mb-xxlarge {
    margin-bottom: 90px
}

.pt-none {
    padding-top: 0
}

.pt-xsmall {
    padding-top: 10px
}

.pt-small {
    padding-top: 15px
}

.pt-large {
    padding-top: 30px
}

.pt-xlarge {
    padding-top: 60px
}

.pt-xxlarge {
    padding-top: 90px
}

.pb-none {
    padding-bottom: 0
}

.pb-xsmall {
    padding-bottom: 10px
}

.pb-small {
    padding-bottom: 15px
}

.pb-large {
    padding-bottom: 30px
}

.pb-xlarge {
    padding-bottom: 60px
}

.pb-xxlarge {
    padding-bottom: 90px
}

@media (max-width: 1023px) {
    .mt-xs-none {
        margin-top:0
    }

    .mt-xs-xsmall {
        margin-top: 10px
    }

    .mt-xs-small {
        margin-top: 15px
    }

    .mt-xs-large {
        margin-top: 30px
    }

    .mt-xs-xlarge {
        margin-top: 60px
    }

    .mt-xs-xxlarge {
        margin-top: 90px
    }

    .mb-xs-none {
        margin-bottom: 0
    }

    .mb-xs-xsmall {
        margin-bottom: 10px
    }

    .mb-xs-small {
        margin-bottom: 15px
    }

    .mb-xs-large {
        margin-bottom: 30px
    }

    .mb-xs-xlarge {
        margin-bottom: 60px
    }

    .mb-xs-xxlarge {
        margin-bottom: 90px
    }

    .pt-xs-none {
        padding-top: 0
    }

    .pt-xs-xsmall {
        padding-top: 10px
    }

    .pt-xs-small {
        padding-top: 15px
    }

    .pt-xs-large {
        padding-top: 30px
    }

    .pt-xs-xlarge {
        padding-top: 60px
    }

    .pt-xs-xxlarge {
        padding-top: 90px
    }

    .pb-xs-none {
        padding-bottom: 0
    }

    .pb-xs-xsmall {
        padding-bottom: 10px
    }

    .pb-xs-small {
        padding-bottom: 15px
    }

    .pb-xs-large {
        padding-bottom: 30px
    }

    .pb-xs-xlarge {
        padding-bottom: 60px
    }

    .pb-xs-xxlarge {
        padding-bottom: 90px
    }
}

@media (min-width: 768px) and (max-width:1399px) {
    .mt-sm-none {
        margin-top:0
    }

    .mt-sm-xsmall {
        margin-top: 10px
    }

    .mt-sm-small {
        margin-top: 15px
    }

    .mt-sm-large {
        margin-top: 30px
    }

    .mt-sm-xlarge {
        margin-top: 60px
    }

    .mt-sm-xxlarge {
        margin-top: 90px
    }

    .mb-sm-none {
        margin-bottom: 0
    }

    .mb-sm-xsmall {
        margin-bottom: 10px
    }

    .mb-sm-small {
        margin-bottom: 15px
    }

    .mb-sm-large {
        margin-bottom: 30px
    }

    .mb-sm-xlarge {
        margin-bottom: 60px
    }

    .mb-sm-xxlarge {
        margin-bottom: 90px
    }

    .pt-sm-none {
        padding-top: 0
    }

    .pt-sm-xsmall {
        padding-top: 10px
    }

    .pt-sm-small {
        padding-top: 15px
    }

    .pt-sm-large {
        padding-top: 30px
    }

    .pt-sm-xlarge {
        padding-top: 60px
    }

    .pt-sm-xxlarge {
        padding-top: 90px
    }

    .pb-sm-none {
        padding-bottom: 0
    }

    .pb-sm-xsmall {
        padding-bottom: 10px
    }

    .pb-sm-small {
        padding-bottom: 15px
    }

    .pb-sm-large {
        padding-bottom: 30px
    }

    .pb-sm-xlarge {
        padding-bottom: 60px
    }

    .pb-sm-xxlarge {
        padding-bottom: 90px
    }
}

@media (min-width: 1024px) {
    .pr-md-none {
        padding-right:0
    }

    .pr-md-xsmall {
        padding-right: 10px
    }

    .pr-md-small {
        padding-right: 15px
    }

    .pr-md-large {
        padding-right: 30px
    }

    .pr-md-xlarge {
        padding-right: 60px
    }

    .pr-md-xxlarge {
        padding-right: 90px
    }

    .mt-md-none {
        margin-top: 0
    }

    .mt-md-xsmall {
        margin-top: 10px
    }

    .mt-md-small {
        margin-top: 15px
    }

    .mt-md-large {
        margin-top: 30px
    }

    .mt-md-xlarge {
        margin-top: 60px
    }

    .mt-md-xxlarge {
        margin-top: 90px
    }

    .mb-md-none {
        margin-bottom: 0
    }

    .mb-md-xsmall {
        margin-bottom: 10px
    }

    .mb-md-small {
        margin-bottom: 15px
    }

    .mb-md-large {
        margin-bottom: 30px
    }

    .mb-md-xlarge {
        margin-bottom: 60px
    }

    .mb-md-xxlarge {
        margin-bottom: 90px
    }

    .pt-md-none {
        padding-top: 0
    }

    .pt-md-xsmall {
        padding-top: 10px
    }

    .pt-md-small {
        padding-top: 15px
    }

    .pt-md-large {
        padding-top: 30px
    }

    .pt-md-xlarge {
        padding-top: 60px
    }

    .pt-md-xxlarge {
        padding-top: 90px
    }

    .pb-md-none {
        padding-bottom: 0
    }

    .pb-md-xsmall {
        padding-bottom: 10px
    }

    .pb-md-small {
        padding-bottom: 15px
    }

    .pb-md-large {
        padding-bottom: 30px
    }

    .pb-md-xlarge {
        padding-bottom: 60px
    }

    .pb-md-xxlarge {
        padding-bottom: 90px
    }
}

don’t worry the css is minified and gzipped via gulp at the end 😉