Question

我希望有一个变量包含我的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%; }

任何帮助都将不胜感激。

Answer 1

您是否尝试过Interpolation语法？

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

Answer 2

不需要功能：

$assetPath : "/assets/images";

...

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

有关详细信息，请参阅interpolation docs。

Answer 3

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

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

Answer 4

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

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

Answer 5

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

add_filter( 'manage_edit-shop_order_columns', 'MY_COLUMNS_FUNCTION' );
function MY_COLUMNS_FUNCTION( $columns ) {
$new_columns = ( is_array( $columns ) ) ? $columns : array();
unset( $new_columns[ 'order_actions' ] );   

$new_columns['MY_COLUMN_ID_1'] = 'Serial';
 
$new_columns[ 'order_actions' ] = $columns[ 'order_actions' ];
return $new_columns;
}

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

5 个答案: