Можно ли создавать случайные числа в SASS / Compass? - PullRequest
Новая
       4

Можно ли создавать случайные числа в SASS / Compass?

4 голосов
/ 25 декабря 2011

Я работаю над проектом, в котором я использую SASS и Compass, и мне нужно как-то придумать случайные числа в файле CSS. В частности, мне нужны числа с плавающей запятой от 0 до 1. Это возможно только с SASS и Compass?

Ответы [ 3 ]

9 голосов
/ 01 января 2012

Это очень возможно, если вы создаете функцию sass, поскольку sass является ruby, так же просто, как открыть функциональный модуль и ввести произвольную функцию 

module Sass::Script::Functions
  module MyRandom
    def random
      rand(1.0)
    end
  end
  include MyRandom
end

требует файл после загрузки sass

Тогда в вашей таблице стилей 

$my-randome-number: random();
3 голосов
/ 21 мая 2013

Да, как сказал Скотт, это возможно, но я не программист на Rails, поэтому я просто хотел скопировать и вставить код, но сначала я не знал, где разместить код, а потом он не работал. Мне пришлось потренироваться с обрезанным и расширить его до большей гибкости, в которой я нуждался: 

module Sass::Script::Functions
  module USW_Random
    ## Create random Color
    #  inspired by: http://victorcoulon.fr/generating-random-color-in-sass/
    #
    def usw_randomColor()
      Sass::Script::Color.new([rand(255), rand(255), rand(255)])
    end

    ## Create random Number
    #  int max [optional] if max is not supplied a float between 0 and 1 is returned.
    #                     if max is supplied, an Integer between 0 and max (both inclusive) will be returned.
    #  int min [optional] if min is supplied too, an Integer between min and max (both inclusive) will be returned.
    #
    def usw_random(max=-1, min=0)
        Sass::Script::Number.new( max.to_i < 0 ? rand() : rand(min.to_i .. max.to_i ))
    end
  end
  include USW_Random
end

Это можно использовать в файле SCSS следующим образом: 

@debug usw_random();
@debug usw_random(10);  
@debug usw_random(8, 2);               
@debug usw_randomColor();

и распечатает: 

xxx.scss:25 DEBUG: 0.42782
xxx.scss:26 DEBUG: 3
xxx.scss:27 DEBUG: 5
xxx.scss:28 DEBUG: #e7c00b

Я также не знал, где поставить Код для этого. Я использую SASS в рамках компаса. Вы можете поместить этот код непосредственно в файл Compass Config.rb.

Или вы помещаете его в другой файл и добавляете только эту строку в файл Compass Config.rb: 

## my "own" ruby functions. 
require "../SASS/RUBY/at.usw.rb"
1 голос
/ 06 октября 2015

Обновление: В Sass 3.3 (2014) теперь есть встроенная функция random():
http://sass -lang.com / документация / Sass / Script / functions.html # случайных instance_method 

$number: random()

Вы также можете создать свою собственную простую seedded случайную функцию в Sass. Пример (SCSS): 

/* YOUR SEED HERE: */
$seed: 369;

@function getRandom($max) {
    //http://indiegamr.com/generate-repeatable-random-numbers-in-js/

    //Note the "!global" flag:
    //http://webdesign.tutsplus.com/articles/understanding-variable-scope-in-sass--cms-23498
    $seed: ($seed * 9301 + 49297) % 233280 !global;
    @return ($seed / 233280) * $max;
}

.my-class {
    height: getRandom(200) + px;
    opacity: getRandom(1);
}

http://codepen.io/Sphinxxxx/pen/Gpmmye

...