Created
January 7, 2013 15:18
-
-
Save mucsher/4475743 to your computer and use it in GitHub Desktop.
Function Less: Margin and Padding Utilities Class
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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