导入sass文件

最新推荐文章于 2025-02-13 15:42:25 发布

weixin_30410999

最新推荐文章于 2025-02-13 15:42:25 发布

阅读量224

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yigexiaojiangshi/p/7832581.html

本文介绍了Sass中@import规则的应用，包括如何通过下划线前缀创建局部文件、设置变量默认值的方法、直接导入CSS文件的方式以及注释在Sass中的行为表现。

4导入sass文件

sass的@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求。

1 sass局部文件的文件名以下划线开头。这样，sass就不会在编译时单独编译这个文件输出css，而只把这个文件用作导入。当你@import一个局部文件时，还可以不写文件的全名，即省略文件名开头的下划线。

2 默认变量值

!default用于变量，含义是：如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。与css 中！important 相反作用

3.你不能用sass的@import直接导入一个原始的css文件，因为sass会认为你想用css原生的@import。但是，因为sass的语法完全兼容css，所以你可以把原始的css文件改名为.scss后缀，即可直接导入了

4.静默注释

body {
  color: #333; // 这种注释内容不会出现在生成的css文件中
  padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}

当注释出现在原生css不允许的地方，如在css属性或选择器中，sass将不知如何将其生成到对应css文件中的相应位置，于是这些注释被抹掉。

转载于:https://www.cnblogs.com/yigexiaojiangshi/p/7832581.html