Skip to content

Instantly share code, notes, and snippets.

@denchev
Last active August 29, 2015 14:10
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save denchev/7b4eb3311a885d1fdcda to your computer and use it in GitHub Desktop.
Save denchev/7b4eb3311a885d1fdcda to your computer and use it in GitHub Desktop.
Useful LESS helpers.
@margin: 10px;
@margin-thin : @margin/2;
@margin-thiner : @margin/3;
@margin-thinest : @margin/4;
@margin-thick : @margin*2;
@margin-thicker : @margin*3;
@margin-thickest : @margin*4;
.helper(@value:@margin);
.helper(@name:-thin,@value:@margin-thin);
.helper(@name:-thiner,@value:@margin-thiner);
.helper(@name:-thinest,@value:@margin-thinest);
.helper(@name:-thick,@value:@margin-thick);
.helper(@name:-thicker,@value:@margin-thicker);
.helper(@name:-thickest,@value:@margin-thickest);
.helper(@name:~"",@value) {
.helper-padding(@name,@value);
.helper-margin(@name,@value);
}
.property(@property,@name:~"",@suffix:~"",@value,@property-suffix:@suffix) {
@classname: ~"@{property}@{suffix}@{name}";
.@{classname} {
@{property}@{property-suffix}: @value;
}
// Uncomment if you want the !important mirrors
//.@{classname}-always {
// @{property}@{property-suffix}: @value !important;
//}
}
.helper-property(@property,@name,@value) {
.property(@property, @name, @value:@value);
.property(@property, @name, @suffix:-none, @value: 0, @property-suffix:~"");
.property(@property, @name, @suffix:-top, @value: @value);
.property(@property, @name, @suffix:-right, @value: @value);
.property(@property, @name, @suffix:-bottom, @value: @value);
.property(@property, @name, @suffix:-left, @value: @value);
.property(@property, @name, @suffix:-top-bottom, @value: @value 0, @property-suffix:~"");
.property(@property, @name, @suffix:-left-right, @value: 0 @value, @property-suffix:~"");
.property(@property, @name, @suffix:-top-only, @value: @value 0 0 0, @property-suffix:~"");
.property(@property, @name, @suffix:-right-only, @value: 0 @value 0 0, @property-suffix:~"");
.property(@property, @name, @suffix:-bottom-only, @value: 0 0 @value 0, @property-suffix:~"");
.property(@property, @name, @suffix:-left-only, @value: 0 0 0 @value, @property-suffix:~"");
}
.helper-padding(@name:~"",@value) {
.helper-property(@property:padding,@name,@value);
}
.helper-margin(@name:~"",@value) {
.helper-property(@property:margin,@name,@value);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment