Skip to content

Instantly share code, notes, and snippets.

@chrisrouse
Created December 7, 2013 18:23
Show Gist options
  • Select an option

  • Save chrisrouse/7846572 to your computer and use it in GitHub Desktop.

Select an option

Save chrisrouse/7846572 to your computer and use it in GitHub Desktop.
LESS mixins for generating pixel and rem values for padding using one to four values.
.padding-four-values (@padding1: 16; @padding2: 16; @padding3: 16; @padding4: 16;) {
@padding1Value: (@padding1 / 10);
@padding2Value: (@padding2 / 10);
@padding3Value: (@padding3 / 10);
@padding4Value: (@padding4 / 10);
padding: (@padding1 * 1px) (@padding2 * 1px) (@padding3 * 1px) (@padding4 * 1px);
padding: ~"@{padding1Value}rem" ~"@{padding2Value}rem" ~"@{padding3Value}rem" ~"@{padding4Value}rem";
}
usage:
.padding (15, 10, 12, 18);
output:
padding: 15px 10px 12px 18px;
pading: 1.5rem 1rem 1.2rem 1.8rem;
.padding (@padding1: 16) {
@padding1Value: (@padding1 / 10);
padding: (@padding1 / 1px);
padding: ~"@{padding1Value}rem";
}
usage:
.padding (10);
output:
padding: 10px;
pading: 1rem;
.padding-three-values (@padding1: 16; @padding2: 16; @padding3: 16;) {
@padding1Value: (@padding1 / 10);
@padding2Value: (@padding2 / 10);
@padding3Value: (@padding3 / 10);
padding: (@padding1 * 1px) (@padding2 * 1px) (@padding3 * 1px);
padding: ~"@{padding1Value}rem" ~"@{padding2Value}rem" ~"@{padding3Value}rem";
}
usage:
.padding (15, 10, 12);
output:
padding: 15px 10px12px;
pading: 1.5rem 1rem 1.2rem;
.padding-two-values (@padding1: 16; @padding2: 16;) {
@padding1Value: (@padding1 / 10);
@padding2Value: (@padding2 / 10);
padding: (@padding1 * 1px) (@padding2 / 1px);
padding: ~"@{padding1Value}rem" ~"@{padding2Value}rem";
}
usage:
.padding (15, 10);
output:
padding: 15px 10px;
pading: 1.5rem 1rem;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment