Scss----@-Rules和控制指令

2020.12.14 23:50

01.@-Rules----@import

Sass扩展了@import的功能，允许其导入SCSS或SASS文件。被导入的文件将合并编译到同一个CSS文件中，另外，被导入的文件中所包含的变量或混合指令(mixin)都可以在导入的文件中使用

通常，@import寻找Sass文件并将其导入，但在以下情况下@import仅作为普通的CSS语句，不会导入任何Sass文件

• 文件拓展名是.css
• 文件名以http://为开头
• 文件名是url()
• @import包含media queries(媒体信息)

如果不在上述情况内，文件的拓展名是.scss或.sass，则导入成功。没有指定拓展名，Sass将会试着寻找文件名相同，拓展名为.scss或.sass的文件并将其导入

可行方法

• @import "foo.scss";
@import "bar";

不可行方法

• @import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

• Sass允许同时导入多个文件，例如同时导入rounded-corners与text-shadow两个文件:
  @import "rounded-corners","text-shadow";

• 导入的文件也可以使用#{}插值语句，但不是通过变量动态导入Sass文件，只能作用于CSS的url()导入方式:
  $family:unquote("Broid+Sans");
@import url("http://fonts.googleapis.com/css?family=\#{$family}");
  编译为:@import url("http://fonts.googleapis.com/css?family=Broid+Sans");

• 如果有一个SCSS或Sass文件需要引入，但是你又不希望它被编译为一个CSS文件时，这是，可以在文件名前面加上一个下划线，就能避免被编译。这将告诉Sass不要把它编译为CSS文件。然后就可以像往常一样引入这个文件了，而且还可以省略掉文件名前面的下划线。

• 除此之外，还支持嵌套@import，但是不可以在混合指令(mixin)或控制指令(control directives)中嵌套@import

02.@-Rules----@media

• Sass中@media指令与CSS中用法一样，只是增加了一点额外功能:允许其在CSS规则中嵌套。
• 如果@media嵌套在CSS规则内，编译时，@media将被编译到文件的最外层，包含嵌套的父选择器
• 上面的功能让@media使用起来更加方便，不需要重复使用选择器，也不会打乱CSS的书写流程
  scss文件
  
  编译后的css文件
  
• @media的queries允许互相嵌套使用，编译时，Sass自动添加add
  scss文件
  
  编译后的css文件
  
• @media甚至可以使用SS(比如变量，函数，以及运算符)代替条件的名称或者值
  scss文件
  
  编译后的css文件:
  

03.@-Rules----@extend

@extend即继承。在设计网页的时候经常遇到这种情况:一个元素使用的样式与另一个元素完全相同，但又添加了额外的样式
总的来说：

• 支持层叠继承
• 支持多继承
• 允许延伸任何定义给单个元素的选择器(但是允许不一定好用)

简单实现继承

.b复用了.a的样式 格式: @extend: 选择器(想继承谁就写谁);

多次继承:

.c也可以继承继承过.a后的.b(嵌套继承)

选择器占位符:%placeholder为选择器占位符，配合@extend-Only选择器使用

效果:只定义了样式，但不会对原有选择器匹配的元素生效

• eg1