SASS个人理解，嵌套导入@import，混合器@mixin，.seriousError，标识符&【诗书画唱】
内容概括：
SASS6局部文件.html
SASS7默认的变量值.html
SASS8嵌套导入.html
SASS9混合器.html
SASS10混合器中的CSS规则.html
SASS11混合器传参.html
SASS12选择器继承.html
详细科普：
当通过@import把SASS样式分散到多个文件时，你通常只想生成少数几个css文件。那些专门为@import命令而编写的SASS文件，并不需要生成对应的独立css文件，这样的SASS文件称为局部文件。对此，SASS有一个特殊的约定来命名这些文件。
此约定即，SASS局部文件的文件名以下划线开头。这样，SASS就不会在编译时单独编译这个文件输出css，而只把这个文件用作导入。当你@import一个局部文件时，还可以不写文件的全名，即省略文件名开头的下划线。举例来说，你想导入css/_my.scss这个局部文件里的变量，你只需在样式表中写@import "css/my";。
【对@mixin混合器的使用的个人理解：这个就是像是给方程（@mixin 的内容）的未知数（&）赋值，套公式后写出一个式子。】
【个人对@mixin aStyle($normal,$hover,$visited)， @include aStyle(orange,red,green);等
的理解：类似于Java中的封装一个传参的方法函数，之后在主函数调用这个方法。其实很多编程语言，知识都有共通之处。】
一般情况下，反复声明一个变量，只有最后一处声明有效且它会覆盖前边的值。
如果希望导入部分SASS文件者可以定制修改SASS库文件中的某些值。使用SASS的!default标签可以实现这个目的
如果在导入的SASS文件中定义了$box-width的值，则会使用导入文件中的值。
跟原生的css不同，SASS允许@import命令写在css规则内。这种导入方式下，生成对应的css文件时，局部文件会被直接插入到css规则内导入它的地方。
创建一个名为_demo.scss的文件
由于SASS兼容原生的css，所以它也支持原生的CSS@import。尽管通常在SASS中使用@import时，SASS会尝试找到对应的SASS文件并导入进来，但在下列三种情况下会生成原生的CSS@import，尽管这会造成浏览器解析css时的额外下载:
被导入文件的名字以.css结尾；
被导入文件的名字是一个URL地址(比如http://www.sass.hk/css/css.css)，由此可用谷歌字体API提供的相应服务；
被导入文件的名字是CSS的url()值。
这就是说，你不能用SASS的@import直接导入一个原始的css文件，因为SASS会认为你想用css原生的@import。但是，因为SASS的语法完全兼容css，所以你可以把原始的css文件改名为.scss后缀，即可直接导入了。
如果整个网站中有几处小小的样式类似(例如一致的颜色和字体)，那么使用变量来统一处理这种情况是非常不错的选择。但是当样式变得越来越复杂，需要大段大段的重用样式的代码，独立的变量就没办法应付这种情况了。这时候可以通过SASS的混合器实现大段样式的重用。
混合器使用@mixin标识符定义。通过@include来使用这个混合器，放在任何地方
混合器中不仅可以包含属性，也可以包含css规则，包含选择器和选择器中的属性
混合器中的规则甚至可以使用sass的父选择器标识符&。使用起来跟不用混合器时一样，SASS解开嵌套规则时，用父规则中的选择器替代&
当你@include混合器时，有时候可能会很难区分每个参数是什么意思，参数之间是一个什么样的顺序。为了解决这个问题，sass允许通过语法$name: value的形式指定每个参数的值。这种形式的传参，参数顺序就不必再在乎了，只需要保证没有漏掉参数即可:
.seriousError
提示：@import的PPT等内容看我上期专栏，有记录。
SASS6局部文件.html START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<input type="text" />
</body>
</html>
input {
color: red;
background-color: gray;
}
@import 'you';
p {
color: blue;
}
input {
color: red;
background-color: gray;
}
p {
color: blue;
}
/*# sourceMappingURL=main.css.map */
SASS6局部文件.html END
SASS7默认的变量值.html START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/sc5.css" />
<link rel="stylesheet" href="css/sc6.css" />
</head>
<body>
<a href="#">测试</a>
<div id="myDiv"></div>
</body>
</html>
$link-color:red;
$link-color:green;
a {
color: $link-color;
}
@import 'ts';
$box-width: 400px !default;
$box-height: 350px !default;
$color: #000 !default;
#myDiv {
width: $box-width;
height: $box-height;
background-color: $color;
}
$box-width: 200px;
$box-height: 100px;
一般情况下，反复声明一个变量，只有最后一处声明有效且它会覆盖前边的值。
SASS7默认的变量值.html END
SASS8嵌套导入.html START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/sc7.css" />
</head>
<body>
<div class="mycls">
<div>Hello world</div>
<p>测试文字</p>
</div>
</body>
</html>
.mycls {
@import 'demo';
}
div {
background-color: blue;
color: white;
}
p {
color: red;
}
SASS8嵌套导入.html END
SASS9混合器.html START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/sc8.css" />
</head>
<body>
<div class="abc">hehe</div>
</body>
</html>
@mixin br {
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
color: red;
}
.abc {
background-color: green;
border: 2px solid #00aa00;
width: 100px;
height: 100px;
@include br;
}
#k {
@include br;
}
SASS9混合器.html END
SASS10混合器中的CSS规则.html START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/sc9.css" />
</head>
<body>
<ul class="plain">
<li>昨天</li>
<li>今天</li>
<li>明天</li>
</ul>
<a href="#">
<label id="test">abc</label>
<label>def</label>
</a>
</body>
</html>
@mixin ls {
list-style: square url(../img/0.gif);
li {
margin-left: 0px;
color: red;
}
}
ul.plain {
color: #444;
@include ls;
}
@mixin fr {
a > & {
color: red;
}
}
#test {
@include fr;
}
【对@mixin混合器的使用的个人理解：这个就是像是给方程（@mixin 的内容）的未知数（&）赋值，套公式后写出一个式子。】
div {
@include fr;
}
ul.plain {
color: #444;
list-style: square url(../img/0.gif);
}
ul.plain li {
margin-left: 0px;
color: red;
}
a > #test {
color: red;
}
a > div {
color: red;
}
/*# sourceMappingURL=sc9.css.map */
SASS10混合器中的CSS规则.html END
SASS11混合器传参.html START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/sc10.css" />
</head>
<body>
<a href="#">测试hhhhhh</a>
</body>
</html>
@mixin aStyle($normal,$hover,$visited){
color: $normal;
&:hover {
color: $hover;
}
&:visited {
color: $visited;
}
}
a {
@include aStyle(orange,red,green);
}
【个人对@mixin aStyle($normal,$hover,$visited)， @include aStyle(orange,red,green);等
的理解：类似于Java中的封装一个传参的方法函数，之后在主函数调用这个方法。其实很多编程语言，知识都有共通之处。】
a {
color: orange;
}
a:hover {
color: red;
}
a:visited {
color: green;
}
/*# sourceMappingURL=sc10.css.map */
SASS11混合器传参.html END
SASS12选择器继承.html START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
使用SASS的时候，最后一个减少重复的主要特性就是选择器继承。基于Nicole Sullivan面向对象的css的理念，选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式。这个通过@extend语法实现
.seriousError将会继承样式表中所有.error定义的所有样式
.seriousError不仅会继承.error自身的所有样式，任何跟.error有关的组合选择器样式也会被.seriousError以组合选择器的形式继承。（观察生成的css文件中的代码）
