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

Program / 글쓴이

내 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%; }

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

답변

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

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

답변

기능 필요 없음 :

$assetPath : "/assets/images";

...

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

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

답변

같은 질문에 대한 답을 찾고 있었지만 더 나은 해결책을 찾았다 고 생각합니다 : http://blog.grayghostvisuals.com/compass/image-url/

기본적으로 config.rb에서 이미지 경로를 설정할 수 있으며 image-url () 도우미를 사용합니다.

답변

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

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

답변

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

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

.logo {
    max-width: 65px;
    @include logo;
 }

답변