美文网首页
sass的模块化@import

sass的模块化@import

作者: 最爱喝龙井 | 来源:发表于2019-09-26 19:23 被阅读0次

    sass提供了一种导入的方式@import,但是它有优化了这个方式,他把每一个模块成为一个partials,每个partials的文件名必须以下划线开头,这样就不会自动编译这个sass文件了,我们在一个文件当中统一导入这些partials,这样就相当于打包了css文件,😱流弊~~

    例:

    首先我们定义一个_common.scss文件,内容如下:

    * {
      padding: 0;
      margin: 0;
    }
    

    这时我们会发现,并没有自动编译这个sass文件,接着,我们在style.scss文件当中引入这个_common.scss文件,这里不需要加下划线和后缀名

    @import "common";
    body {
        padding: 15px;
    }
    body a {
        font-weight: 600;
    }
    div {
        @extend body;
        color: #ccc;
    }
    

    编译之后的style.css文件

    * {
      padding: 0;
      margin: 0;
    }
    
    body, div {
      padding: 15px;
    }
    
    body a, div a {
      font-weight: 600;
    }
    
    div {
      color: #ccc;
    }
    

    相关文章

      网友评论

          本文标题:sass的模块化@import

          本文链接:https://www.haomeiwen.com/subject/anxgyctx.html