最近SCSSが便利なこと知って、CSSを書くときはもっぱらSCSSを使ってます。
で、このサイトのCSSもSCSS使って書いてるのですが、メニューの段組構成をmixinの再帰で書けないかなぁと書いてみたんですが…
1 @mixin ul-loop($i : 2){
2 @if 0 < $i {
3 ul {
4 visibility : visible;
5 li {
6 ul {
7 visibility : hidden;
8 }
9 &:hover,
10 &.current,
11 a:hover,
12 a:active {
13 @include ul-loop($i - 1);
14 }
15 }
16 }
17 }
18 }
19 @include ul-loop(4);
無残にもエラーorz
Sass::SyntaxError: An @include loop has been found: ul-loop includes itself handle_include_loop! at sass/lib/sass/tree/visitors/perform.rb:424
perform.rbのSass::Tree::Visitors::Perform#handle_include_loop!(sass3.2.1)を↓のようにしちゃえば再帰もできるんだけどなぁ…
1 def handle_include_loop!(node)
2 msg = "An @include loop has been found:"
3 content_count = 0
4 mixins = @stack.reverse.map {|s| s[:name]}.compact.select do |s|
5 if s == '@content'
6 content_count += 1
7 false
8 elsif content_count > 0
9 content_count -= 1
10 false
11 else
12 true
13 end
14 end
15 return if mixins.empty?
16 true # true返しちゃう！ エラーは発生させない！
17 # raise Sass::SyntaxError.new("#{msg} #{node.name} includes itself") if mixins.size == 1
18 #
19 # msg << "\n" << Sass::Util.enum_cons(mixins.reverse + [node.name], 2).map do |m1, m2|
20 # " #{m1} includes #{m2}"
21 # end.join("\n")
22 # raise Sass::SyntaxError.new(msg)
23 end