Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Black_Star
21 / 21 / 16
Регистрация: 06.05.2016
Сообщений: 249
#1

SCSS генератор случайного цвета, запись в переменную - HTML, CSS

25.03.2017, 10:52. Просмотров 140. Ответов 2
Метки нет (Все метки)

Добрый день уважаемые. Подскажите, пожалуйста как в SCSS занести сгенерируемые значения цвета в "некую переменную" для последующей работы с ними? Приведу простой пример http://codepen.io/anon/pen/NpBPaR

http://www.cyberforum.ru/html/thread1494785.html
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="bigBlock">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>
<div class="bigBlock">
  <div class="block2"></div>
  <div class="block2"></div>
  <div class="block2"></div>
  <div class="block2"></div>
  <div class="block2"></div>
  <div class="block2"></div>
  <div class="block2"></div>
  <div class="block2"></div>
  <div class="block2"></div>
  <div class="block2"></div>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.bigBlock {
  width: 100%;
  height: 100%;
  border: 1px solid #f00;
}
 
.block, .block2 {
  position: relative;
  display: inline-block;
  font-size: 0;
  width: 50px;
  height: 50px;
  border: 1px solid #000;
}
 
$rainbow_segments: 10;
$s-min: 30;
$s-max: 90;
$l-min: 10;
$l-max: 90;
.bigBlock {
  @for $i from 1 through $rainbow_segments {
    .block:nth-child(#{$i})  {
      background-color: hsl(random(360), $s-min+random($s-max+-$s-min), $l-min+random($l-max+-$l-min));
    }
  }
}
Как сделать так что б блоки с классом .block2 были на порядок (темнее/светлее) чем блоки над ними с классом .block?
Как получать значения случайного цвета из цикла, что б потом с ним рабтать?
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
25.03.2017, 10:52
Я подобрал для вас темы с готовыми решениями и ответами на вопрос SCSS генератор случайного цвета, запись в переменную (HTML, CSS):

SCSS переменные
Всем привет, хочу попрактиковатся с SASS. Оптимизировать css style с помощью...

Не определяется переменная $i в SCSS
Здраствуйте! у меня возникла вот такая проблема, мне нужно задать верхним...

Готовые SCSS-решения
Изучаю sass, почитал теорию, посмотрел базисы, небольшое применение нашел в...

Sublime Text 3 и SCSS
Никак не могу поставить нормальный плагин для scss. В том плане что не работает...

Медиа-запрос scss
Возник такой вопрос(спор) 2 варианта написания медиа-запроса 1 вариант ...

2
mrtoxas
Модератор
Эксперт HTML/CSS
2548 / 1885 / 1177
Регистрация: 12.07.2015
Сообщений: 5,091
Записей в блоге: 3
26.03.2017, 09:54 #2
Больше в голову ничего не приходит
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
/* SCSS-code */
 
.bigBlock {
  @for $i from 1 through $rainbow_segments {
    $col: hsl(random(360), $s-min+random($s-max+-$s-min), $l-min+random($l-max+-$l-min));
    .block:nth-child(#{$i}) {
      background-color: $col;
    }
    .block2:nth-child(#{$i}) {
      background-color: darken( $col, 20%)
    }
  }
}
1
Black_Star
21 / 21 / 16
Регистрация: 06.05.2016
Сообщений: 249
26.03.2017, 11:10  [ТС] #3
Шикарно, то что надо. Огромное спасибо
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
26.03.2017, 11:10
Привет! Вот еще темы с решениями:

Maps и цикл for в SCSS
Добрый день уважаемые. Только недавно взялся изучать SCSS возник вопрос по...

Отличия CSS, SCSS, SASS
Собственно, сабж. Листая список вакансия вижу требование - знание SCSS. И чем...

Туториалы по верстке magento scss
Здравствуйте. Нужно разобраться в верстке сайта magento. Предполагаю, что...

Выбивание галпа при компиляцие SCSS в CSS
Столкнулся со странной проблемой, когда редактирую scss файл и сохраняю, иногда...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru