SASS個(gè)人理解，嵌套導(dǎo)入@import，混合器@mixin，.seriousError，標(biāo)識(shí)符&【詩(shī)書畫唱】
內(nèi)容概括：
SASS6局部文件.html?
SASS7默認(rèn)的變量值.html
SASS8嵌套導(dǎo)入.html?
SASS9混合器.html
SASS10混合器中的CSS規(guī)則.html?
SASS11混合器傳參.html
SASS12選擇器繼承.html
詳細(xì)科普：
當(dāng)通過(guò)@import把SASS樣式分散到多個(gè)文件時(shí)，你通常只想生成少數(shù)幾個(gè)css文件。那些專門為@import命令而編寫的SASS文件，并不需要生成對(duì)應(yīng)的獨(dú)立css文件，這樣的SASS文件稱為局部文件。對(duì)此，SASS有一個(gè)特殊的約定來(lái)命名這些文件。
此約定即，SASS局部文件的文件名以下劃線開頭。這樣，SASS就不會(huì)在編譯時(shí)單獨(dú)編譯這個(gè)文件輸出css，而只把這個(gè)文件用作導(dǎo)入。當(dāng)你@import一個(gè)局部文件時(shí)，還可以不寫文件的全名，即省略文件名開頭的下劃線。舉例來(lái)說(shuō)，你想導(dǎo)入css/_my.scss這個(gè)局部文件里的變量，你只需在樣式表中寫@import "css/my";。
【對(duì)@mixin混合器的使用的個(gè)人理解：這個(gè)就是像是給方程（@mixin 的內(nèi)容）的未知數(shù)（&）賦值，套公式后寫出一個(gè)式子?！?/p>
【個(gè)人對(duì)@mixin aStyle($normal,$hover,$visited)，?@include?aStyle(orange,red,green);等
的理解：類似于Java中的封裝一個(gè)傳參的方法函數(shù)，之后在主函數(shù)調(diào)用這個(gè)方法。其實(shí)很多編程語(yǔ)言，知識(shí)都有共通之處?！?/span>
一般情況下，反復(fù)聲明一個(gè)變量，只有最后一處聲明有效且它會(huì)覆蓋前邊的值。
如果希望導(dǎo)入部分SASS文件者可以定制修改SASS庫(kù)文件中的某些值。使用SASS的!default標(biāo)簽可以實(shí)現(xiàn)這個(gè)目的
如果在導(dǎo)入的SASS文件中定義了$box-width的值，則會(huì)使用導(dǎo)入文件中的值。
跟原生的css不同，SASS允許@import命令寫在css規(guī)則內(nèi)。這種導(dǎo)入方式下，生成對(duì)應(yīng)的css文件時(shí)，局部文件會(huì)被直接插入到css規(guī)則內(nèi)導(dǎo)入它的地方。
創(chuàng)建一個(gè)名為_demo.scss的文件
由于SASS兼容原生的css，所以它也支持原生的CSS@import。盡管通常在SASS中使用@import時(shí)，SASS會(huì)嘗試找到對(duì)應(yīng)的SASS文件并導(dǎo)入進(jìn)來(lái)，但在下列三種情況下會(huì)生成原生的CSS@import，盡管這會(huì)造成瀏覽器解析css時(shí)的額外下載:
被導(dǎo)入文件的名字以.css結(jié)尾；
被導(dǎo)入文件的名字是一個(gè)URL地址(比如http://www.sass.hk/css/css.css)，由此可用谷歌字體API提供的相應(yīng)服務(wù)；
被導(dǎo)入文件的名字是CSS的url()值。
這就是說(shuō)，你不能用SASS的@import直接導(dǎo)入一個(gè)原始的css文件，因?yàn)镾ASS會(huì)認(rèn)為你想用css原生的@import。但是，因?yàn)镾ASS的語(yǔ)法完全兼容css，所以你可以把原始的css文件改名為.scss后綴，即可直接導(dǎo)入了。
如果整個(gè)網(wǎng)站中有幾處小小的樣式類似(例如一致的顏色和字體)，那么使用變量來(lái)統(tǒng)一處理這種情況是非常不錯(cuò)的選擇。但是當(dāng)樣式變得越來(lái)越復(fù)雜，需要大段大段的重用樣式的代碼，獨(dú)立的變量就沒辦法應(yīng)付這種情況了。這時(shí)候可以通過(guò)SASS的混合器實(shí)現(xiàn)大段樣式的重用。
混合器使用@mixin標(biāo)識(shí)符定義。通過(guò)@include來(lái)使用這個(gè)混合器，放在任何地方
混合器中不僅可以包含屬性，也可以包含css規(guī)則，包含選擇器和選擇器中的屬性
混合器中的規(guī)則甚至可以使用sass的父選擇器標(biāo)識(shí)符&。使用起來(lái)跟不用混合器時(shí)一樣，SASS解開嵌套規(guī)則時(shí)，用父規(guī)則中的選擇器替代&
當(dāng)你@include混合器時(shí)，有時(shí)候可能會(huì)很難區(qū)分每個(gè)參數(shù)是什么意思，參數(shù)之間是一個(gè)什么樣的順序。為了解決這個(gè)問(wèn)題，sass允許通過(guò)語(yǔ)法$name: value的形式指定每個(gè)參數(shù)的值。這種形式的傳參，參數(shù)順序就不必再在乎了，只需要保證沒有漏掉參數(shù)即可:
.seriousError
提示：@import的PPT等內(nèi)容看我上期專欄，有記錄。
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默認(rèn)的變量值.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="#">測(cè)試</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;
一般情況下，反復(fù)聲明一個(gè)變量，只有最后一處聲明有效且它會(huì)覆蓋前邊的值。
SASS7默認(rèn)的變量值.html END
SASS8嵌套導(dǎo)入.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>測(cè)試文字</p>
</div>
</body>
</html>
.mycls {
? ? @import 'demo';
}
div {
? ? background-color: blue;
? ? color: white;
}
p {
? ? color: red;
}
SASS8嵌套導(dǎo)入.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規(guī)則.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;
}
【對(duì)@mixin混合器的使用的個(gè)人理解：這個(gè)就是像是給方程（@mixin 的內(nèi)容）的未知數(shù)（&）賦值，套公式后寫出一個(gè)式子。】
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規(guī)則.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="#">測(cè)試hhhhhh</a>
</body>
</html>
@mixin aStyle($normal,$hover,$visited){
? ? color: $normal;
? ? &:hover {
? ? ? ? color: $hover;
? ? }
? ? &:visited {
? ? ? ? color: $visited;
? ? }
}
a {
? ? @include aStyle(orange,red,green);
}
【個(gè)人對(duì)@mixin aStyle($normal,$hover,$visited)，?@include?aStyle(orange,red,green);等
的理解：類似于Java中的封裝一個(gè)傳參的方法函數(shù)，之后在主函數(shù)調(diào)用這個(gè)方法。其實(shí)很多編程語(yǔ)言，知識(shí)都有共通之處。】
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的時(shí)候，最后一個(gè)減少重復(fù)的主要特性就是選擇器繼承?；贜icole Sullivan面向?qū)ο蟮腸ss的理念，選擇器繼承是說(shuō)一個(gè)選擇器可以繼承為另一個(gè)選擇器定義的所有樣式。這個(gè)通過(guò)@extend語(yǔ)法實(shí)現(xiàn)
.seriousError將會(huì)繼承樣式表中所有.error定義的所有樣式
.seriousError不僅會(huì)繼承.error自身的所有樣式，任何跟.error有關(guān)的組合選擇器樣式也會(huì)被.seriousError以組合選擇器的形式繼承。（觀察生成的css文件中的代碼）
