Используя 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 и Компас Ссылка И знаете, что должен быть способ сделать это.

10
compass-sass css sass

2 ответов

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

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

код Sass:

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

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

.foo { opacity: 0.44; }
27

в то время как SASS не предоставляет это как встроенную функцию, вы, безусловно, можете добавить пользовательскую функцию для выполнения преобразования. Взглянув на источник для percentage (), я сделал удар по тому, как будет выглядеть функция 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
2