Как я могу воспользоваться Sass, например, при рендеринге FizzBuzz?

Question

Мне удалось написать FizzBuzz в чистом CSS как личный Hello World, чтобы узнать, как писать таблицы стилей. Я хотел бы сделать то же самое с Сасс, но я не уверен, как я могу использовать синтаксис Sass или семантику, чтобы улучшить это.

В настоящее время у меня есть файл .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

Answer 1

Большинство людей начинают с вложенности, так что вы можете иметь что-то вроде (синтаксис 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 находятся в таких вещах, как переменные и микшины (одно из больших применений имеет дело с префиксами поставщиков и возможность разделить источник на разные файлы и скомпилировать его для одного и минимизировать).

Answer 2

Другая возможность (как упоминались 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.