Sass中的字符串替换
Sass 3.2.1 如何在字符串中替换文本的某些部分?例如,从颜色#fefefe中删除一个破折号#,使其成为fefefe 谢谢 简单的临时解决方案(以我的Mac为例):Sass中的字符串替换,sass,Sass,Sass 3.2.1 如何在字符串中替换文本的某些部分?例如,从颜色#fefefe中删除一个破折号#,使其成为fefefe 谢谢 简单的临时解决方案(以我的Mac为例): 这是我刚刚使用的一个函数 SCSS-FUNCTION /// Replace `$search` with `$replace` in `$string` /// @author Hugo Giraudel /// @param {String} $string - Initial string /// @param {Str
这是我刚刚使用的一个函数 SCSS-FUNCTION
/// Replace `$search` with `$replace` in `$string`
/// @author Hugo Giraudel
/// @param {String} $string - Initial string
/// @param {String} $search - Substring to replace
/// @param {String} $replace ('') - New value
/// @return {String} - Updated string
@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;
}
SCSS-用法:
.selector {
$string: 'The answer to life the universe and everything is 42.';
content: str-replace($string, 'e', 'xoxo');
}
.selector {
content: "Thxoxo answxoxor to lifxoxo thxoxo univxoxorsxoxo and xoxovxoxorything is 42.";
}
@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
$color-blue-night: #172b47
$icon-normal: str-replace('' + $color-blue-night, '#', '')
.test {
color: "172b47"; }
SCSS-RESULT:
.selector {
$string: 'The answer to life the universe and everything is 42.';
content: str-replace($string, 'e', 'xoxo');
}
.selector {
content: "Thxoxo answxoxor to lifxoxo thxoxo univxoxorsxoxo and xoxovxoxorything is 42.";
}
@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
$color-blue-night: #172b47
$icon-normal: str-replace('' + $color-blue-night, '#', '')
.test {
color: "172b47"; }
我使用缩进样式的SASS,因此这是我的转换,以获得一个颜色变量,在背景中替换为数据:href内联编码的css svg图像。#需要url编码,我使用全局颜色,只需在一个地方替换,即可工作
SASS-FUNCTION:
.selector {
$string: 'The answer to life the universe and everything is 42.';
content: str-replace($string, 'e', 'xoxo');
}
.selector {
content: "Thxoxo answxoxor to lifxoxo thxoxo univxoxorsxoxo and xoxovxoxorything is 42.";
}
@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
$color-blue-night: #172b47
$icon-normal: str-replace('' + $color-blue-night, '#', '')
.test {
color: "172b47"; }
SASS-USAGE:
.selector {
$string: 'The answer to life the universe and everything is 42.';
content: str-replace($string, 'e', 'xoxo');
}
.selector {
content: "Thxoxo answxoxor to lifxoxo thxoxo univxoxorsxoxo and xoxovxoxorything is 42.";
}
@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
$color-blue-night: #172b47
$icon-normal: str-replace('' + $color-blue-night, '#', '')
.test {
color: "172b47"; }
或者举个明确的例子
.test
color: str-replace('' + $color-blue-night, '#', '')
SASS-RESULT:
.selector {
$string: 'The answer to life the universe and everything is 42.';
content: str-replace($string, 'e', 'xoxo');
}
.selector {
content: "Thxoxo answxoxor to lifxoxo thxoxo univxoxorsxoxo and xoxovxoxorything is 42.";
}
@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
$color-blue-night: #172b47
$icon-normal: str-replace('' + $color-blue-night, '#', '')
.test {
color: "172b47"; }
字符串操作目前不是核心语言的一部分,但它看起来可能会在将来添加:请参阅此处的“添加自定义函数”一节:这里有一些更简洁的解决方案,用于在不使用
的情况下获取颜色值:scss.test{color:str replace(#{$color blue night},'.'}