Sass的图像路径中有变量吗？

123

我想要一个包含CSS文件中所有图像的根路径的变量。我不太确定这是否可以在纯Sass中实现（实际的Web项目不是RoR，因此不能使用asset_pipeline或任何花哨的爵士乐）。

这是我的示例不起作用。进行编译时，它会在后台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%; }

任何帮助，将不胜感激。

css sass

— 程序247365
source

207

您是否尝试过插值语法？

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

— 韦斯利·默奇（Wesley Murch）
source

1

它对我不起作用，因为CssVariablesProcessor不会处理变量，即使将其设置为CssDataUriPreProcessor之前的预处理程序

— Alexey

1

也可以在带引号的路径中使用，例如在指南针字体混合中。'#{$fontName}.ext', ..

— Fleuv

是的，最好在引用路径中使用。否则，它将显示netbeans IDE中的错误。URL（ “＃{$获取路径与资产} /site/background.jpg”）

— 庞斯Purushothaman

94

无需功能：

$assetPath : "/assets/images";

...

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

有关详细信息，请参见插值文档。

— Steveax
source

7

直接指向变量绝对是简洁的

— 做法

6

在寻找相同问题的答案，但认为我找到了更好的解决方案：http : //blog.grayghostvisuals.com/compass/image-url/

基本上，您可以在config.rb中设置图像路径，并使用image-url（）帮助器

— 书呆子牛仔
source

1

在上面的正确答案中添加一些内容。我正在使用netbeans IDE，使用url(#{$assetPath}/site/background.jpg)此方法时会显示错误。这只是netbeans错误，而在sass编译中没有错误。但是在netbeans中这种错误中断代码格式和代码变得丑陋。但是，当我在如下所示的引号中使用它时，它会发出惊奇！

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

— Pons Purushothaman
source

0

我们可以使用相对路径代替绝对路径：

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

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

— 阿尔吉·乔治（Aarji George）
source