CSS工程化

CSS工程化

一、变量

创建变量书写格式：

$变量名：属性值

$bs:5px solid rgb(144, 144, 252);
$bgc: rgb(106, 227, 243);

功能：批量修改和复用当前css内容

引用：在需要相同属性的元素使用变量

1.嵌套选择器

&:表示同级

header{
    height: 200px;
    nav{
        height: 100px;
        background-color: $bgc;
        border: 1px solid rgb(137, 252, 122);
        ul{
            height: 100px;
            margin: 0;
            padding: 0;
            @include flexStyle(space-evenly,flex-end);
            li{
                list-style-type: none;
                a{
                    font-size: 20px;
                    color: black;
                    text-decoration: none;
                    &:hover{
                        color: rgb(245, 161, 35);
                    }
                }
            }
        }
    }
}

2.混合器

创建混合器（不带参 )

多条声明进行复用

@mixin name 引用 @inlud name

@mixin f74 {

 display: flex;

 justify-content: space-evenly;

align-items: center;

}

     @include f74;

创建混合器（带参）

给参数默认值 引用时，没写就自动引用默认值（默认值尽量往后放）

@mixin flexStyle($justStyle:center,$alignStyle) {
    display: flex;
    justify-content: $justStyle;
    align-items: $alignStyle;
}

 @include flexStyle(space-evenly,flex-end);