时间戳

首页 > 解决方案 > 如何将浮点数转换为带有转义字符的字符串（用于类选择器）

sass - 如何将浮点数转换为带有转义字符的字符串（用于类选择器）

问题描述

我想从 mixin 生成类选择器，将浮点数传递给然后将浮点数转换为rem
带有转义字符的字符串，
例如1.61\.6

预期产出

.u-text-1\.6 {
  font-size: 1.6rem;
  line-height: 2.4rem;
}

示例混合

@mixin utility-text-size($font-rem, $line-height-rem) {
  .u-text-#{<how-to-convert-font-rem?>} {
    font-size: #{$font-rem}rem;
    line-height: #{$line-height-rem}rem;
  }

  .\!u-text-#{<how-to-convert-font-rem?>} {
    font-size: #{$font-rem}rem !important;
    line-height: #{$line-height-rem}rem !important;
  }
}

@include utility-text-size(1.6, 2.4);

我怎样才能完成它？

标签： sassscss-mixins

解决方案

您可以使用由 Kitty Giraudel 编写并在css-tricks上提供的惊人的str-replace-function。

您将查找子字符串.并将其替换为\.

@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);
  
  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }
  
  @return $string;
}

@mixin utility-text-size($font-rem, $line-height-rem) {
    $escapedString : str-replace($font-rem + '', '.', \.);
    .u-text-#{$escapedString} {
        font-size: #{$font-rem}rem;
        line-height: #{$line-height-rem}rem;
    }
}

@include utility-text-size(1.6, 2.4);

推荐阅读