Skip to content

Instantly share code, notes, and snippets.

@Jae-kwang
Forked from mucsher/margin-padding.less
Created November 22, 2016 02:54
Show Gist options
  • Save Jae-kwang/050d32a655acc22c48e4f13655be76e6 to your computer and use it in GitHub Desktop.
Save Jae-kwang/050d32a655acc22c48e4f13655be76e6 to your computer and use it in GitHub Desktop.
Function Less: Margin and Padding Utilities Class
// Define Style Margin - Padding
.marginAndPadding(@iterations)
{
.pd0 {padding: 0px;}
.pdT0{padding-top: 0px;}
.pdR0{padding-right: 0px;}
.pdB0{padding-bottom: 0px;}
.pdL0{padding-left: 0px;}
.mg0 {margin: 0px;}
.mgT0{margin-top: 0px;}
.mgR0{margin-right: 0px;}
.mgB0{margin-bottom: 0px;}
.mgL0{margin-left: 0px;}
.pd0-ipt {padding: 0px!important;}
.pdT0-ipt{padding-top: 0px!important;}
.pdR0-ipt{padding-right: 0px!important;}
.pdB0-ipt{padding-bottom: 0px!important;}
.pdL0-ipt{padding-left: 0px!important;}
.mg0-ipt {margin: 0px!important;}
.mgT0-ipt{margin-top: 0px!important;}
.mgR0-ipt{margin-right: 0px!important;}
.mgB0-ipt{margin-bottom: 0px!important;}
.mgL0-ipt{margin-left: 0px!important;}
// LOOP
.style_margin_padding (@index) when (@index > 0) {
// Padding
(~".pd@{index}") {padding: ~"@{index}px";}
(~".pdT@{index}") {padding-top: ~"@{index}px";}
(~".pdR@{index}") {padding-right: ~"@{index}px";}
(~".pdB@{index}") {padding-bottom: ~"@{index}px";}
(~".pdL@{index}") {padding-left: ~"@{index}px";}
// Padding Important
(~".pd@{index}-ipt") {padding: ~"@{index}px!important";}
(~".pdT@{index}-ipt") {padding-top: ~"@{index}px!important";}
(~".pdR@{index}-ipt") {padding-right: ~"@{index}px!important";}
(~".pdB@{index}-ipt") {padding-bottom: ~"@{index}px!important";}
(~".pdL@{index}-ipt") {padding-left: ~"@{index}px!important";}
// Padding Horizatial
(~".pd-0-@{index}") {padding: 0 ~"@{index}px";}
(~".pd-0-@{index}-ipt") {padding: 0 ~"@{index}px!important";}
// Padding Vertical
(~".pd-@{index}-0") {padding: ~"@{index}px" 0;}
(~".pd-@{index}-0-ipt") {padding: ~"@{index}px" 0!important;}
//-----------------------------------------------------------------
// Margin
(~".mg@{index}") {margin: ~"@{index}px";}
(~".mgT@{index}") {margin-top: ~"@{index}px";}
(~".mgR@{index}") {margin-right: ~"@{index}px";}
(~".mgB@{index}") {margin-bottom: ~"@{index}px";}
(~".mgL@{index}") {margin-left: ~"@{index}px";}
// Margin Important
(~".mg@{index}-ipt") {margin: ~"@{index}px!important";}
(~".mgT@{index}-ipt") {margin-top: ~"@{index}px!important";}
(~".mgR@{index}-ipt") {margin-right: ~"@{index}px!important";}
(~".mgB@{index}-ipt") {margin-bottom: ~"@{index}px!important";}
(~".mgL@{index}-ipt") {margin-left: ~"@{index}px!important";}
// margin Horizatial
(~".mg-0-@{index}") {margin: 0 ~"@{index}px";}
(~".mg-0-@{index}-ipt") {margin: 0 ~"@{index}px!important";}
// margin Vertical
(~".mg-@{index}-0") {margin: ~"@{index}px" 0;}
(~".mg-@{index}-0-ipt") {margin: ~"@{index}px" 0!important;}
// next iteration
.style_margin_padding(@index - 5);
}
// end the loop when index is 0
.style_margin_padding (0) {}
// "call" the loopingClass the first time with highest value
.style_margin_padding (@iterations);
}
.marginAndPadding(20);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment