2012-10-04 3 views
10

Sass 3.2.1Sass에서 문자열 교체

문자열의 일부를 텍스트로 바꾸는 방법은 무엇입니까? 예를 들어, 색상 #fefefe에서 대시 #을 제거하여 fefefe로 만듭니다.

감사합니다.

+1

문자열 조작은 현재 핵심 언어의 일부가 아니지만, 그것은 향후에 추가 될 수 있습니다 다음과 같습니다 https://github.com/nex3/sass/pull/401 힌트 – cimmanon

+0

감사합니다! –

답변

0

간단한 일시적인 해결책 (Mac 용 내 경우) :

다음
$ git clone -b string_functions https://github.com/chriseppstein/sass 
$ cd sass 
$ sudo rake install 

$ sudo mv /usr/bin/sass /usr/bin/sass.orig 
$ sudo ln -s /Library/Ruby/Gems/1.8/gems/sass-3.2.0.alpha.0/bin/sass /usr/bin/sass 
+1

"사용자 정의 함수 추가"섹션을 참조하십시오. http://sass-lang.com/documentation/Sass/Script/Functions.html – svallory

10

난 그냥 사용하는 기능입니다!

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'); 
} 

SCSS-RESULT :

.selector { 
    content: "Thxoxo answxoxor to lifxoxo thxoxo univxoxorsxoxo and xoxovxoxorything is 42."; 
} 

Source of SCSS-example

들여 쓰기 된 스타일이있는 SASS를 사용하므로 데이터 변환을위한 배경색을 html 인라인 인코딩 된 css svg-image로 바꾸는 색상 변환을 얻으려고 내 변환입니다. #은 URL로 인코딩해야하며 한 곳에서 바꿔주고 단순히 작업 만하면되는 글로벌 색상을 사용합니다!

SASS-기능 :

@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 

SASS-사용법 : :

$color-blue-night: #172b47  
$icon-normal: str-replace('' + $color-blue-night, '#', '') 

또는 명확한 예를

.test 
    color: str-replace('' + $color-blue-night, '#', '') 

SASS-결과에 대한

.test { 
    color: "172b47"; }