IT story

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

hot-time 2020. 7. 30. 09:48
반응형

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


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

작동하지 않는 예제가 있습니다. 컴파일 할 때 background 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")

참고 URL : https://stackoverflow.com/questions/8608498/have-a-variable-in-images-path-in-sass

반응형