Skip to content

Instantly share code, notes, and snippets.

@magicspon

magicspon/SassMeister-input-HTML.html

Created May 5, 2015 23:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save magicspon/db40a0a4a9dcc771d123 to your computer and use it in GitHub Desktop.
Save magicspon/db40a0a4a9dcc771d123 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<div class="line"></div>
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.13)
// Compass (v1.0.3)
// ----
// shome colours
$themes: (
orange: #F9B80C,
green: #56950D,
blue: #1AA6D5,
tomato: #FC6A23,
purple: #844CB6,
navy: #2482AD
);
// color palette function
@function c($tone: 'orange') {
@return map-get($themes, $tone);
}
@function bs-output($output,$x,$y,$blur,$spread,$color,$i,$points) {
$output: $output + $x + ' ' + $y + ' ' + $blur + ' ' + $spread + ' ' + $color + ' ';
@if $i < $points {
$output: $output + ',';
}
@return $output;
}
// really simple box shadow line function
@function bs-line($points: 5, $distance: 100, $y: 0, $color: c(tomato)) {
$x: null;
$blur: 0;
$spread: 0;
$seg: ($distance/$points);
$output: ' ';
@for $i from 0 through $points {
$x: ($seg * $i) * 1px;
$output: bs-output($output,$x,$y,$blur,$spread,$color,$i,$points);
}
@return unquote($output);
}
// box shadow line function at any angle... noohommygawd
@function bs-line-deg($deg: 130deg, $points: 10, $distance: 100, $spread: 0, $color: c(tomato)) {
$x: null;
$x: null;
$blur: 0;
$seg: $distance / $points;
$output: ' ';
@for $i from 0 through $points {
$x: (($seg * cos($deg)) * $i) * 1px;
$y: (($seg * sin($deg)) * $i) * 1px;
$output: bs-output($output,$x,$y,$blur,$spread,$color,$i,$points);
}
@return unquote($output);
}
// box shadow in a standard circle
@function bs-circle($points: 20,$r: 20,$x: 100px,$y: 0px,$color: c(tomato)) {
$output: '';
$blur: 0;
$spread: 0;
@for $i from 1 through $points {
$x: ($x + $r * sin(2 * pi() * $i / $points));
$y: ($y + $r * cos(2 * pi() * $i / $points));
$output: bs-output($output,$x,$y,$blur,$spread,$color,$i,$points);
}
@return unquote($output);
}
// output the bs-line function at multiple angles
@function bs-line-loop($count: 15, $points: 2, $distance: 100, $spread: 0, $color: c(green)) {
$k: 360 / $count;
$output: '';
@for $i from 1 through $count {
$output: $output + bs-line-deg($deg: ($k * $i) * 1deg, $points: $points, $distance: $distance, $spread: $spread, $color: $color);
@if $i < $count {
$output: $output + ',';
}
}
@return unquote($output);
}
// same as above, but you supply a list of angles
@function bs-line-loop-array($list: 10deg 45deg 87deg 125deg 177deg 190deg 220deg 270deg, $points: 2, $distance: 100, $spread: 0, $color: c(green)) {
$output: '';
$count: length($list);
@for $i from 1 through $count {
$deg: nth($list,$i);
$output: $output + bs-line-deg($deg, $points: $points, $distance: $distance, $spread: $spread, $color: $color);
@if $i < $count {
$output: $output + ',';
}
}
@return unquote($output);
}
$bs-map: (
_0: (
color: c(orange),
angle: -90deg,
spread: 10px,
points: 3
),
_1: (
color: c(blue),
angle: -60deg,
spread: 10px,
points: 2
),
_2: (
color: c(purple),
angle: -30deg,
spread: 10px,
points: 2
),
_3: (
color: c(blue),
angle: 0,
spread: 10px,
points: 3
),
_4: (
color: c(orange),
angle: 30deg,
spread: 10px,
points: 2
),
_5: (
color: c(blue),
angle: 60deg,
spread: 10px,
points: 2
),
_6: (
color: c(orange),
angle: 90deg,
spread: 10px,
points: 3
),
_7: (
color: c(orange),
angle: 120deg,
spread: 10px,
points: 2
),
_8: (
color: c(blue),
angle: 150deg,
spread: 10px,
points: 2
),
_9: (
color: c(purple),
angle: 180deg,
spread: 10px,
points: 3
),
_10: (
color: c(blue),
angle: 210deg,
spread: 10px,
points: 2
),
_11: (
color: c(blue),
angle: 240deg,
spread: 10px,
points: 2
)
);
// adjust-color($color, $hue: ($segment * cos($angle) * $i)
// same as above, but you supply a list of angles
@function bs-line-loop-map($list: $bs-map, $distance: 250, $spread: 0) {
$output: '';
$count: length($bs-map);
@for $i from 1 through $count {
$m: nth(map-keys($list),$i);
$deg: map-get(map-get($list, $m), angle);
$color: map-get(map-get($list, $m), color);
$spread: map-get(map-get($list, $m), spread);
$points: map-get(map-get($list, $m), points);
@for $j from 1 through $points {
$output: $output + bs-line-deg($deg, $points, $distance: $distance, $spread: $spread, $color: $color);
@if $j < $points {
$output: $output + ',';
}
}
@if $i < $count {
$output: $output + ',';
}
}
@return unquote($output);
}
// this is just silly...
// with shome more maths this could be interesting
// and utterly pointless
@function bs-line-deg-loop($count: 100, $points: 1, $distance: 100, $color: c(tomato)) {
$k: (360 / $count) * 1deg;
$output: '';
$seg: ($distance / $points);
$blur: 0;
$spread: 0;
@for $i from 1 through $count {
$x: (($seg * cos($k * $i)) * $i) * 1px;
$y: (($seg * sin($k * $i)) * $i) * 1px;
$output: bs-output($output,$x,$y,$blur,$spread,$color,$i,$points);
}
@return unquote($output);
}
@function bs-line-build($columns: 12, $rows: 3, $xspace: 1, $yspace: 15, $y: 0, $color: c(tomato)) {
$x: null;
$blur: 0;
$spread: 0;
$output: ' ';
@for $i from 1 through $columns {
$x: ($xspace * $i) * 1px;
@for $j from 1 through $rows {
$y: ($yspace * $j) * 1px;
$output: $output + $x + ' ' + $y + ' ' + $blur + ' ' + $spread + ' ' + $color + ' ';
@if $j < $rows {
$output: $output + ',';
}
}
@if $i < $columns {
$output: $output + ',';
}
}
@return unquote($output);
}
// set the stage for the functions
@mixin set-bs($size: 2, $pos: before) {
position: relative;
&:#{$pos} {
display: block;
content: " ";
position: absolute;
top: 0;
left: -$size * 1px;
width: 2px;
height: $size * 1px;
}
}
body {
background-color: c(navy);
}
.line {
@include set-bs();
position: absolute;
top: 50%;
left: 50%;
&:before {
//border-radius: 100%;
box-shadow: bs-line-loop-map();
}
}
Raw
SassMeister-output.css
body {
background-color: #2482AD;
}
.line {
position: relative;
position: absolute;
top: 50%;
left: 50%;
}
.line:before {
display: block;
content: " ";
position: absolute;
top: 0;
left: -2px;
width: 2px;
height: 2px;
}
.line:before {
box-shadow: 0px 0px 0 10px #F9B80C ,0.0px -83.33333px 0 10px #F9B80C ,0.0px -166.66667px 0 10px #F9B80C ,0.0px -250px 0 10px #F9B80C , 0px 0px 0 10px #F9B80C ,0.0px -83.33333px 0 10px #F9B80C ,0.0px -166.66667px 0 10px #F9B80C ,0.0px -250px 0 10px #F9B80C , 0px 0px 0 10px #F9B80C ,0.0px -83.33333px 0 10px #F9B80C ,0.0px -166.66667px 0 10px #F9B80C ,0.0px -250px 0 10px #F9B80C , 0px 0px 0 10px #1AA6D5 ,62.5px -108.25318px 0 10px #1AA6D5 ,125.0px -216.50635px 0 10px #1AA6D5 , 0px 0px 0 10px #1AA6D5 ,62.5px -108.25318px 0 10px #1AA6D5 ,125.0px -216.50635px 0 10px #1AA6D5 , 0px 0px 0 10px #844CB6 ,108.25318px -62.5px 0 10px #844CB6 ,216.50635px -125.0px 0 10px #844CB6 , 0px 0px 0 10px #844CB6 ,108.25318px -62.5px 0 10px #844CB6 ,216.50635px -125.0px 0 10px #844CB6 , 0px 0px 0 10px #1AA6D5 ,83.33333px 0px 0 10px #1AA6D5 ,166.66667px 0px 0 10px #1AA6D5 ,250px 0px 0 10px #1AA6D5 , 0px 0px 0 10px #1AA6D5 ,83.33333px 0px 0 10px #1AA6D5 ,166.66667px 0px 0 10px #1AA6D5 ,250px 0px 0 10px #1AA6D5 , 0px 0px 0 10px #1AA6D5 ,83.33333px 0px 0 10px #1AA6D5 ,166.66667px 0px 0 10px #1AA6D5 ,250px 0px 0 10px #1AA6D5 , 0px 0px 0 10px #F9B80C ,108.25318px 62.5px 0 10px #F9B80C ,216.50635px 125.0px 0 10px #F9B80C , 0px 0px 0 10px #F9B80C ,108.25318px 62.5px 0 10px #F9B80C ,216.50635px 125.0px 0 10px #F9B80C , 0px 0px 0 10px #1AA6D5 ,62.5px 108.25318px 0 10px #1AA6D5 ,125.0px 216.50635px 0 10px #1AA6D5 , 0px 0px 0 10px #1AA6D5 ,62.5px 108.25318px 0 10px #1AA6D5 ,125.0px 216.50635px 0 10px #1AA6D5 , 0px 0px 0 10px #F9B80C ,0.0px 83.33333px 0 10px #F9B80C ,0.0px 166.66667px 0 10px #F9B80C ,0.0px 250px 0 10px #F9B80C , 0px 0px 0 10px #F9B80C ,0.0px 83.33333px 0 10px #F9B80C ,0.0px 166.66667px 0 10px #F9B80C ,0.0px 250px 0 10px #F9B80C , 0px 0px 0 10px #F9B80C ,0.0px 83.33333px 0 10px #F9B80C ,0.0px 166.66667px 0 10px #F9B80C ,0.0px 250px 0 10px #F9B80C , 0px 0px 0 10px #F9B80C ,-62.5px 108.25318px 0 10px #F9B80C ,-125.0px 216.50635px 0 10px #F9B80C , 0px 0px 0 10px #F9B80C ,-62.5px 108.25318px 0 10px #F9B80C ,-125.0px 216.50635px 0 10px #F9B80C , 0px 0px 0 10px #1AA6D5 ,-108.25318px 62.5px 0 10px #1AA6D5 ,-216.50635px 125.0px 0 10px #1AA6D5 , 0px 0px 0 10px #1AA6D5 ,-108.25318px 62.5px 0 10px #1AA6D5 ,-216.50635px 125.0px 0 10px #1AA6D5 , 0px 0px 0 10px #844CB6 ,-83.33333px 0.0px 0 10px #844CB6 ,-166.66667px 0.0px 0 10px #844CB6 ,-250px 0.0px 0 10px #844CB6 , 0px 0px 0 10px #844CB6 ,-83.33333px 0.0px 0 10px #844CB6 ,-166.66667px 0.0px 0 10px #844CB6 ,-250px 0.0px 0 10px #844CB6 , 0px 0px 0 10px #844CB6 ,-83.33333px 0.0px 0 10px #844CB6 ,-166.66667px 0.0px 0 10px #844CB6 ,-250px 0.0px 0 10px #844CB6 , 0px 0px 0 10px #1AA6D5 ,-108.25318px -62.5px 0 10px #1AA6D5 ,-216.50635px -125.0px 0 10px #1AA6D5 , 0px 0px 0 10px #1AA6D5 ,-108.25318px -62.5px 0 10px #1AA6D5 ,-216.50635px -125.0px 0 10px #1AA6D5 , 0px 0px 0 10px #1AA6D5 ,-62.5px -108.25318px 0 10px #1AA6D5 ,-125.0px -216.50635px 0 10px #1AA6D5 , 0px 0px 0 10px #1AA6D5 ,-62.5px -108.25318px 0 10px #1AA6D5 ,-125.0px -216.50635px 0 10px #1AA6D5 ;
}
Raw
SassMeister-rendered.html
<div class="line"></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment