¿Tiene una variable en la ruta de imágenes en Sass?

123

Quiero tener una variable que contenga la ruta raíz a todas mis imágenes en mi archivo CSS. No puedo entender si esto es posible en Sass puro (el proyecto web real no es RoR, por lo que no puedo usar asset_pipeline ni nada de ese jazz sofisticado).

Aquí está mi ejemplo que no funciona. Al compilar, se resiste en primera instancia a la variable en la propiedad url de fondo que dice ( "Invalid CSS after "..site/background": expected ")").

Definición de la función para devolver la ruta:

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

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

Usando la función:

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

Cualquier ayuda sería apreciada.

css sass programa247365
fuente

Respuestas:

207

¿Has probado la sintaxis de interpolación ?

background: url(#{$get-path-to-assets}/site/background.jpg) repeat-x fixed 0 0;
Wesley Murch
fuente
1
No me funciona porque CssVariablesProcessor no procesa variables incluso si está configurado como preprocesador antes de CssDataUriPreProcessor
Alexey
1
También funciona en rutas citadas, por ejemplo, en la brújula font-face mixin. '#{$fontName}.ext', ..
Fleuv
Sí, es mejor usarlo en la ruta citada. De lo contrario, muestra un error en netbeans IDE. url ("# {$ get-path-to-assets} /site/background.jpg")
Pons Purushothaman el
94

No hay necesidad de una función:

$assetPath : "/assets/images";

...

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

Vea los documentos de interpolación para más detalles.

steveax
fuente
77
Definitivamente prefiero la brevedad con señalar directamente a la variable
skia.heliou
1

Agregar algo a las respuestas correctas anteriores. Estoy usando netbeans IDE y muestra un error al usar url(#{$assetPath}/site/background.jpg)este método. Fue solo un error de netbeans y ningún error en la compilación sass. Pero este error al formatear el código de ruptura en netbeans y el código se vuelve feo. Pero cuando lo uso entre comillas como a continuación, ¡muestra asombro!

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

Pons Purushothaman
fuente
0

Podemos usar la ruta relativa en lugar de la ruta absoluta:

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

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