0725 SASS混合器选择器继承特殊运算符

最新推荐文章于 2023-06-26 16:45:50 发布

m0_56381561

最新推荐文章于 2023-06-26 16:45:50 发布

阅读量91

点赞数

文章标签： sass css 前端

本文链接：https://blog.csdn.net/m0_56381561/article/details/125977681

版权

本文介绍了Sass中的混合器（MIXIN）、选择器继承和特殊运算符。混合器允许创建可复用的样式模块，通过参数传递实现定制。选择器继承使用@extend实现，一个选择器可以继承另一个选择器的所有样式。此外，文章还讨论了Sass中的数学、关系和逻辑运算符的应用，以及如何避免不必要的计算错误。

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

什么是混合器

这个只是单一的一个变量，一个变量对应一个值，实际应用中我们可能希望一个变量可以对象多个值,好吧，Sass提出了混合器，@mixin

定义混合器form-border，即表单中用的边框统一使用的样式.

1.新建局部文件_form.sass:

@mixin c_0 {
    font-family: "宋体";
    text-decoration: none;
}

2.使用

.nav {
    color: coral;
    display: inline-block;
    width: 100px;
    height: 100px;
    @include c_0;
    background-color: cornflowerblue;
}

混合器传参数和默认参数

混合器并不一定总得生成相同的样式。可以通过在@include混合器时给混合器传参，来定制混合器生成的精确样式。当@include混合器时，参数其实就是可以赋值给css属性值的变量。如果你写过JavaScript，这种方式跟JavaScript的function很像

定义混合器link

@mixin color($bgclor, $width, $bc, $tc:$bc) {
    background-color: $bgclor;
    border: $width solid $bc;
    color: $tc;
}

使用

.btn-default {
    @include a_0;
    @include color(rgb(244, 182, 159), 1px, red);
}

选择器继承

选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式，这个通过@extend语法实现

.btn {
    width: 100px;
    height: 50px;
    border: 2px solid red;
    border-radius: 10px;
}
.btn-default {
    @extend .btn;
    background-color: coral;
}

占位符选择器

选择器占位符 %placeholder 可以很好的解决上面提到的问题。选择器占位符很类似于CSS的类，不同的是他不是使用 (.) 开始，而是使用 (%) 开始，而且编译出来的CSS代码中并不会包括 %placeholder 规则中的样式，除非是通过 @extend 对其进行调用。

回到当初的示例，如果我们定义的图标样式如下：

%btn {
    width: 100px;
    height: 50px;
    border: 2px solid red;
    border-radius: 10px;
}
.btn-default {
    @extend %btn;
    background-color: coral;
}

特殊运算符

// 数学运算符: + - * / %

// 关系运算符： > < >= <=

// 逻辑运算符： and or not

p {

// width: 1+2;

// width: 10+20px;

// width: 10+20%;

// width: 20-10;

// width: 20-10px;

// width: 20-10%;

// width: 50%-10px; 不能与单位进行计算，会报错

//运算符/： 1.用作数学运算 2.分隔符

// border-radius: 10px/20px;

// border-radius: 10/20px;

// border-radius: 10/20;

$num_1: 1000px;

$_num_2: 20;

//当变量与数字用/链接，此时/代表除法运算

// border-radius: $num_1/$_num_2;

// border-radius: (10/5);

// border-radius: 10+10/5;

// 当不想让变量之间进行除法运算时,可以使用插值语句#{}

// border-radius: #{$num_1}/#{$_num_2};

&::after {

// 此时+号表示链接符

content: "aa"+bb;

}

$num_3:100;
    $c:red;
    @if $num_3<200 and $c==red {
        background-color: coral;
    }
    @else {
        background-color: cornflowerblue;
    }
    $name:foo;
    $attr:border;
    p.#{$name}-top {
        #{$attr}-bottom: 1px solid red;
        #{$attr}-top: 2px solid red;
        #{$attr}-radius: 20px;
    }