Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
449 views
in Technique[技术] by (71.8m points)

sass mixin 可以嵌套media吗?

@mixin bg-image($url) {
  @media (-webkit-min-device-pixel-ratio:3),(min-device-pixe-ratio:3) {
    img: url($url + "@3x.png");
  };
  img: url($url + "@2x.png");
}
引用代码:
    .brand
      display: inline-block
      width: 30px
      height: 18px
      background:
        size: 30px 18px
        repeat: no-repeat
        @include bg-image('brand')

报错代码:

./~/css-loader?{"minimize":false,"sourceMap":false}!./~/vue-loader/lib/style-rewriter.js?{"id":"data-v-560c675e","scoped":false,"hasInlineConfig":false}!./~/sass-loader/lib/loader.js?{"indentedSyntax":true,"sourceMap":false}!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/header/header.vue
Module build failed: 
  @media (-webkit-min-device-pixel-ratio:3),(min-device-pixe-ratio:3) {
 ^
      Illegal nesting: Only properties may be nested beneath properties.
      in D:studycodemySelfoutSellsrccommonsassmixin.scss (line 17, column 3)
 @ ./~/vue-style-loader!./~/css-loader?{"minimize":false,"sourceMap":false}!./~/vue-loader/lib/style-rewriter.js?{"id":"data-v-560c675e","scoped":false,"hasInlineConfig":false}!./~/sass-loader/lib/loader.js?{"indentedSyntax":true,"sourceMap":false}!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/header/header.vue 4:14-412 13:3-17:5 14:22-420
 @ ./src/components/header/header.vue
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
 @ ./src/App.vue
 @ ./src/main.js
 @ multi ./build/dev-client ./src/main.js

请问各位大牛 mixin是不是不可以嵌套 media使用,如果不可以的话 ,我这段代码应该怎么改?


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

问题已经解决了,
mixin 里面应该用

background:
  image:$url

而 sass中把 include 放到 background外面调用即可


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...