中文文档地址：https://www.sasscss.com/docs/#css-extensions
1. 嵌套样式
允许将一个 CSS 样式嵌套进另一个样式中。
body {
min-height: 100vh;
.box {
height: 100px;
background: #000;
display: flex;
align-items: center;
justify-content: center;
.content {
height: 50px;
width: 50px;
background: #999;
}
}
}
2. 引用父级选择器： ‘&’
a {
font-weight: bold;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
& 必须出现在的选择器的开头位置, 可以跟随后缀。
#main {
color: black;
&-sidebar { border: 1px solid; }
}
2. 嵌套属性
.box {
font: {
family: fantasy;
size: 30em;
weight: bold;
}
}
// 编译为
.box {
font-family: fantasy;
font-size: 30em;
font-weight: bold;
}
3. 变量 ‘$’
$width: 100px;
.box {
width: $width;
}
作用域： 不在任何嵌套选择器内定义的变量则在可任何地方使用，嵌套在选择器内的只有嵌套层级范围内可用。可以在后面添加 !global 标志，就可以全局引用（不推荐使用）
#main {
$width: 5em !global;
width: $width;
}
#sidebar {
width: $width;
}
4. 运算
支持对数字标准的算术运算（加法 +，减法 - ，乘法 * ，除法 / 和取模 % ），数字支持关系运算符(<, >, <=, >=)，并且所有类型支持相等运算符(==, !=)
- 除法
/
p {
font: 10px/8px; // 原生的CSS，不作为除法
$width: 1000px;
width: $width/2; // 使用了变量, 作为除法
width: round(1.5)/2; // 使用了函数, 作为除法
height: (500px/2); // 使用了括号, 作为除法
margin-left: 5px + 8px/2px; // 使用了 +, 作为除法
font: (italic bold 10px/8px); // 在一个列表（list）中，括号可以被忽略。
}
如果你想纯CSS 的/和变量一起使用（愚人码头注：即/不作为除法使用），你可以使用#{}插入他们。例如：
p {
$font-size: 12px;
$line-height: 30px;
font: #{$font-size}/#{$line-height};
}
5. mixin
// 定义 @minxin
@mixin large-text {
font: {
family: Arial;
size: 20px;
weight: bold;
}
color: #ff0000;
}
// 引入 @include
.page-title {
@include large-text;
padding: 4px;
margin-top: 10px;
}
可以设置参数
@mixin large-text($color) {
font: {
family: Arial;
size: 20px;
weight: bold;
}
color: $color;
}
.page-title {
$green: green;
@include large-text($green);
padding: 4px;
margin-top: 10px;
}
// 可以引入默认值，要是没有传参数，就使用默认值
@mixin large-text($color: red) {
font: {
family: Arial;
size: 20px;
weight: bold;
}
color: $color;
}
.page-title {
@include large-text;
padding: 4px;
margin-top: 10px;
}
// color 会编译为 red
6. 函数
@function px($npx){
@return $npx/375 * 100vw
}
.icons {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 px(20);
margin-top: px(20);
.icon {
background: #eee;
height: px(48);
width: px(48);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
}
}
// 可以适应不同尺寸手机端
7. 媒体查询
$break-small: 320px;
$break-large: 1024px;
@mixin respond-to($media) {
@if $media == handhelds {
@media only screen and (max-width: $break-small) { @content; }
}
@else if $media == medium-screens {
@media only screen and (min-width: $break-small + 1) and (max-width: $break-large - 1) { @content; }
}
@else if $media == wide-screens {
@media only screen and (min-width: $break-large) { @content; }
}
}
.profile-pic {
float: left;
width: 250px;
@include respond-to(handhelds) { width: 100% ;}
@include respond-to(medium-screens) { width: 125px; }
@include respond-to(wide-screens) { float: none; }
}
// 编译后
.profile-pic {
float: left;
width: 250px;
}
@media only screen and (max-width: 320px) {
.profile-pic {
width: 100%;
}
}
@media only screen and (min-width: 321px) and (max-width: 1023px) {
.profile-pic {
width: 125px;
}
}
@media only screen and (min-width: 1024px) {
.profile-pic {
float: none;
}
}
8. 一个按钮小例子 （hover 之后上下，左右抖动）
*{box-sizing: border-box; padding: 0; margin: 0;}
body{
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
@mixin createButton($color){
background: $color;
box-shadow: 0 4px 0 darken($color,15%)
}
.buttonWrapper{
button {
margin: 0 40px;
border: none;
padding: 10px 20px;
border-radius: 4px;
color: #fff;
font-size: 18px;
&:first-child {
$blue: #55acee;
@include createButton($blue);
&:hover {
animation-duration: 0.3s;
animation-name: left-right;
}
}
&:nth-child(2) {
$green: #2ecc71;
@include createButton($green);
&:hover{
animation-name: up-down;
animation-duration: 0.3s;
}
}
}
}
$n: 10%;
$step: 25%;
@keyframes left-right {
@for $i from 0 to 4 {
#{$i * $step}{
@if $i % 2 == 0 {
transform: translateX($n)
}@else{
transform: translateX(-$n)
}
}
}
100%{
transform: translateX(0)
}
}
$n2: 20%;
$step: 25%;
@keyframes up-down {
@for $i from 0 to 4 {
#{$i * $step}{
@if $i % 2 == 0 {
transform: translateY($n2)
}@else{
transform: translateY(-$n2)
}
}
}
100%{
transform: translateY(0)
}
}
预览
