Sass의 이미지 경로에 변수가 있습니까?


123

내 CSS 파일의 모든 이미지에 대한 루트 경로를 포함하는 하나의 변수를 갖고 싶습니다. 순수한 Sass에서 이것이 가능한지 알 수 없습니다 (실제 웹 프로젝트는 RoR이 아니므로 asset_pipeline이나 멋진 재즈를 사용할 수 없습니다).

작동하지 않는 내 예가 있습니다. 컴파일시 배경 URL 속성에서 변수의 첫 번째 인스턴스에서 ( "Invalid CSS after "..site/background": expected ")") 라고 말하는 것을 막습니다 .

경로를 반환하는 함수 정의 :

//Vars
$assetPath : "/assets/images";

//Functions
@function get-path-to-assets($assetPath){
  @return $assetPath;
}

기능 사용 :

body {
  margin: 0 auto;
  background: url($get-path-to-assets/site/background.jpg) repeat-x fixed 0 0;
  width: 100%; }

어떤 도움을 주시면 감사하겠습니다.

답변:


207

보간 구문 을 사용해 보셨습니까 ?

background: url(#{$get-path-to-assets}/site/background.jpg) repeat-x fixed 0 0;

1
CssVariablesProcessor 변수를 처리하지 않기 때문에 나를 위해하지 작업을 수행하는 경우에도 전처리로서의 세트 CssDataUriPreProcessor 전
알렉세이

1
또한 나침반 글꼴-페이스 믹스 인과 같이 인용 된 경로에서 작동합니다. '#{$fontName}.ext', ..
Fleuv

예, 인용 된 경로에서 사용하는 것이 좋습니다. 그렇지 않으면 netbeans IDE에서 오류가 표시됩니다. url ( "# {$ get-path-to-assets} /site/background.jpg")
Pons Purushothaman

94

기능 필요 없음 :

$assetPath : "/assets/images";

...

body {
  margin: 0 auto;
  background: url(#{$assetPath}/site/background.jpg) repeat-x fixed 0 0;
  width: 100%; }

자세한 내용은 보간 문서 를 참조하십시오.


7
확실히 변수에 직접 포인팅과 간결함을 선호
skia.heliou


1

위의 정답에 무언가를 추가합니다. netbeans IDE를 사용하고 있으며이 url(#{$assetPath}/site/background.jpg)방법 을 사용하는 동안 오류가 표시 됩니다. netbeans 오류 였고 sass 컴파일에 오류가 없었습니다. 그러나이 오류 중단 코드 형식은 netbeans 및 코드에서보기 흉해집니다. 하지만 아래와 같이 따옴표 안에 사용하면 경이로움!

url("#{$assetPath}/site/background.jpg")


0

절대 경로 대신 상대 경로를 사용할 수 있습니다.

$assetPath: '~src/assets/images/';
$logo-img: '#{$assetPath}logo.png';
@mixin logo {
  background-image: url(#{$logo-img});
}

.logo {
    max-width: 65px;
    @include logo;
 }
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.