css - mixin - sass--watch

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

Question

Quiero tener una variable que contenga la ruta de acceso 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 puede usar asset_pipeline o cualquiera de esos elegantes jazz).

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

Definir 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.

Answer 1

¿Has probado la sintaxis de Interpolation ?

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

Answer 2

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, puedes establecer tu ruta de imagen en config.rb y usar el helper image-url ()

Answer 3

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

Ver los Interpolation para más detalles.