Skip to content

Instantly share code, notes, and snippets.

@rhythmus
Created July 30, 2012 22:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save rhythmus/3211338 to your computer and use it in GitHub Desktop.
Save rhythmus/3211338 to your computer and use it in GitHub Desktop.
dynamic variables for Sass (squaring the circle :-)
@mixin makecircle($method) {
// ? $height: getvalue(height).this;
// ? $width: getvalue(width).this;
@if ($method == area) {
// using https://github.com/scottkellum/Sassy-math to do the math
$radius: sqrt(($height * $width)/pi());
@include border-radius($radius);
}
height: $radius*2;
width: $radius*2;
} .myCircle {
height:10px;
width:25px;
// rectangle’s area = 250px²
@include makecircle(area);
}
// should compile to:
.myCircle {
height:17,8412411615277px;
width:17,8412411615277px;
border-radius:8,92062058076386px;
// circle’s area = 250px²
}
// Okay, maybe I’m [en.wikipedia.org/wiki/Squaring_the_circle] here :-).
// But my real problem at hand is how to have Sass dynamically get the
// initial values for $height and $width, in order to have them recalculated
// by the mixin. Will this be possible in Sass?
// cfr: http://stackoverflow.com/questions/9394514/how-to-get-the-value-of-a-css-property-in-sass
// cfr: http://stackoverflow.com/questions/10377464/sass-get-value-of-existing-background-string-and-add-to-it
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment