Использование Sass, как преобразовать процент в десятичный знак?

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

Я использую метод Sass lightness() для получения процента оттенков. Я хочу преобразовать этот процент в десятичное значение, используемое при определении прозрачности цвета rgba().

Вот пример SCSS, который не скомпилируется, поскольку $transparent-color требует значения $alpha, которое является десятичным, а не процентом.

$color: hsl(50deg, 50%, 50%);
$alpha: lightness($color);
$transparent-color: rgba(0,0,0,$alpha);
.foo { background: $transparent-color }

Я искал решения в Sass Documentation и Ссылка на Compass и знаете, что должен быть способ сделать это.

Ответ 1

Вы можете использовать математику Sass для преобразования процента в десятичное значение путем деления процента на 100%.

Когда вы делите процент на процент, результат будет десятичным.

Код Sass:

$percent: 44%
.foo
  opacity: $percent / 100%

Скомпилирован в CSS:

.foo { opacity: 0.44; }

Ответ 2

В то время как SASS не предоставляет это как встроенную функцию, вы могли бы добавить пользовательскую функцию для выполнения преобразования. Взглянув на источник для процента(), я взял удар, на который будет выглядеть функция decimal():

def decimal(value)
  unless value.is_a?(Sass::Script::Number) && value.unit_str == "%"
    raise ArgumentError.new("#{value.inspect} is not a percent")
  end
  Sass::Script::Number.new(value.value / 100.0)
end

Ответ 3

вот скрипт @Rhysyngsun ruby как функция scss:


// https://github.com/sass/sass/issues/533#issuecomment-11675408
@function strip-unit($number) {
    @return $number / ($number * 0 + 1);
}


@function decimal($v) {
    @if (type_of($v) != number OR unit($v) != "%") {
        @error "decimal: '#{$v}' is not a percent";
    }
    @return strip-unit($v) / 100
}