¿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

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

6

Estaba buscando una respuesta a la misma pregunta, pero creo que encontré una mejor solución: http://blog.grayghostvisuals.com/compass/image-url/

Básicamente, puede establecer su ruta de imagen en config.rb y usar el ayudante image-url ()

— NerdVaquero
fuente

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