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

CSS

Tom老丝

2020-03-17

我想要一个变量,该变量包含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%; }

任何帮助,将不胜感激。

第1971篇《Sass的图像路径中有变量吗?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

4个回答
Tony伽罗米亚 2020.03.17

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

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

泡芙古一神无 2020.03.17

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

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

Gil猿 2020.03.17

无需功能:

$assetPath : "/assets/images";

...

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

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

村村 2020.03.17

您是否尝试过插值语法?

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android