我如何利用Sass來渲染FizzBuzz？

-1

我設法在純CSS中編寫FizzBuzz作爲一種個人Hello World來學習如何編寫樣式表。我希望對Sass也做同樣的事情，但我不確定如何使用Sass語法或語義來改善這一點。我如何利用Sass來渲染FizzBuzz？

目前，我已經有一個.html文件和.scss文件一起渲染FizzBuzz，但.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

來源

2013-08-02 apennebaker

大多數人嵌套開始，所以你可能有這樣的事情（SCSS語法，順便說一句）：

div { 
    counter-increment: i; 

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

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

&符號表示它仍然是「父」ele （即 - &:nth-child(3n) = div:nth-child(3n)）。

這個特殊的例子沒有提供很大的空間把它變成Sass並顯示了很多這樣做的好處。 Sass的一些功能駐留在變量和mixins之類的東西中（其中一個重要用途是處理供應商前綴，並能夠將源文件拆分爲不同的文件，並將它們全部編譯爲一個並縮小）。

來源

2013-08-02 19:33:24 Shauna

謝謝！ LESS是否爲嵌套選擇器提供了類似的語法？ – apennebaker

@apennebaker - 我不使用LESS，但我的理解是肯定的，確實如此。實際上，LESS和Sass在功能方面非常相似（Sass有一個叫LESS沒有的「佔位符」，但就是這個）。兩者之間的主要區別在於它們用於編譯源代碼的語言。 – 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; 
}

Codepen

可能有更優雅寫作控制結構的方式（我仍然在這裏重複一下），但是這個作品可讓您在「縮放」時保存幾個按鍵。

有關SASS控制指令here的更多信息。

來源

2013-08-02 21:24:40

我如何利用Sass來渲染FizzBu​​zz？

回答

相關問題

我如何利用Sass來渲染FizzBuzz？