发表于： 2018-09-30 23:42:30
1 799
今天完成的事情：写完了任务十一。准备写任务十二。争取这礼拜写完十三到最后两个任务。
明天计划的事情：明天打算写任务十二。然后再看看scss的变量 继承 嵌套 混合宏什么的。
遇到的问题：问题暂无，就是用的不太熟练。
收获：
@import
Sass 拓展了 @import 的功能，允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。
Sass 在当前地址，或 Rack, Rails, Merb 的 Sass 文件地址寻找 Sass 文件，如果需要设定其他地址，可以用 :load_paths 选项，或者在命令行中输入 --load-path 命令。
通常，@import 寻找 Sass 文件并将其导入，但在以下情况下，@import 仅作为普通的 CSS 语句，不会导入任何 Sass 文件。
- 文件拓展名是
.css； - 文件名以
http://开头； - 文件名是
url()； @import包含 media queries。
如果不在上述情况内，文件的拓展名是 .scss 或 .sass，则导入成功。没有指定拓展名，Sass 将会试着寻找文件名相同，拓展名为 .scss 或 .sass 的文件并将其导入。
为了有效的维护和开发项目，代码的重复利用就显得尤为重要。在Sass中，除了@import和@extend可以使你的代码更加具有重复利用性，@mixin指令也同样能提高你代码的重复使用率并简化你的代码。
@extend指令通过继承从而简化了代码，但是它也有缺陷之处，首先是不够灵活，其次它还会将你不需要的其他地方具有相同类名的样式都继承过来。
@mixin指令是另一种简化代码的方法。Mixins可以包含任意内容且可以传递参数，因此比'@extend'更加灵活和强大。
定义Mixins
通过@mixin加名称的方式就可以定义一个Mixins模块，在模块内你可以添加任何你想重复使用的样式。
@mixin button {
font-size: 1em;
padding: 0.5em 1.0em;
text-decoration: none;
color: #fff;
}由于历史原因，连字符和下划线被认为是相同的，也就是说 @mixin button-large { } 和 @mixin button_large { } 是一样的。
Mixins能够包含任何在 CSS 和 Sass 中有效的内容。
@mixin link {
a {
color: blue;
&:visited { color: purple;
}
&:hover { color: white;
}
&:active { color: red;
}
}
}使用@mixin指令
你可以通过@include来调用具有相同名称的mixin模块。
.button-green {
@include button;
background-color: green;
}比如通过@include调用我之前创建名为button的mixin模块，那么解析后的CSS就如下所示：
.button-green {
font-size: 1em;
padding: 0.5em 1.0em;
text-decoration: none;
color: #fff;
background-color: green;
}正如你所预期的那样，@include被名为button的混合模块内的样式所取代。同时我在.button-green中添加的background-color样式依然保留着。
返回列表
评论