SASS，Ruby，SCSS自定义单选框和多选框效果，选择器，嵌套，按钮激活样式【诗书画唱】
内容概括：
SASS1-下载和安装.ppt
个人对后代选择器的理解
SASS2-基本规则.ppt
SASS3-导入SASS部分文件.ppt
SASS4-混合器.ppt
SASS5-选择器继承.ppt
SASS的优势：减少重复代码
SASS1变量语法规则.html
SASS2嵌套.html
SASS3父选择器&.html
SASS4群组选择器嵌套.html
个人对群组选择器的理解
个人对群组选择器的理解：群组选择器的话就是很多元素进行用逗号分组，统一地设置CSS样式。
SASS5子选择器和同层选择器.html
作业
1、创建一个名为&c的变量，值为灰色。
使用上面的变量设置页面中id为myDiv的div的背景色为灰色，边框为5px实线灰色边框。
2、创建一个名为&bd的变量，值为10px绿色实线边框。
使用上面的变量设置页面中所有的div和p元素的边框。
3、创建一个名为$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包含的会单独发生作用的元素名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-基本规则.ppt START
有逗号的是群组选择器：
SASS2-基本规则.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混合器时，有时候可能会很难区分每个参数是什么意思，参数之间是一个什么样的顺序。为了解决这个问题，sass允许通过语法$name: value的形式指定每个参数的值。这种形式的传参，参数顺序就不必再在乎了，只需要保证没有漏掉参数即可:
SASS4-混合器.ppt END
SASS5-选择器继承.ppt START
使用SASS的时候，最后一个减少重复的主要特性就是选择器继承。基于Nicole Sullivan面向对象的css的理念，选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式。这个通过@extend语法实现
.seriousError将会继承样式表中所有.error定义的所有样式
.seriousError不仅会继承.error自身的所有样式，任何跟.error有关的组合选择器样式也会被.seriousError以组合选择器的形式继承。（观察生成的css文件中的代码）
SASS5-选择器继承.ppt END
SASS的优势：减少重复代码 START
scss可以生成嵌套语法：
SASS的优势：减少重复代码 END
SASS1变量语法规则.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变量语法规则.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
个人对群组选择器的理解：群组选择器的话就是很多元素进行用逗号分组，统一地设置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
作业 START
1、创建一个名为$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、创建一个名为$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、创建一个名为$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 */
作业 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;
}
//按钮悬浮和取得焦点状态的样式
.el-button:focus,
.el-button:hover {
background: #48D1CC;
border-color: #48D1CC;
color: #fff;
}
//按钮原始状态
.el-button {
color: #FFF;
background-color: rgb(4, 102, 73);
border-color: rgb(4, 102, 73);
}
