跨个别文件使用@extend的SASS/SCSS（响应式设计）

Question

我在我的网站上采用了“移动优先”的方法，并使用SCSS。

我有3个SCSS样式表：

• base.scss（适用于所有设备）
• medium.scss（窗口宽度>= 768px）
• large.scss（窗口宽度>= 1024px）

它们是这样提供的：

<link rel="stylesheet" href="/css/base.css" type="text/css" />
<link rel="stylesheet" href="/css/medium.css" type="text/css" media="only screen and (min-width: 767px)" />
<link rel="stylesheet" href="/css/large.css" type="text/css" media="only screen and (min-width: 1023px)" />

换句话说，large.scss 不知道 base.scss 中的 css 内容，但我需要在 large.scss 中扩展驻留在 base.css 中的类。

我该怎么办呢？

我尝试将我需要扩展的元素（例如按钮）分离到单独的样式表中，然后在 medium.scss 中使用 @import 'buttons.scss';，但是这会导致 buttons.scss 中的所有 css 也会在该样式表中呈现。

是否有任何方法可以使 base.scss 中的类在编译 css 时暴露给 SASS "渲染引擎"，以便它们可以在 medium.scss 中使用？

- phobia

Answer 1

我最近遇到了类似的问题。我的解决方案是使用混合。

_mixins.scss

@mixin someSpacing($base: 5px;){
    padding: $base;
    margin: $base;
}

请记得使用下划线作为前缀，Sass不会编译这些文件。因此，现在您可以直接将_mixins.scss导入到您的文件中。另外，您可以使用参数扩展您的mixin，以赋予更多的灵活性。

例如：

base.scss

    @import '_mixins.scss';

    .classA {
        @include someSpacing(3px);
    }

large.scss

    @import '_mixins.scss';

    .anotherClass {
        @include someSpacing(10px);
    }

请查看sass参考文档获得更多细节： http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixins

- Rito

---

这个答案现在已经过时了。当在文件中使用@import时，SASS/SCSS现在支持跨文件的@extend。 - GeReV

是的，这是可能的，但在这种情况下，这些scss文件彼此独立 - 因此这些文件不知道彼此的类。 - Rito

@GeReV 我认为 @import 会将一个文件中的所有声明复制并粘贴到另一个文件中。也许当你只想继承一个声明时，这并不是理想的选择？ - Daniel Viglione

Answer 2

我曾经也需要这个。今天我问了Chris Eppstein，他说：

extend是针对每个输出文件的。

所以，是的。@include 是你唯一的希望。

- Chris Coyier

---

在我看来，那应该尽快修复。 - dude

Answer 3

处理您的任务的正确方法是将所有可扩展选择器存储在部分文件中，并将这些部分文件导入到输出文件中。

project/partials/_extendables.sass

.foo
  color: red

%bar
  width: 50px

project/base.sass

@import partials/extendables

.baz
  @extend .foo

project/medium.sass

@import partials/extendables

.quux
  @extend %bar

另外，你正在使用的组织响应性的方法已经非常过时了。除非你被迫支持一些旧版本的IE，否则你应该使用现代方法：

• 一个单一的输出文件。
• 代码分为许多小的部分，按页面组件（菜单、新闻列表、新闻项等）和功能（粘性页脚技术、排版）进行分组，而不是按媒体查询或元素在页面上出现的位置进行分组（例如所有标题代码、所有侧边栏代码）。

• 应该使用Sass媒体查询冒泡功能，在原地精细地应用媒体查询：

  project/partials/components/_menu.sass

  .menu
  
     @media (max-width: 600px)
       // 移动设备菜单容器样式
  
     @media (min-width: 601px)
       // 桌面设备菜单容器样式
  
  
  .menu-item
  
     @media (max-width: 600px)
       // 移动设备菜单项样式
  
     @media (min-width: 601px)
       // 桌面设备菜单项样式
  

- Andrey Mikhaylov - lolmaus