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

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不知道css base.scss,但我需要扩展一个驻留在的类base.css,当进入时large.scss.

我怎样才能做到这一点？

我试图分离我需要延长,例如按钮,到一个单独的样式表,然后用元件@import 'buttons.scss';中medium.scss,但随后在所有的CSS buttons.scss将在片材被渲染为好.

有没有办法在编译css时将base.scss中的暴露类创建到SASS"渲染引擎",以便它们可以在medium.scss中使用？

Answer 1

我最近有类似的问题.我的解决方案:mixins.

_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