Question

有没有办法让SASS模仿LESS连接重复mixin定义的方式（重新定义LESS中的mixin并不会覆盖原文）。

例如，是否可以将一组CSS规则推入缓冲区，然后立即将它们全部刷新？

实施例

我很少这样做：

// _menu.less
#_base ()    { .menu{ /*styles*/ }  }
#_mobile ()  { .menu{ /*styles*/ }  }
#_desktop () { .menu{ /*styles*/ }  }

...

// _widget.less
#_base ()    { .widget{ /*styles*/ }  }
#_mobile ()  { .widget{ /*styles*/ }  }
#_desktop () { .widget{ /*styles*/ }  }

...

然后：

// styles.less
@import "_menu.less";
@import "_widget.less";

@media screen { #_base(); }
@media screen and (max-width:700px) { #_mobile(); }
@media screen and (min-width:701px) { #_desktop(); }

...

// styles-oldie.less
@import "_menu.less";
@import "_widget.less";

@media screen {
    #_base();
    #_desktop();
}

Answer 1

据我所知，没有办法通过构建现有的mixin来复制你想要实现的目标。如果你定义一个mixin两次，第二次将覆盖第一次。 See example

AFAIK Sass中的常见做法是在选择器内部使用媒体查询mixin来保持代码的清晰和可读性。 Breakpoint是一个受欢迎的库，它为此添加了许多不错的功能。

代码的一个例子是。

@import "breakpoint";

$medium: 600px;
$large: 1000px;

$breakpoint-no-queries: false;          // Set to true to ignore media query output
$breakpoint-no-query-fallbacks: true;   // Set to true to output no-query fallbacks
$breakpoint-to-ems: true;               // Change px to ems in media-queries

.menu {
  content: "base";

  // Mobile styles
  @include breakpoint(min-width $medium - 1) {
    content: "mobile";
  }

  // Tablet styles
  @include breakpoint($medium $large) {
    content: "tablet";
  }

  // Desktop styles with no-query fallback
  @include breakpoint($large, $no-query: true) {
    content: "large";
  }

}

这可以输出（取决于您的设置）

.menu {
  content: "base";
  content: "large";
}
@media (min-width: 37.4375em) {
  .menu {
    content: "mobile";
  }
}
@media (min-width: 37.5em) and (max-width: 62.5em) {
  .menu {
    content: "tablet";
  }
}
@media (min-width: 62.5em) {
  .menu {
    content: "large";
  }
}

You can play around with the settings here

我经常使用现代浏览器的样式表来支持这样设置的媒体查询：

// main.scss
$breakpoint-no-queries: false;
$breakpoint-no-query-fallbacks: false;

@import "imports";

另一个不支持媒体查询的旧浏览器样式表

// no-mq.scss
$breakpoint-no-queries: true;
$breakpoint-no-query-fallbacks: true;

@import "imports";

LESS中添加剂混合物定义的SASS等价物是多少？

实施例

1 个答案: