代码之家  ›  专栏  ›  技术社区  ›  Aleksandr Makov

SASS:如何使用跨文件扩展名?

  •  0
  • Aleksandr Makov  · 技术社区  · 12 年前

    我有几个sass文件:

    • _common.sass -全局使用的所有内容,包括变量、mixin等。
    • partials/_partial.sass -局部样式
    • homepage.sass -主页特定

    现在的问题是:

    如果我导入 _普通类 进入 partial/_partial.sass 然后导入 部分/部分.sass 进入 主页.sass _普通类 被编译了两次。令人不快的

    关键是 主页.sass 必须参考 _普通类 ,因此它可以扩展全局类定义,并在上使用mixin和os,以及 _partial.sass 必须能够访问来自 _普通类 但是 _部分通行证 必须将其本身导入 主页.sass .

    听起来很简单,不值得,但我很难解决这个难题。

    编辑(清除内容):

    // _common.sass
    .sprite
        background: url(sprite.png)
    
    // _partial.sass
    @import "common"
    .link
        @extend .sprite
    
    // homepage.sass
    @import "common"
    .social
       @extend .sprite
    @import "partials/partial"
    

    正如你所看到的,主页和部分扩展全局类 .sprite 。这就是我正在努力实现的目标。但最终,主页获得了 _普通类 按嵌套导入编译(在特定示例中为2次)

    2 回复  |  直到 12 年前
        1
  •  1
  •   Daniel Imms    12 年前

    “主”SASS文件的布局

    我通常这样做的方式是在我的 site.scss 文件

    网站.scss

    // variables, mixins, etc. at beginning
    @import "common/_variables"
    @import "common/_mixins"
    @import "common/_sizes"
    // ...
    
    // your styles that use the variables, mixins, etc.
    @import "modules/_blah"
    // ...
    

    请注意,如果文件只包含mixin、变量等,那么可以多次包含它,因为不会产生输出。对于一些文本编辑器/IDE,您需要这样做才能启用intellisense。

    _filename标准

    SASS有一个标准命名约定,即以下划线开头的文件 _ 不是要编译的,只是用作其他文件的部分文件。根据您使用的工具,使用此命名约定可能会停止编译错误。

        2
  •  1
  •   Krasimir    12 年前

    我建议如下:只需创建一个文件,该文件最初将添加_common.css。

    // index.scss
    @import "common"
    @import "homepage"
       // inside homepage
       @import "partials/partial";
    

    如果你这样做,我认为共同的东西将可以用于主页和部分,因为它们是在它们上面导入的。也就是说,你不需要导入主页内的公共内容或部分内容。