SCSS Hexagon Mixin

/** * 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

Nice snippet! Do you have one where it will take the number of sides and produce a shape?

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.