Skip to content

Instantly share code, notes, and snippets.

@akaneko3

akaneko3/_function.scss

Last active August 29, 2015 14:10
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 akaneko3/a9a7730d6766fbb16294 to your computer and use it in GitHub Desktop.
Save akaneko3/a9a7730d6766fbb16294 to your computer and use it in GitHub Desktop.
Download ZIP
FizzBuzz with jQuery and Sass
Raw
_function.scss
@function gcd($a, $b) {
@if $b == 0 {
@return $a;
} @else {
@return gcd($b, $a % $b);
}
}
@function lcm($a, $b) {
@return $a * $b / gcd($a, $b);
}
Raw
fizzbuzz.html
<!doctype html>
<html>
<head>
<title>jQuery + Sass で FizzBuzz</title>
<link rel="stylesheet" href="css/fizzbuzz.css" type="text/css">
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<ul></ul>
<script src="js/fizzbuzz.js"></script>
</body>
</html>
Raw
fizzbuzz.js
$(function () {
for (var i = 0; i++ < 100; )
$("ul").append("<li>" + fizzbuzz(i) + "</li>");
});
function fizzbuzz(i) {
var str = "";
if (i % 3 == 0) str += "Fizz";
if (i % 5 == 0) str += "Buzz";
return str == "" ? i : str;
}
Raw
fizzbuzz.scss
@import "function";
@mixin fizzbuzz($fizz: 3, $buzz: 5, $fizzColor: red, $buzzColor: blue) {
li {
&:nth-child(#{$fizz}n) { color : $fizzColor; }
&:nth-child(#{$buzz}n) { color : $buzzColor; }
&:nth-child(#{lcm($fizz, $buzz)}n) { color : mix($fizzColor, $buzzColor, 50%); }
}
}
ul {
list-style-type : none;
@include fizzbuzz;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment