Tem uma variável no caminho das imagens no Sass?


123

Quero ter uma variável que contenha o caminho raiz para todas as minhas imagens no meu arquivo CSS. Não consigo descobrir se isso é possível no Sass puro (o projeto da Web atual não é o RoR, portanto, não é possível usar asset_pipeline ou nada desse jazz sofisticado).

Aqui está o meu exemplo que não funciona. Na compilação, ele rejeita a primeira instância da variável na propriedade url em segundo plano, dizendo ( "Invalid CSS after "..site/background": expected ")").

Definindo a função para retornar o caminho:

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

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

Usando a função:

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

Qualquer ajuda seria apreciada.

Respostas:


207

Você já tentou a sintaxe de interpolação ?

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

1
Ele não funciona para mim, porque CssVariablesProcessor não processa variáveis mesmo que o seu conjunto como pré-processador antes CssDataUriPreProcessor
Alexey

1
Também funciona em caminhos citados, por exemplo, no mixin da face da fonte da bússola. '#{$fontName}.ext', ..
Fleuv

Sim, é melhor usar no caminho entre aspas. Por outro lado, mostra erro no netbeans IDE. url ("# {$ get-path-to-assets} /site/background.jpg")
Pons Purushothaman

94

Não há necessidade de uma função:

$assetPath : "/assets/images";

...

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

Consulte os documentos de interpolação para obter detalhes.


7
Definitivamente prefiro a brevidade com apontar diretamente para a variável
skia.heliou


1

Adicionando algo às respostas corretas acima. Estou usando o Netbeans IDE e ele mostra erro ao usar url(#{$assetPath}/site/background.jpg)esse método. Foi apenas um erro do netbeans e nenhum erro na compilação do sass. Mas esse erro de formatação de código no netbeans e código se torna feio. Mas quando eu o uso dentro de aspas como abaixo, isso mostra maravilha!

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


0

Podemos usar o caminho relativo em vez do caminho absoluto:

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

.logo {
    max-width: 65px;
    @include logo;
 }
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.