Форум программистов, компьютерный форум, киберфорум
Наши страницы

HTML, CSS

Войти
Регистрация
Восстановить пароль
 
Black_Star
20 / 20 / 9
Регистрация: 06.05.2016
Сообщений: 237
#1

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

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

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

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
Лучшие ответы (1)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
25.03.2017, 10:52
Здравствуйте! Я подобрал для вас темы с ответами на вопрос SCSS генератор случайного цвета, запись в переменную (HTML, CSS):

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

учебник по less и scss - HTML, CSS
Подскажите автора или книгу - никак не могу найти толковый учебник по этим направлениям

Медиа-запрос scss - HTML, CSS
Возник такой вопрос(спор) 2 варианта написания медиа-запроса 1 вариант .classname { ... @media (max-width: 991px) { ...

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

Готовые SCSS-решения - HTML, CSS
Изучаю sass, почитал теорию, посмотрел базисы, небольшое применение нашел в своих проектах, но какой то глобальной панацеи к сожалению,...

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

2
mrtoxas
Модератор
Эксперт HTML/CSS
2426 / 1744 / 972
Регистрация: 12.07.2015
Сообщений: 4,747
Записей в блоге: 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
20 / 20 / 9
Регистрация: 06.05.2016
Сообщений: 237
26.03.2017, 11:10  [ТС] #3
Шикарно, то что надо. Огромное спасибо
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
26.03.2017, 11:10
Привет! Вот еще темы с ответами:

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

Как работать с функциями, cos sin, SCSS - HTML, CSS
Добрый день уважаемые, вот нашел функции под SCSS подскажите как из подключить? Допустим мне необходимо сместить див на cos(0grad)...

Как установить scss и что это такое? - HTML, CSS
Для меня это новое понятие препроцессор scss, но понадобилось его использовать. Обьясните пожалуйста, можно ли его подключить к сайту,...

Sass , в dew tools отображаются файлы scss - HTML, CSS
Не смог найти информации почему так, недавно начал осваивать sass. Вообщем подключаю в шапке обычный css файл который собрался через...


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

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

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