-1

スタイルシートの書き方を学ぶために、FizzBu​​zz を純粋な CSS で個人用の Hello World のように書くことができました。私は Sass で同じことをしたいと思っていますが、Sass の構文やセマンティクスを利用してこれを改善する方法がわかりません。

現在、FizzBu​​zz を一緒にレンダリングする .html ファイルと .scss ファイルがありますが、.scss ファイルはまだ純粋な CSS コードです。Sass 拡張機能を使用して、より簡潔に、または表現力を高めるにはどうすればよいでしょうか?

例：

body { counter-reset: i; }

div { counter-increment: i; }
div:after { content: "" counter(i); }

div:nth-child(3n) { visibility: hidden; }
div:nth-child(3n):after { visibility: visible; content: "Fizz"; }

div:nth-child(5n) { visibility: hidden; }
div:nth-child(5n):after { visibility: visible; content: "Buzz"; }

div:nth-child(15n) { visibility: hidden; }
div:nth-child(15n):after { visibility: visible; content: "FizzBuzz"; }

ソース：

https://github.com/mcandre/mcandre/tree/master/sass

4

2 に答える 2

0

ほとんどの人はネストから始めるので、次のようなものがあるかもしれません (Scss 構文、ところで):

div {
  counter-increment: i;

  &:nth-child(3n) {
    visibility: hidden;

    &:after {
      visibility: visible;
      content: "Fizz";
    }
  }
// Repeat for remainder :nth-child declarations
}

記号は、&それがまだ「親」要素であることを意味します (つまり、 - &:nth-child(3n)= div:nth-child(3n))。

この特定の例では、それを Sass に変換し、そうすることの多くの利点を示す余地があまりありません。Sass のパワーの一部は、変数や mixin などに存在します (大きな用途の 1 つは、ベンダー プレフィックスを処理し、ソースを複数のファイルに分割し、すべてを 1 つにコンパイルして縮小することです)。

于 2013-08-02T19:33:24.353 に答える
0

別の可能性 (Shauna が述べたように) を使用して@whileループ@mixinを自動化することです。

SCSS

@mixin fizzBuzz($count) {
    @if $count % 5 == 0  and $count % 3 == 0 {
      @extend .buzzDiv;
      &:after {
       content: "FizzBuzz";
      }
    }
    @else if $count % 3 == 0 {
      @extend .buzzDiv;
      &:after {
        content: "Fizz";
      }
    }
    @else if $count % 5 == 0 {
      @extend .buzzDiv;
      &:after {
        content: "Buzz";
      }
    }
    @else {
      &:after {
        content:"#{$counter}"
      }
    }
}

// reduce our css bloat
.buzzDiv {
  visibility: hidden;
  &:after {
    visibility:visible;
  }
}


$counter: 1;

@while $counter <= 100 {
  div.no#{$counter} {
    @include fizzBuzz($counter)
  }
  $counter: $counter + 1;
}

コデペン

制御構造を記述するにはもっと洗練された方法があるかもしれません (ここでも少し繰り返します)。

SASS コントロール ディレクティブの詳細については、こちらを参照してください。

于 2013-08-02T21:24:40.077 に答える