Question

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

我有3张SCSS样式表：

base.scss（送达所有人）
medium.scss（＆gt; = 768px窗口）
large.scss（＆gt; = 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，但我需要在base.css中扩展位于large.scss的类。< / p>

我该怎么做？

我尝试将需要扩展的元素（例如按钮）分成单独的样式表，然后在@import 'buttons.scss';中使用medium.scss，但buttons.scss中的所有css都将也可以在那张纸上呈现。

在编译css时，有没有办法让base.scss中的暴露类到SASS“渲染引擎”，以便它们可以在medium.scss中使用？

Answer 1

我最近遇到过类似的问题。我的解决方案：mixins。

_mixins.scss

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

请记住使用下划线作为前缀，sass不会编译这些文件。所以现在你可以简单地将_mixins.scss导入你的文件。此外，您可以使用参数扩展mixin，以提供更大的灵活性。

e.g。 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

Answer 2

我也需要这一次。我今天问克里斯埃普斯坦，他说：

extend是每个输出文件

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

Answer 3

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

<强>项目/分音/ _extendables.sass

.foo
  color: red

%bar
  width: 50px

<强>项目/ base.sass

@import partials/extendables

.baz
  @extend .foo

<强>项目/ medium.sass

@import partials/extendables

.quux
  @extend %bar

此外，您用于组织响应的方法我已经过时了。除非你被迫支持一些旧的生锈版IE，否则你应该使用现代方法：

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

媒体查询应使用Sass媒体查询冒泡功能以原样方式应用：

<强>项目/分音/组件/ _menu.sass

.menu

   @media (max-width: 600px)
     // Mobile styles for menu container

   @media (min-width: 601px)
     // Desktop styles for menu container


.menu-item

   @media (max-width: 600px)
     // Mobile styles for menu items

   @media (min-width: 601px)
     // Desktop styles for menu items

SASS / SCSS在单个文件中使用@extend（响应式设计）

3 个答案: