使用URL Sass后台mixins [英] sass background mixins using url

问题描述

伙计们我想创建一个背景mixin而不是写重复的URL

guys i would like to create a background mixin instead writing repeated url

 @mixin bgimage($name){
  $url:"../images/$name.png";
 background: url($url);}

，并且从不接受对$ name变量

and,it never accept the valuee to $name variable

我叫

     @include bgimage(name.png);

在CSS中，输出是这样的错误

and in css the output is came wrong like this

     background: url("../images/$name.png");

有什么方法可以在mixin中写入url吗？

is there any way to write the url in mixin ? ot how to do it in short way

推荐答案

尝试使用变量＃{$ name}

@mixin bgimage($name) {
  $url:"../images/#{$name}.png";
  background: url($url);
}

并传递不带扩展名的文件名作为mixin参数：

and pass the filename, without extension, as a mixin parameter:

@include bgimage(your-png-file-without-extension);

因为它已经附加在 $ url 您的mixin变量

since it is already appended in the $url variable of your mixin

这篇关于使用URL Sass后台mixins的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！