网站开发与制作中期报告,珠海营销型网站哪家好,全屋定制十大名牌是哪些,搭建wordpress环境搭建Sass 是一门高于 CSS 的元语言#xff0c;它能用来清晰地、结构化地描述文件样式。
而SCSS是SASS引入的语法#xff0c;是CSS的超集#xff0c;所以所有CSS有效的使用在SCSS中都生效
一、回顾CSS选择器
通用选择器 *元素选择器类选择器#xff0c;.classNameID选择器它能用来清晰地、结构化地描述文件样式。
而SCSS是SASS引入的语法是CSS的超集所以所有CSS有效的使用在SCSS中都生效
一、回顾CSS选择器
通用选择器 *元素选择器类选择器.classNameID选择器#id属性选择器对元素中某个属性的值进行筛选语法有[attr] [attrvalue] [attr~value] [attr|value] [attr^value] [attr$value] [attr*value]逗号分隔的选择器列表空格代表的后代选择器 代表的直接后代选择器~ 代表所有后面的兄弟节点选择器 代表后面直接跟着的第一个兄弟节点选择器|| 列组合器例如 col || td代表col该列域下的所有td结点伪类/伪元素选择器
具体参见MDN文档
CSS 选择器 - CSS层叠样式表 | MDN (mozilla.org)
二、SCSS利用嵌套语法实现选择器
SCSS为了优化CSS的语法表达使其更简洁、避免重复定义样式因此实现了嵌套语法来对元素进行选择。例如
//对ul中的直接后代进行筛选定制了直接后代中li的样式
ul {li {list-style-type: none;}
}//h2选择紧邻兄弟p元素
h2 { p {border-top: 1px solid gray;}
}//p元素的所有一般兄弟元素中选择出span / h1定制样式
p {~ {span {opacity: 0.8;},h1 {color: red;}}
}
由于嵌套语法父选择器的很多属性可以不被反复定义同时使得选择器的实现更直观、更灵活 三、父选择器
Sass中利用 来指示父选择器这样在嵌套语法中可以更方便地复用父选择器
同时还可以在父选择器的基础上添加后缀更便捷地寻找基于父选择器的命名【但并非父子关系】 添加后缀时父选择器必须是字母/数字结尾的例如以 ID 、className、元素标签定义的父类才可以添加后缀 .alert {max-width: 600px;margin: 4rem auto;width: 90%;font-family: Raleway, sans-serif;background: #f4f4f4;//定义该元素伪类的CSS:hover {font-weight: bold;}//添加后缀__copy {display: none;padding: 1rem 1.5rem 2rem 1.5rem;color: gray;line-height: 1.6;font-size: 14px;font-weight: 500;--open {display: block;}}}
嵌套语法需要区分的部分构成父子关系的选择器 以及 只是复用名称的选择器
//SASS
.btn {color: red;//后代选择器a{color:white;}//复用的时候要自己再构造一遍需要的后代选择器 -item{color:purple;}//平级只是名称做了复用-item {color: black;-green {color: green}}
}//等价CSS
.btn {color: red;
}.btn a {color: white;
}.btn .btn-item {color: purple;
}.btn-item {color: black;
}.btn-item-green {color: green;
}如果基于选择器列表 获取父选择器代表什么呢
可以理解为所有父级选择器结构的引用举几个例子看看SASS该写法下css的等价内容
1、
//scss
.main aside:hover,
.sidebar p {parent-selector: ;// ((unquote(.main) unquote(aside:hover)),// (unquote(.sidebar) unquote(p)))
}//等价css
.main aside:hover,
.sidebar p {parent-selector: .main aside:hover, .sidebar p;
}
2、
//scss
ul, ol {text-align: left; {padding: {bottom: 0;left: 0;}}
}//css
ul, ol {text-align: left;
}
ul ul, ol ol {padding-bottom: 0;padding-left: 0;
}
在这个例子中值得注意的是有相同前缀的css属性例如padding-*、margin-*等可以在书写时以嵌套语法的形式拆分
3、如果父选择器是类选择器可以利用其构造新的选择器并提取到顶层
//scss
.selector {color: blue;//利用表达式的写法构造at-root #{a } {color: red;}
}//等价css
.selector {color: blue;
}
a.selector {color: red;
}
