Skip to content

Instantly share code, notes, and snippets.

@kevinthompson

kevinthompson/Fullpage.html

Created May 8, 2012 14:33
Show Gist options
  • Save kevinthompson/2635626 to your computer and use it in GitHub Desktop.
Save kevinthompson/2635626 to your computer and use it in GitHub Desktop.
Download ZIP
SASS Border Shorthand Mixin
Raw
Fullpage.html
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Code Pen &middot; 14</title>
<link rel="stylesheet" href="http://codepen.io/stylesheets/css/normalize.css">
<style>
.btn {
border-top: 1px solid white;
border-right: 1px solid rgba(0, 0, 0, 0.25);
border-bottom: 1px solid rgba(0, 0, 0, 0.5);
border-left: 1px solid white;
}
.btn.alt {
border-top: 1px solid rgba(255, 255, 255, 0.5);
border-right: 1px solid rgba(0, 0, 0, 0.5);
border-bottom: 1px solid rgba(0, 0, 0, 0.5);
border-left: 1px solid rgba(255, 255, 255, 0.25);
}
body {
background-image: url(http://i.imgur.com/1Eq7Y.jpg);
background-size: auto, cover;
}
.c {
position: absolute;
top: 50%;
left: 50%;
}
.btns {
margin: -3.75em 0 0 -50%;
}
.btn {
-webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eeeeee), color-stop(30%, #cccccc), color-stop(70%, #bbbbbb), color-stop(100%, #aaaaaa));
background-image: -webkit-linear-gradient(#eeeeee, #cccccc 30%, #bbbbbb 70%, #aaaaaa);
background-image: -moz-linear-gradient(#eeeeee, #cccccc 30%, #bbbbbb 70%, #aaaaaa);
background-image: -o-linear-gradient(#eeeeee, #cccccc 30%, #bbbbbb 70%, #aaaaaa);
background-image: -ms-linear-gradient(#eeeeee, #cccccc 30%, #bbbbbb 70%, #aaaaaa);
background-image: linear-gradient(#eeeeee, #cccccc 30%, #bbbbbb 70%, #aaaaaa);
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.75);
margin: 0.25em 0.5em;
padding: 0.5em 1em;
cursor: pointer;
}
.btn.alt {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ff3333), color-stop(50%, #ff0000), color-stop(100%, #b30000));
background-image: -webkit-linear-gradient(#ff3333, #ff0000, #b30000);
background-image: -moz-linear-gradient(#ff3333, #ff0000, #b30000);
background-image: -o-linear-gradient(#ff3333, #ff0000, #b30000);
background-image: -ms-linear-gradient(#ff3333, #ff0000, #b30000);
background-image: linear-gradient(#ff3333, #ff0000, #b30000);
color: white;
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.25);
}
.btn:active {
position: relative;
top: 1px;
}
</style>
</head>
<body >
<div class='c'>
<div class='btns'>
<a class='btn'>Press This!</a>
<a class='btn alt'>Don't Press This</a>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
(function() {
(function() {
}).call(this);
})();
</script>
</body>
</html>
Raw
index.haml
.c
.btns
%a.btn Press This!
%a.btn.alt Don't Press This
Raw
style.sass
@import "compass"
// Border Shorthand Mixin by Kevin Thompson <http://kevinthompson.info>
=border($border, $border_horizontal: false, $border_bottom: false, $border_left: false)
$args: length($border)
// Reset Variables Based on Argument Count
@if length(nth($border,1)) > 1
@if $args == 4
$border_left: nth($border, 4)
$border_bottom: nth($border, 3)
$border_horizontal: nth($border, 2)
$border: nth($border, 1)
@else if $args == 3
$border_bottom: nth($border, 3)
$border_horizontal: nth($border, 2)
$border: nth($border, 1)
@else if $args == 2
$border_horizontal: nth($border, 2)
$border: nth($border, 1)
// Assign Attributes from Variables
@if $border and $border_horizontal and $border_bottom and $border_left
border-top: $border
border-right: $border_horizontal
border-bottom: $border_bottom
border-left: $border_left
@else if $border and $border_horizontal and $border_bottom
border: $border_horizontal
border-top: $border
border-bottom: $border_bottom
@else if $border and $border_horizontal
border: $border
border-right: $border_horizontal
border-left: $border_horizontal
@else
border: $border
// Example
$default_border: 1px solid #fff, 1px solid rgba(#000,.25), 1px solid rgba(#000,.5), 1px solid rgba(#fff,1)
$alt_border: 1px solid rgba(#fff,.5), 1px solid rgba(#000,.5), 1px solid rgba(#000,.5), 1px solid rgba(#fff,.25)
.btn
+border($default_border)
&.alt
+border($alt_border)
// ----------------------------------------
// Additional Styles (Not Relevant)
body
background-image: url(http://i.imgur.com/1Eq7Y.jpg)
background-size: auto, cover
.c
position: absolute
top: 50%
left: 50%
.btns
margin: -3.75em 0 0 -50%
.btn
+box-shadow(0 10px 20px rgba(#000, .5))
+border-radius(5px)
+background-image(linear-gradient(#eee, #ccc 30%, #bbb 70%, #aaa))
text-shadow: 1px 1px 0 rgba(#fff,.75)
margin: .25em .5em
padding: .5em 1em
cursor: pointer
&.alt
+background-image(linear-gradient(lighten(#f00,10%), #f00, darken(#f00, 15%)))
color: #fff
text-shadow: -1px -1px 0 rgba(#000,.25)
&:active
position: relative
top: 1px
@uxcoding
Copy link

uxcoding commented Apr 2, 2020

Hi, Kevin I have seen your code as above for border mixin. I am new in sass and scss therefor I confuse how much length has $args: length($border); for under standing the code.
could you explain me by writing the code step by step than it will be very easy to understand me.
Please...... if you could do for me.
I am getting wait for your response.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment