Skip to content

Instantly share code, notes, and snippets.

@theyselim

theyselim/SassMeister-input.scss

Created June 19, 2015 16:20
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save theyselim/6f9abb05e5c4b0cdc1f2 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save theyselim/6f9abb05e5c4b0cdc1f2 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----
$background: #0f0f0f;
$def-size: 500px !default;
@mixin size($width:$def-size, $height:$def-size) {
width: $width;
height: $height;
}
$prefixes: -webkit- -moz- -o- -ms- "";
@mixin border-radius($radius) {
@each $prefix in $prefixes {
#{$prefix}border-radius: $radius;
}
}
@mixin transform-rotate($angle) {
@each $prefix in $prefixes {
#{$prefix}transform: rotate($angle*1deg);
}
}
.chart {
@include size();
margin: 0 auto;
border: 5px solid #393D45;
@include border-radius(50%);
background-color: $background;
}
$angle: 0; // Starting angle for pie slices.
$pie-slices: 4; // Number of pie slices .. Can we fetch this dynamically?
$colours: #393D45 #5477C0 #D4DF5A #FEC42C; //Fetch Number of pies from number of colours.
$values: 30 40 25 5; // Percentage out of 100 for each pie slice .. Can we fetch this from HTML without JS? W3C help!
@mixin set-angle($new-angle, $position: false) {
@if $position == true{
$degree: ($new-angle / 100) * 360;
$angle: $angle + $degree !global;
}
@include transform-rotate($angle);
}
@each $colour in $colours {
$i: index($colours, $colour);
.pie-slice-#{$i} {
@include size();
position: absolute;
background-color: $colour;
@include border-radius(50%);
@include set-angle($angle);
clip: rect(0px, 500px, 500px, 250px);
& .pie {
@include size();
position: absolute;
background-color: $colour;
@include border-radius(50%);
clip: rect(0, 250px, 500px, 0px);
@include set-angle(nth($values, $i), true);
}
}
}
Raw
SassMeister-output.css
.chart {
width: 500px;
height: 500px;
margin: 0 auto;
border: 5px solid #393D45;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
background-color: #0f0f0f;
}
.pie-slice-1 {
width: 500px;
height: 500px;
position: absolute;
background-color: #393D45;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
clip: rect(0px, 500px, 500px, 250px);
}
.pie-slice-1 .pie {
width: 500px;
height: 500px;
position: absolute;
background-color: #393D45;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
clip: rect(0, 250px, 500px, 0px);
-webkit-transform: rotate(108deg);
-moz-transform: rotate(108deg);
-o-transform: rotate(108deg);
-ms-transform: rotate(108deg);
transform: rotate(108deg);
}
.pie-slice-2 {
width: 500px;
height: 500px;
position: absolute;
background-color: #5477C0;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
-webkit-transform: rotate(108deg);
-moz-transform: rotate(108deg);
-o-transform: rotate(108deg);
-ms-transform: rotate(108deg);
transform: rotate(108deg);
clip: rect(0px, 500px, 500px, 250px);
}
.pie-slice-2 .pie {
width: 500px;
height: 500px;
position: absolute;
background-color: #5477C0;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
clip: rect(0, 250px, 500px, 0px);
-webkit-transform: rotate(252deg);
-moz-transform: rotate(252deg);
-o-transform: rotate(252deg);
-ms-transform: rotate(252deg);
transform: rotate(252deg);
}
.pie-slice-3 {
width: 500px;
height: 500px;
position: absolute;
background-color: #D4DF5A;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
-webkit-transform: rotate(252deg);
-moz-transform: rotate(252deg);
-o-transform: rotate(252deg);
-ms-transform: rotate(252deg);
transform: rotate(252deg);
clip: rect(0px, 500px, 500px, 250px);
}
.pie-slice-3 .pie {
width: 500px;
height: 500px;
position: absolute;
background-color: #D4DF5A;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
clip: rect(0, 250px, 500px, 0px);
-webkit-transform: rotate(342deg);
-moz-transform: rotate(342deg);
-o-transform: rotate(342deg);
-ms-transform: rotate(342deg);
transform: rotate(342deg);
}
.pie-slice-4 {
width: 500px;
height: 500px;
position: absolute;
background-color: #FEC42C;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
-webkit-transform: rotate(342deg);
-moz-transform: rotate(342deg);
-o-transform: rotate(342deg);
-ms-transform: rotate(342deg);
transform: rotate(342deg);
clip: rect(0px, 500px, 500px, 250px);
}
.pie-slice-4 .pie {
width: 500px;
height: 500px;
position: absolute;
background-color: #FEC42C;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
clip: rect(0, 250px, 500px, 0px);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment