Sass学习记录

博丽七七2024-03-18 6:06

1.变量声明

css 复制代码

$demo-color: red;
$demo-border: 1px solid $demo-color;
.a{
    border: $demo-border;
}

2.嵌套

css 复制代码

#a{
    .a{
        width: 1px
    }
}

3.符号&，伪类选择

css 复制代码

.bbc a{
    color: red;
    &:hover{
        color: blue
    }
}

4.群组嵌套

css 复制代码

#content{
    h1,h2,h3,h4{
        border: solid
    }
}

5.!default

css 复制代码

//如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值
$default-test: 4000px !default;
#div{
    width: $default-test;
}