sass - @include 断点和@include 断点有什么区别？

Question

我有一个问题，因为我正在处理我的团队正在使用@include 断点和@include at-breakpoint 的项目。我们正在使用 sass、compass 和 susy。两者有什么区别？

Answer 1

at-breakpoint是 Susy 的一部分，用于更改不同断点处的总列数。受初始语法的启发，Mason Wendell创建了一个更强大、更通用的断点插件，用于管理所有媒体查询。现在，很多人（包括我）在同一个项目中同时使用两者。它们一起工作得很好，但差异可能会令人困惑。

• 当您想根据最小/最大宽度媒体查询at-breakpoint更改 susy设置时使用。$total-columns
• 用于breakpoint更复杂的媒体查询，或者您不想更改列数的任何地方。

如果您只想使用其中一个，并且更加一致，您可以重新创建at-breakpoint使用速记的功能：

@include breakpoint($media-query) { // set your media-query
  @include layout($columns) { // set your columns
    // nested code will use the new column count at the given media-query
  }
}

at-breakpoint只是一个捷径。