SASS，Ruby，SCSS自定義單選框和多選框效果，選擇器，嵌套，按鈕激活樣式【詩書畫唱】
內容概括：
SASS1-下載和安裝.ppt
個人對后代選擇器的理解
SASS2-基本規(guī)則.ppt
SASS3-導入SASS部分文件.ppt
SASS4-混合器.ppt?
SASS5-選擇器繼承.ppt
SASS的優(yōu)勢：減少重復代碼
SASS1變量語法規(guī)則.html
SASS2嵌套.html
SASS3父選擇器&.html?
SASS4群組選擇器嵌套.html
個人對群組選擇器的理解
個人對群組選擇器的理解：群組選擇器的話就是很多元素進行用逗號分組，統(tǒng)一地設置CSS樣式。
SASS5子選擇器和同層選擇器.html?
作業(yè)
1、創(chuàng)建一個名為&c的變量，值為灰色。
使用上面的變量設置頁面中id為myDiv的div的背景色為灰色，邊框為5px實線灰色邊框。
2、創(chuàng)建一個名為&bd的變量，值為10px綠色實線邊框。
使用上面的變量設置頁面中所有的div和p元素的邊框。
3、創(chuàng)建一個名為$bg的變量，可以設置背景圖片背景顏色。
使用上面的變量設置頁面中所有div的背景值為$bg
4、設置所有引用了abc樣式類的元素中的p元素和input元素的字體顏色為紅色（個人理解：
abc樣式類指的是$abc,自己定義)
5、給id為ele的元素的后代input按鈕的背景色設置為灰色，字體顏色為藍色，同時當按鈕被激活時，添加一個10px綠色的實線邊框。
6、將下面的代碼合并成SASS代碼
/*當鼠標放到a鏈接上面時，在這個a鏈接的前面和后面添加的樣式*/
a:hover::before,a:hover::after {
position:absolute;
}
a:hover::before {
content:url(img/product.jpg);left:-80px;
}
a:hover::after {
content:'\5d';right:-20px;
}
7、實現自定義的單選框和多選框效果。（個人理解：其實就是每次點擊后背景圖片在更換）
關于按鈕激活樣式
關于CSS選擇器的推薦文章：
https://www.runoob.com/cssref/css-selectors.html
個人對后代選擇器的理解 START
個人對后代選擇器的理解：元素名1?類似于后代的被元素名1包含的會單獨發(fā)生作用的元素名2{}
個人對后代選擇器的理解?END
SASS1-下載和安裝.ppt START
去https://rubyinstaller.org/downloads/下載RUBY安裝包。
（個人經驗：如果下載不了，可以點下網站的圖標，之后再找下載的按鈕。有時下載不了可能是網絡的原因，還可能是訪問路徑老舊等等。
或者訪問https://github.com/oneclick/rubyinstaller2/releases/download/RubyInstaller-2.7.2-1/rubyinstaller-devkit-2.7.2-1-x64.exe）
下載后雙擊就可以安裝了。
安裝點next到finsh后，會彈出一個cmd框，點回車加載好后再按一次回車：
SASS1-下載和安裝.ppt END
SASS2-基本規(guī)則.ppt START
有逗號的是群組選擇器：
SASS2-基本規(guī)則.ppt END
SASS3-導入SASS部分文件.ppt START
當通過@import把SASS樣式分散到多個文件時，你通常只想生成少數幾個css文件。那些專門為@import命令而編寫的SASS文件，并不需要生成對應的獨立css文件，這樣的SASS文件稱為局部文件。對此，SASS有一個特殊的約定來命名這些文件。
此約定即，SASS局部文件的文件名以下劃線開頭。這樣，SASS就不會在編譯時單獨編譯這個文件輸出css，而只把這個文件用作導入。當你@import一個局部文件時，還可以不寫文件的全名，即省略文件名開頭的下劃線。舉例來說，你想導入css/_my.scss這個局部文件里的變量，你只需在樣式表中寫@import "css/my";。
由于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后綴，即可直接導入了。
SASS3-導入SASS部分文件.ppt END
SASS4-混合器.ppt START
當你@include混合器時，有時候可能會很難區(qū)分每個參數是什么意思，參數之間是一個什么樣的順序。為了解決這個問題，sass允許通過語法$name: value的形式指定每個參數的值。這種形式的傳參，參數順序就不必再在乎了，只需要保證沒有漏掉參數即可:
SASS4-混合器.ppt END
SASS5-選擇器繼承.ppt START
使用SASS的時候，最后一個減少重復的主要特性就是選擇器繼承?；贜icole Sullivan面向對象的css的理念，選擇器繼承是說一個選擇器可以繼承為另一個選擇器定義的所有樣式。這個通過@extend語法實現
.seriousError將會繼承樣式表中所有.error定義的所有樣式
.seriousError不僅會繼承.error自身的所有樣式，任何跟.error有關的組合選擇器樣式也會被.seriousError以組合選擇器的形式繼承。（觀察生成的css文件中的代碼）
SASS5-選擇器繼承.ppt END
SASS的優(yōu)勢：減少重復代碼 START
scss可以生成嵌套語法：
SASS的優(yōu)勢：減少重復代碼 END
SASS1變量語法規(guī)則.html START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- 頁面中引入的最終文件是生成的css文件，而不是scss文件 -->
<link rel="stylesheet" href="css/my.css" />
</head>
<body>
<div>Hello world</div>
<p>測試文本</p>
</body>
</html>
$cr: blue;
div {
? ? $bd: solid 5px red;
? ? color: $cr;?
? ? border: $bd;
}
p {
? ? color: $cr;
}
下面的css和css.map文件是由scss文件CTRL+S后自動生成的：
SASS1變量語法規(guī)則.html END
SASS2嵌套.html START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/sc1.css" />
</head>
<body>
<h1>文字一</h1>
<p>文字二</p>
<div id="myDiv">
<li>文字三</li>
<span>
<h1>文字四</h1>
<p>文字五</p>
</span>
</div>
<ul>
<i>語文</i>
</ul>
</body>
</html>
個人對嵌套的理解：使用嵌套的scss文件類似于乘法結合律的運用，對應的CTRL+S的結果就是“乘法分配律”后的css文件。
#myDiv {
? ? li {? ? ? ?
? ? ? ? color: red;??
? ? }
? ? span {
? ? ? ? h1 {
? ? ? ? ? ? color: yellow;
? ? ? ? }
? ? ? ? p {
? ? ? ? ? ? color: green;
? ? ? ? }
? ? }
}
SASS2嵌套.html END
SASS3父選擇器&.html START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/sc2.css" />
</head>
<body>
<div id="myDiv">
<a href="#">測試1</a>
<div>
<a href="#">測試2</a>
</div>
</div>
</body>
</html>
#myDiv a{
? ? color: red;
? ? &:hover {
? ? ? ? color: green;
? ? }
}
p {
? ? color: red;
? ? #myDiv & {
? ? ? ? color: green;
? ? }
}
scss中的作用的個人理解：&表示and，就是scss生成css等文件時，使用處就不會生成空格。
SASS3父選擇器&.html END
SASS4群組選擇器嵌套.html START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/sc3.css" />
</head>
<body>
<div class="mycls">
<div>文字一</div>
<span>文字二</span>
<p>文字三</p>
</div>
</body>
</html>
.mycls div, .mycls span, .mycls p {
? color: blue;
}
/*# sourceMappingURL=sc3.css.map */
SASS4群組選擇器嵌套.html END
個人對群組選擇器的理解 START
個人對群組選擇器的理解：群組選擇器的話就是很多元素進行用逗號分組，統(tǒng)一地設置CSS樣式。
個人對群組選擇器的理解 END
SASS5子選擇器和同層選擇器.html START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/sc4.css"/>
</head>
<body>
<h1>測試五</h1>
<div id="myDiv">
<p>測試一</p>
<span>
<p>測試二</p>
</span>
</div>
<p>測試三</p>
? ? ? ? <p>測試四</p>
? ? ? ? <h1>測試六</h1>
? ? ? ? <div>測試七</div>
</body>
</html>
#myDiv {
? ? > p {
? ? ? ? color: red;
? ? }? ??
? ? + p {
? ? ? ? color: blue;
? ? }
? ? h1 + & {
? ? ? ? color: green;
? ? }
}
SASS5子選擇器和同層選擇器.html END
作業(yè) START
1、創(chuàng)建一個名為$c的變量，值為灰色。
使用上面的變量設置頁面中id為myDiv的div的背景色為灰色，邊框為5px實線灰色邊框。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/zy1.css" />
</head>
<body>
<div id="myDiv">
</div>
</body>
</html>
$c:gray;
#myDiv {
? background-color:$c;
? border: 5px solid $c;?
??
//width: 400px;
//height: 400px;
}
2、創(chuàng)建一個名為$bd的變量，值為10px綠色實線邊框。
使用上面的變量設置頁面中所有的div和p元素的邊框。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/zy2.css" />
</head>
<body>
<div id="myDiv">
<p>詩書畫唱將變得更帥</p>
</div>
<p>詩書畫唱將變得更厲害</p>
</body>
</html>
$bd:green;
div,p{
? border: 10px solid $bd;?
??
}
3、創(chuàng)建一個名為$bg的變量，可以設置背景圖片背景顏色。
使用上面的變量設置頁面中所有div的背景值為$bg
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" hreff="css/zy3.css" />
</head>
<body>
<div >
<p><img srcc="img/畫圖1.png" />
詩書畫唱將變得更帥</p>
</div>
<div >
<p><img srcc="img/碧風羽 BOOTH店オープン568678.jpg" />詩書畫唱將變得更厲害</p>
</div>
</body>
</html>
$bg:green;
div{
? background-color: $bg;
??
}
img{width:60px;height: 60px;}
4、設置所有引用了abc樣式類的元素中的p元素和input元素的字體顏色為紅色（個人理解：
abc樣式類指的是$abc,自己定義)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/zy4.css" />
</head>
<body><p>詩書畫唱</p>
<input type="button"? value="詩書畫唱"/>
</body>
</html>
5、給id為ele的元素的后代input按鈕的背景色設置為灰色，字體顏色為藍色，同時當按鈕被激活時，添加一個10px綠色的實線邊框。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/zy5.css" />
</head>
<body>
<input id="ele" type="button" value="關注詩書畫唱"/>
</body>
</html>
#ele{
? ?background-color: gray;
? ?color:blue;
? ? &:active {
? ? ? border: 10px solid green;
? ? }
}
#ele {
? background-color: gray;
? color: blue;
}
#ele:active {
? border: 10px solid green;
}
/*# sourceMappingURL=zy5.css.map */
6、將下面的代碼合并成SASS代碼
/*當鼠標放到a鏈接上面時，在這個a鏈接的前面和后面添加的樣式*/
a:hover::before,a:hover::after {
position:absolute;
}
a:hover::before {
content:url(../img/ShuaiGe.jpg);left:-80px;
}
a:hover::after {
content:'\5d';right:-20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/zy6.css" />
</head>
<body>
<a href="#">關注詩書畫唱</a>
</body>
</html>
/*當鼠標放到a鏈接上面時，在這個a鏈接的前面和后面添加的樣式*/
a:hover{
&::before,&::after {
position:absolute;
}
&::before {
?content:url(../img/ShuaiGe.jpg);left:-80px;
}
&::after {
content:'\5d';right:-20px;
}
}
/*當鼠標放到a鏈接上面時，在這個a鏈接的前面和后面添加的樣式*/
//a:hover::before,a:hover::after {
//
//position:absolute;
//
//}
//
//a:hover::before {
//
//content:url(img/product.jpg);left:-80px;
//
//}
//
//a:hover::after {
//
//content:'\5d';right:-20px;
//
//}
7、實現自定義的單選框和多選框效果。（個人理解：其實就是每次點擊后背景圖片在更換）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/chk.css" />
</head>
<body>
<input type="checkbox" name="hobbys" value="聽歌" id="hb1" hidden />
<label for="hb1" class="ads"></label>聽歌
<input type="checkbox" name="hobbys" value="滑板" id="hb2" hidden checked />
<label for="hb2" class="ads"></label>滑板
<input type="checkbox" name="hobbys" value="騎單車" id="hb3" hidden checked />
<label for="hb3" class="ads"></label>騎單車
<input type="checkbox" name="hobbys" value="王者榮耀" id="hb4" hidden />
<label for="hb4" class="ads"></label>王者榮耀
</body>
</html>
.ads {
? ? width:50px;
? ? height:50px;
? ? display:inline-block;
? ? vertical-align: middle;
? ? margin-top:-4px;
? ? background :{
? ? ? ? image:url(../img/iunchecked.png);
? ? ? ? repeat:no-repeat;
? ? ? ? position: center;
? ? }
? ? input[type="checkbox"][name="hobbys"]:checked + & {
? ? ? ? background-image: url(../img/ichecked.png);
? ? }
}
.ads {
? width: 50px;
? height: 50px;
? display: inline-block;
? vertical-align: middle;
? margin-top: -4px;
? background-image: url(../img/iunchecked.png);
? background-repeat: no-repeat;
? background-position: center;
}
input[type="checkbox"][name="hobbys"]:checked + .ads {
? background-image: url(../img/ichecked.png);
}
/*# sourceMappingURL=chk.css.map */
作業(yè) END
關于按鈕激活樣式 START
個人認為按鈕激活樣式用于前端的界面的設計還是很好用和美觀的，按鈕激活樣式是使用active而不是使用hover。
推薦文章：https://blog.csdn.net/qq_33389919/article/details/111493005
//按鈕激活的樣式
.el-button:active {
? ? background: rgb(4, 102, 73);
? ? border-color: rgb(4, 102, 73);
? ? color: #fff;
? }
??
?//按鈕懸浮和取得焦點狀態(tài)的樣式
.el-button:focus,
.el-button:hover {
? ? background: #48D1CC;
? ? border-color: #48D1CC;
? ? color: #fff;
}
?//按鈕原始狀態(tài)?
.el-button {
? ? color: #FFF;
? ? background-color: rgb(4, 102, 73);
? ? border-color: rgb(4, 102, 73);
}
