используйте названия классов, чтобы придать определенный цвет, используя mixin в scss - PullRequest
Новая
       2

используйте названия классов, чтобы придать определенный цвет, используя mixin в scss

0 голосов
/ 08 ноября 2018

Я начинаю практиковаться с sass и хочу установить любой цвет с процентным соотношением красного, зеленого и синего в классе. Итак, имя класса color-50-10-60 означает 50% красного, 10% зеленого и 60% синего, числа могут меняться только в количествах 10 на 10, поэтому могут быть только цифры, такие как 10, 20, 30, 40 ... до 100, если я изменяю числа, у которых название класса должно поменять цвет, я знаю, что должен использовать mixin, чтобы получить его, но я просто не понимаю, как это сделать, чтобы достичь цели. Любая помощь?

1 Ответ

0 голосов
/ 08 ноября 2018

Я думаю, невозможно (технически возможно, но бесполезно) создать отдельный класс для каждого цвета RGB.

Мы должны начать со слов. SASS - это препроцессор, т. Е. Происходит раньше всего: перед вашим CSS, вашим HTML, вашим JAVASCRIPT ... и он (SASS) не может логически знать, что вы напишете в своем HTML, но только представьте (CSS attr() имеет потенциал, но также и большие ограничения https://caniuse.com/#search=attr() ...).

Если вы напишите что-то вроде этого <div class="color-50-10-60">, в вашем CSS уже должно быть определение этого класса. Поэтому, когда вы пишете свой SCSS перед созданием этого <div>, вы должны представить, что будете использовать этот класс.

Но, вы знаете, вы можете создать ограниченный диапазон цветов (10-20 цветовых классов с определенным миксином, если вы действительно хотите). Конечно, вы не можете создать их все, потому что RGB имеет 16,777,216 возможных значений цвета и ... безумно думать о создании 16 миллионов классов (^ _ ^;)

Затем вы должны сначала создать свой <div class="color-50-10-60">, а затем прочитать эти значения, создав CSS-класс для управления ими: для этого вы можете использовать javascript. Это ваш способ достижения цели. :)

Но, я знаю, вы хотите решение CSS. Тогда ... используйте <div style="color:rgb(50,10,60);">: это кросс-браузер, и он работает очень хорошо! ;)

РЕДАКТИРОВАТЬ 1

После вашего редактирования это возможное решение для вас: оно работает с диапазоном цветов (как я сказал в комментариях, оно работает с циклами с 3 переменными ... но для меня это безумие! :-) ): 

@for $i from 1 through 10 {
    @for $j from 1 through 10 {
      @for $k from 1 through 10 {
      .color-#{$i*10}-#{$j*10}-#{$k*10}{
        color:rgb($i*10,$j*10,$k*10);
      }
    }
  }
}

Я создал sassmeister для вас:

...