Skip to content

Instantly share code, notes, and snippets.

@alexsc6955
Last active September 22, 2021 21:30
Show Gist options
  • Save alexsc6955/765b7009ab28af7f2be248c7b332d3e1 to your computer and use it in GitHub Desktop.
Save alexsc6955/765b7009ab28af7f2be248c7b332d3e1 to your computer and use it in GitHub Desktop.
Stylus padding mixin
/**
* Name: Stylus -padding mixin
* Description: Mixin to set paddings
* Author: Santiago Rincón
* Author URI: http://github.com/rincorpes
* Version: 2.0
* License: GNU GENERAL PUBLIC LICENSE Version 3, 29 June 2007
* License URI: https://www.gnu.org/licenses/gpl-3.0.en.html
*/
-padding()
if length(arguments) == 1
padding unit(arguments[0], 'px')
else if length(arguments) == 2
if arguments[0] is a 'unit'
padding unit(arguments[0], 'px') unit(arguments[1], 'px')
else if arguments[1] is a 'unit'
padding-top unit(arguments[1], 'px') if arguments[0] == top || arguments[0] == vertical
padding-right unit(arguments[1], 'px') if arguments[0] == right || arguments[0] == horizontal
padding-bottom unit(arguments[1], 'px') if arguments[0] == bottom || arguments[0] == vertical
padding-left unit(arguments[1], 'px') if arguments[0] == left || arguments[0] == horizontal
else if length(arguments) == 3
if arguments[0] is a 'unit'
padding unit(arguments[0], 'px') unit(arguments[1], 'px') unit(arguments[2], 'px')
else if arguments[0] is a 'ident' && arguments[1] is a 'unit'
padding-top unit(arguments[1], 'px') if arguments[0] == vertical
padding-bottom unit(arguments[2], 'px') if arguments[0] == vertical
padding-left unit(arguments[1], 'px') if arguments[0] == horizontal
padding-right unit(arguments[2], 'px') if arguments[0] == horizontal
else if arguments[0] is a 'ident' && arguments[1] is a 'ident'
padding-top unit(arguments[2], 'px') if arguments[0] == top || arguments[0] == vertical || arguments[1] == top || arguments[1] == vertical
padding-right unit(arguments[2], 'px') if arguments[0] == right || arguments[0] == horizontal || arguments[1] == right || arguments[1] == horizontal
padding-bottom unit(arguments[2], 'px') if arguments[0] == bottom || arguments[0] == vertical || arguments[1] == bottom || arguments[1] == vertical
padding-left unit(arguments[2], 'px') if arguments[0] == left || arguments[0] == horizontal || arguments[1] == left || arguments[1] == horizontal
else if length(arguments) == 4
if arguments[0] is a 'unit'
padding unit(arguments[0], 'px') unit(arguments[1], 'px') unit(arguments[2], 'px') unit(arguments[3], 'px')
else if arguments[0] is a 'ident' && arguments[1] is a 'ident'
padding-top unit(arguments[2], 'px') if arguments[0] == top || arguments[0] == vertical
padding-top unit(arguments[3], 'px') if arguments[1] == top || arguments[1] == vertical
padding-right unit(arguments[2], 'px') if arguments[0] == right || arguments[0] == horizontal
padding-right unit(arguments[3], 'px') if arguments[1] == right || arguments[1] == horizontal
padding-bottom unit(arguments[2], 'px') if arguments[0] == bottom || arguments[0] == vertical
padding-bottom unit(arguments[3], 'px') if arguments[1] == bottom || arguments[1] == vertical
padding-left unit(arguments[2], 'px') if arguments[0] == left || arguments[0] == horizontal
padding-left unit(arguments[3], 'px') if arguments[1] == left || arguments[1] == horizontal

#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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment