1.样式的嵌套
父选择器里可以嵌套子选择器
div{
height: 100px;
ul{
height: 80px;
li{
height: 50px;
}
}
}
2.父选择器
可以用 & 代表嵌套规则外层的父选择器
a {
&:active {//此处&指代其父选择器a
color:blue;
}
span {
&:hover {//此处&指代其父选择器span
color:green;
}
}
}
3.占位符选择器
“占位符”:以 % 开头,必须通过 @extend 指令调用
scss
%placeholder {//占位符选择器
width: 100px;
height: 100px;
color: red;
&:hover {
color: blue;
}
}
.btn {
@extend %placeholder;//调用占位符选择器
font-size: 18px;
}
.btn2 {
@extend %placeholder;
font-size: 16px;
}
css
.btn, .btn2 {
width: 100px;
height: 100px;
color: red;
}
.btn:hover, .btn2:hover {
color: blue;
}
.btn {
font-size: 18px;
}
.btn2 {
font-size: 16px;
}
注:有点像混入mixin
@extent与混入的区别
混入的mixin-name{}不会在css文件中保留下来.
extend的可以,因为它是把这部分公共样式单独放的
4.属性嵌套
命名空间
有些 CSS 属性具有相同的命名空间
- 定义字体样式的属性: font-size ; font-weight ; font-family ; 它们具有相同的命名空间 font
- 定义边框样式的属性:border-radius ; border-color ; 它们具有相同的命名空间 border
sass嵌套属性
Sass 允许将属性嵌套在命名空间中,同时命名空间也可以具有自己的属性值
实现方法:
把属性名从中划线-的地方断开,在该属性后边添加一个冒号:,紧跟一个{ }块,把子属性部分写在这个{ }块中
.box {
border: {
radius: 5px;
color:red;
}
font: {
family:'YaHei';
size:18px;
weight:600;
}
margin: auto {
bottom: 10px;
top: 10px;
};
}