/**
* Special thanks to MathSass for maths functions!
* If you are already using MathSass, feel free to remove this section.
* https://github.com/terkel/mathsass
*/
@if not(function-exists(tan)) {
$PI: 3.141592653589793;
@function deg-to-rad ($deg, $unit: true) {
@return strip-unit($deg) * $PI / 180 * if($unit, 1rad, 1);
}
@function unitless-rad ($angle) {
@if unitless($angle) {
@return $angle;
} @else if unit($angle) == rad {
@return $angle / 1rad;
} @else if unit($angle) == deg {
@return deg-to-rad($angle, false);
} @else if type-of($angle) != number or not unitless($angle) {
@warn "#{ $angle } is not a valid number.";
@return $angle;
}
}
@function cos ($x) {
$x: unitless-rad($x);
$ret: 0;
@for $n from 0 to 24 {
$ret: $ret + pow(-1, $n) * pow($x, 2 * $n) / fact(2 * $n);
}
@return $ret;
}
@function sin ($x) {
$x: unitless-rad($x);
@return cos($x - $PI / 2);
}
@function tan ($x) {
$x: unitless-rad($x);
@return sin($x) / cos($x);
}
}
/**
* SassHexagon
* Special thanks to @brenna for creating csshexagon.com
*/
@mixin hexagon($name, $size, $background, $border, $rotate: 0) {
@if $border {
$borderWidth: nth($border, 1);
$borderColour: nth($border, 2);
$borderStyle: nth($border, 3);
$border: $borderWidth + px $borderColour $borderStyle;
} @else {
$borderWidth: 0;
}
$scaleFactor: tan( (30 * $PI)/180 );
$height: round($size/sqrt(3));
$capWidth: round($size/sqrt(2));
$offset: round($capWidth/2);
$left: round(($size - $capWidth)/2 - $borderWidth);
@if $rotate {
.#{$name} {
position: relative;
height: $size + px;
width: $height + px;
margin: 0 $height/2 + px;
@if $background {
background-color: $background;
}
@if $border {
border-top: $border;
border-bottom: $border;
}
}
.#{$name}:before,
.#{$name}:after {
content: "";
position: absolute;
z-index: 1;
width: $capWidth + px;
height: $capWidth + px;
-webkit-transform: scaleX($scaleFactor) rotate(-45deg);
-ms-transform: scaleX($scaleFactor) rotate(-45deg);
transform: scaleX($scaleFactor) rotate(-45deg);
background-color: inherit;
top: $left + px;
}
.#{$name}:before {
left: -$offset + px;
border-top: $border;
border-left: $border;
}
.#{$name}:after {
right: -$offset + px;
border-right: $border;
border-bottom: $border;
}
} @else {
.#{$name} {
position: relative;
width: $size + px;
height: $height + px;
margin: $height/2 + px 0;
@if $background {
background-color: $background;
}
@if $border {
border-right: $border;
border-left: $border;
}
}
.#{$name}:before,
.#{$name}:after {
content: "";
position: absolute;
z-index: 1;
width: $capWidth + px;
height: $capWidth + px;
-webkit-transform: scaleY($scaleFactor) rotate(-45deg);
-ms-transform: scaleY($scaleFactor) rotate(-45deg);
transform: scaleY($scaleFactor) rotate(-45deg);
background-color: inherit;
left: $left + px;
}
.#{$name}:before {
top: -$offset + px;
border-top: $border;
border-right: $border;
}
.#{$name}:after {
bottom: -$offset + px;
border-left: $border;
border-bottom: $border;
}
}
}
A quick little SCSS mixin for creating pure CSS hexagons.
1 Response
Write a comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.