属性嵌套
属性嵌套 (Nested Properties)
有些 CSS 属性遵循相同的命名空间,比如 font-family, font-size, font-weight
都以 font
作为属性的命名空间。为了避免了重复输入,Sass 允许将属性嵌套在命名空间中,例如:
.funky {
font: {
family: fantasy;
size: 30em;
weight: bold;
}
}
编译为
.funky {
font-family: fantasy;
font-size: 30em;
font-weight: bold;
}
命名空间也可以包含自己的属性值,例如:
.funky {
font: 20px/24px {
family: fantasy;
weight: bold;
}
}
编译为
.funky {
font: 20px/24px; // 字体大小20px,行高24px
font-family: fantasy;
font-weight: bold;
}
变量
// 定义
$width: 5em;
// 使用
#main {
width: $width;
}
变量支持块级作用域,嵌套规则内定义的变量只能在嵌套规则内使用(局部变量),不在嵌套规则内定义的变量则可在任何地方使用(全局变量)。
将局部变量转换为全局变量可以添加 !global
声明:
#main {
$width: 5em !global;
width: $width;
}
#sidebar {
width: $width;
}
编译为
#main {
width: 5em;
}
#sidebar {
width: 5em;
}