CSS-SASS的导入

555 阅读1分钟
  • sass的导入( @import)规则和CSS的有所不同,

    • 编译时会将 @import的scss文件合并进来只生成一个CSS文件。
    • 但是如果你在sass文件中导入css文件 如 @import 'reset.css',那效果跟普通CSS导入样式文件一样,导入的css文件不会合并到编译后的文件中,而是以@import方式存在。
  • 如果需要导入 SCSS 或者 Sass 文件,但又不希望将其编译为 CSS,只需要在文件名前添加下划线,这样会告诉 Sass 不要编译这些文件,但导入语句中却不需要添加下划线。

    • 所有的sass导入文件都可以忽略后缀名 .scss。一般来说基础的文件命名方法以_开头,如 _mixin.scss。这种文件在导入的时候可以不写下划线,可写成 @import "mixin"

    • 例如,将文件命名为 _colors.scss,便不会编译 _colours.css 文件。

  • 总结:

  1. 加不加下划线的区别如下:

    (1)scss文件名前添加下划线,不会编译为 css。

    (2)scss文件名前没有加下划线,scss文件会被编译为css文件。

  2. 在sass文件中引入css文件,不会被转义成代码出现在对应的css文件中。

    在scss文件中引入scss文件,会被转义成代码出现在对应的css文件中。

  3. 注意,不可以同时存在添加下划线与未添加下划线的同名文件,添加下划线的文件将会被忽略。