#Stylus padding mixin
The same as regular padding but with less code and some other features, for example, you don't need to write "px", just write the unit and the mixin will add "px" for you
##Basic features:
###Padding all sides
The first code is Stylus and the second, the css output.
// Stylus
.element
-padding 80 // All sides
// CSS Output
.elemnt{
padding: 80px;
}
// Stylus
.element
-padding 80 40 // First unit for vertical and second for horizontal
// CSS Output
.element {
padding: 80px 40px;
}
// Stylus
.element
-padding 80 40 20 // First for "top", second for horizontal and last one for "bottom"
// CSS Output
.element {
padding: 80px 40px 20px;
}
// Stylus
.element
-padding 80 40 20 10 // Top, right, bottom and left paddings
// CSS Output
.element {
padding: 80px 40px 20px 10px;
}
###Padding an specific side
// Stylus
.element
-padding top 40 // It can be top, right, bottom or left and the value as "padding-top: 40px;"
// CSS Output
.element {
padding-top: 40px;
}
##Other features:
###Vertical and Horizontal padding
You can add the same padding value for two sides at the same time, say, you nedd to padding top and bottom; you have two options:
// Stylus
.element
-padding 20 0 // This will set value 20 to top and bottom and 0 for right and left
If you dont want to change the horizontal padding (left and right) you can use this feature this way
// Stylus
.element
-padding vertical 20
// CSS Output
.element {
padding-top: 20px;
padding-right: 20px;
}
You have to change "vertical" for "horizontal" if you want the padding afects only the lef and right sides.
You can also add diferent values to the top and bottom sides with vertical or to the left and right sides with horizontal, by adding two values after the ident.
// Stylus
.element
-margin vertical 40 20
// CSS Output
.element {
margin-top: 40px;
margin-bottom: 20px;
}
###One value for two diferent sides
If you need to add the same padding, say, to the top and right sides, you can use -padding 40 40, but if you want to add padding to, for example, to the top and left sides, you can use this feature.
// Stylus
.element
-padding top left 40
// CSS Output
.element {
padding-top: 40px;
padding-left: 40px;
}
This feature acepts all posible combinations, even "veritical" or "horizontal" mixed with any side
// Stylus
.element
-padding vertical left 40
// CSS Output
.element {
padding-top: 40px;
padding-bottom: 40px;
padding-left: 40px;
}
###Two diferent values for two diferent sides
Now let's say that you want to add 40px of padding to the top and the bottom and you want to add only 20px to the left side. You can do it with this feature:
// Stylus
.element
-padding vertical left 40 20
// CSS Output
.element {
padding-top: 40px;
padding-bottom: 40px;
padding-left: 20px;
}