scss，函数

IT00123

已于 2022-07-25 17:01:17 修改

阅读量247

点赞数

文章标签： scss css html

于 2022-07-25 16:55:07 首次发布

本文链接：https://blog.csdn.net/IT00123/article/details/125978197

版权

本文介绍了SCSS中的函数和占位符选择器的使用方法，通过示例展示了如何创建和调用函数以避免代码重复，并探讨了占位符选择器在简化CSS编译过程中的作用。此外，还提到了运算操作，包括比较运算符和避免除法运算的技巧。

摘要由CSDN通过智能技术生成

函数

不用函数写按钮

.btn {
    width: 200px;
    height: 30px;
    border-radius: 15px;
    background-color: blue;
    border: 5px solid red;
    color: black;
}

使用函数

@mixin a1($lift, $rikjh, $lk) {
    width: $lift;
    height: $lift;
    border-radius: $lk;
}
@mixin na($color, $b-col, $ww, $ro:blue) {
    background-color: $color;
    border: $ww solid $ro;
    color: $b-col;
}
button {
    &:nth-child(1) {
        @include a1(100px, 100px, 30px);
        @include na(red, hotpink, 10px);
    }
    &:nth-child(2) {
        @include a1(100px, 100px, 50px);
        @include na(rgb(215, 253, 0), rgb(0, 255, 213), 10px);
    }
    &:nth-child(3) {
        @include a1(100px, 100px, 50px);
        @include na(rgb(51, 255, 0), rgb(162, 0, 255), 10px);
    }
}

@mixin a1($lift, $rikjh, $lk) 函数，函数名字ÿ