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

Question

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 Reference и знаю, что должно бытьспособ сделать это.

Answer 1

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

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

Sass код:

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

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

.foo { opacity: 0.44; }

Answer 2

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

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

Answer 3

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

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