Skip to content

Instantly share code, notes, and snippets.

@alexsc6955
Last active September 22, 2021 21:30
Show Gist options
  • Save alexsc6955/ae7d7add9769024f852baaa6b6237c99 to your computer and use it in GitHub Desktop.
Save alexsc6955/ae7d7add9769024f852baaa6b6237c99 to your computer and use it in GitHub Desktop.
Stylus margin mixin
/**
* Name: Stylus -margin mixin
* Description: Mixin to set margins
* 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
*/
-margin()
if length(arguments) == 1
if arguments[0] is a 'unit'
$value-0 = unit(arguments[0], 'px')
else
$value-0 = arguments[0]
margin $value-0
else if length(arguments) == 2
if arguments[0] is a 'unit'
$value-0 = unit(arguments[0], 'px')
else
$value-0 = arguments[0]
if arguments[1] is a 'unit'
$value-1 = unit(arguments[1], 'px')
else
$value-1 = arguments[1]
if arguments[0] is a 'unit'
margin $value-0 $value-1
else if arguments[1] is a 'unit' || arguments[1] == auto
margin-top $value-1 if arguments[0] == top || arguments[0] == vertical
margin-right $value-1 if arguments[0] == right || arguments[0] == horizontal
margin-bottom $value-1 if arguments[0] == bottom || arguments[0] == vertical
margin-left $value-1 if arguments[0] == left || arguments[0] == horizontal
else if length(arguments) == 3
if arguments[0] is a 'unit'
$value-0 = unit(arguments[0], 'px')
else
$value-0 = arguments[0]
if arguments[1] is a 'unit'
$value-1 = unit(arguments[1], 'px')
else
$value-1 = arguments[1]
if arguments[2] is a 'unit'
$value-2 = unit(arguments[2], 'px')
else
$value-2 = arguments[2]
if arguments[0] is a 'unit'
margin $value-0 $value-1 $value-2
else if arguments[0] is a 'ident' && arguments[1] is a 'unit'
margin-top $value-1 if arguments[0] == vertical
margin-bottom $value-2 if arguments[0] == vertical
margin-left $value-1 if arguments[0] == horizontal
margin-right $value-2 if arguments[0] == horizontal
else if arguments[0] is a 'ident' && arguments[1] is a 'ident'
margin-top $value-2 if arguments[0] == top || arguments[0] == vertical || arguments[1] == top || arguments[1] == vertical
margin-right $value-2 if arguments[0] == right || arguments[0] == horizontal || arguments[1] == right || arguments[1] == horizontal
margin-bottom $value-2 if arguments[0] == bottom || arguments[0] == vertical || arguments[1] == bottom || arguments[1] == vertical
margin-left $value-2 if arguments[0] == left || arguments[0] == horizontal || arguments[1] == left || arguments[1] == horizontal
else if length(arguments) == 4
if arguments[0] is a 'unit'
$value-0 = unit(arguments[0], 'px')
else
$value-0 = arguments[0]
if arguments[1] is a 'unit'
$value-1 = unit(arguments[1], 'px')
else
$value-1 = arguments[1]
if arguments[2] is a 'unit'
$value-2 = unit(arguments[2], 'px')
else
$value-2 = arguments[2]
if arguments[3] is a 'unit'
$value-3 = unit(arguments[3], 'px')
else
$value-3 = arguments[3]
if arguments[0] is a 'unit'
margin $value-0 $value-1 $value-2 $value-3
else if arguments[0] is a 'ident' && arguments[1] is a 'ident'
margin-top $value-2 if arguments[0] == top || arguments[0] == vertical
margin-top $value-3 if arguments[1] == top || arguments[1] == vertical
margin-right $value-2 if arguments[0] == right || arguments[0] == horizontal
margin-right $value-3 if arguments[1] == right || arguments[1] == horizontal
margin-bottom $value-2 if arguments[0] == bottom || arguments[0] == vertical
margin-bottom $value-3 if arguments[1] == bottom || arguments[1] == vertical
margin-left $value-2 if arguments[0] == left || arguments[0] == horizontal
margin-left $value-3 if arguments[1] == left || arguments[1] == horizontal

#Stylus padding mixin

The same as regular margin 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:

###Margin all sides

The first code is Stylus and the second, the css output.

// Stylus
.element
	-margin 80  // All sides
	
// CSS Output
.element{
	margin: 80px;
}


// Stylus
.element
	-margin 80 40  // First unit for vertical and second for horizontal

// CSS Output
.element {
	margin: 80px 40px;
}


// Stylus
.element
	-margin 80 40 20 // First for "top", second for horizontal and last one for "bottom"

// CSS Output
.element {
	margin: 80px 40px 20px;
}


// Stylus
.element
  -margin 80 40 20 10 // Top, right, bottom and left margins

// CSS Output
.element {
	margin: 80px 40px 20px 10px;
}

###Margin an specific side

// Stylus
.element
	-margin top 40	  // It can be top, right, bottom or left and the value as "margin-top: 40px;"

// CSS Output
.element {
	margin-top: 40px;
}

##Other features:

###Vertical and Horizontal margin

You can add the same margin value for two sides at the same time, say, you nedd to margin top and bottom; you have two options:

// Stylus
.element
	-margin 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 margin (left and right) you can use this feature this way

// Stylus
.element
	-margin vertical 20
	
// CSS Output
.element {
	margin-top: 20px;
	margin-right: 20px;
}

You have to change "vertical" for "horizontal" if you want the margin 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 margin, say, to the top and right sides, you can use -margin 40 40 0 0, but if you want to add margin to, for example, to the top and left sides, you can use this feature.

// Stylus
.element
	-margin top left 40

// CSS Output
.element {
	margin-top: 40px;
	margin-left: 40px;
}

This feature acepts all posible combinations, even "veritical" or "horizontal" mixed with any side

// Stylus
.element
  -margin vertical left 40

// CSS Output
.element {
	margin-top: 40px;
	margin-bottom: 40px;
	margin-left: 40px;
}

###Two diferent values for two diferent sides

Now let's say that you want to add 40px of margin 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
	-margin vertical left 40 20

// CSS Output
.element {
	margin-top: 40px;
	margin-bottom: 40px;
	margin-left: 20px;
}

Centering blocks

This mixin acepts the value "auto" for a margin, so you can use it to center blocks with only one line of code:

// Stylus
.element
	-margin top horizontal 0 auto

// CSS Output
.element {
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment