混合器、选择器继承

最新推荐文章于 2022-08-23 19:30:58 发布

依墨~

最新推荐文章于 2022-08-23 19:30:58 发布

阅读量81

点赞数

文章标签： java 数据库 servlet

本文链接：https://blog.csdn.net/m0_62073591/article/details/125978601

版权

1.混合器

混合器使用@mixin标识符定义混合器的定义:@mixin 混合器的名称{代码}

@include调用

（1）不带参数的混合器：

例；

@mixin a_0 {
    text-decoration: none;
    font-family: "微软雅黑";
    font-size: 18px;
    width: 200px;
    height: 50px;
}
.nav{
    color: red;
    display: inline-block;
    @include a_0();
}
.list{
    color: green;
    @include a_0()
}
<body>
    <div class="div_0">
        <a href="#" class="nav">这是一个链接</a>
        <a href="#" class="list">这是一个链接</a>
    </div>
</body>

效果：

（2）带参数的选择器

例：

@mixin wb {
    width: 100px;
    height: 50px;
    border-radius: 10px;
}
@mixin one($a,$b,$c,$d) {
    background-color: $a;
    border: $b solid $c;
    color: $d;
}
//给混合器默认值
@mixin one_1($a,$b,$c,$d:green) {
    background-color: $a;
    border: $b solid $c;
    color: $d;
}
.div_1{
    @include wb;
    // @include one(red, 1px, yellow,pink);
    @include one_1(red,2px ,yellow);
}
.div_2{
    @include wb;
    @include one(yellow,1px,red,pink);
}
<body>
    <input type="button" value="文字" class="div_1">
    <input type="button" value="文字" class="div_2">
</body>

效果:

2.何时使用混合器

如果你发现自己在不停地重复一段样式，那就应该把这段样式构造成优良的混合器，

3.继承的使用

继承应用：@extend

%占位符

// %占位符
.btn {
    width: 100px;
    height: 50px;
    border-radius: 10px;
}
.div_1{
    @extend .btn;
    background-color: gainsboro;
    border: 2px solid gray;
}
.div_2{
    @extend .btn;
    background-color: rosybrown;
    border: 2px solid red;
}
.div_3{
    @extend .btn;
    background-color: greenyellow;
    border: 2px solid green;
}
<body>
    <input type="button" value="文字" class="btn div_1">
    <input type="button" value="文字" class="div_2">
    <input type="button" value="文字" class="div_3">
</body>

效果：

4.sass运算符的使用

数字运算符：+ - * / % 百分号不能与单位进行计算，会报错

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

逻辑运算符：and or not

scss：

p{
    //加
    width: 1+3;
    width: 10+20%;
    width: 20+40px;
}
span{
     //减
     width: 20-10;
     width: 20-10px;
     width: 10-5%;
}

效果：css

p {
  width: 4;
  width: 30%;
  width: 60px;
}

span {
  width: 10;
  width: 10px;
  width: 5%;
}

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

1.用作分隔符时例：

border-radius: 10/20; //当两个单位用/进行运算 / 是分隔符

2. / 用作数学运算时例：

//当变量与数字用/连接，此时/代表运算符
    $num_1:1000px;
    $num_2:20;
    border-radius: $num_1/$num_2;
    //或加括号
    border-radius: (10/5);
    //或
    border-radius: 10+10/5;

sacc：

b{
    //当不想让变量之间进行除法运算时 可以使用插值语句#{变量名}
    $num_3:10px;
    $num_4:20px;
    border-radius: #{$num_3}/#{$num_4};
    &::after{
        content: "aa"+bb;//此时+表示连接符
    }
    $num_3:100;
    $c:red;
    @if $num_3>200 and $c=="red"{
        background-color: blue;
    }@else{
        background-color: red;
    }
}

css效果

b {
  border-radius: 10px/20px;
  background-color: red;
}
b::after {
  content: "aabb";
}

5.1 sass常见函数的基本使用

Color(颜色函数)

Sass包含很多操作颜色的函数。

lighten() 与 darken()函数可用于调亮或调暗颜色

opacify()函数使颜色透明度减少

transparent()函数使颜色透明度增加

mix()函数可用来混合两种颜色。

String（字符串函数）

Sass有许多处理字符串的函数。

向字符串添加引号的quote()

获取字符串长度的str-length()

将内容插入字符串给定位置的str-insert()

Math(数值函数)

数值函数处理数值计算。

percentage()将无单元的数值转换为百分比

round()将数字四舍五入为最接近的整数

min()和max()获取几个数字中的最小值或最大值

random()返回一个随机数。

List函数

List函数操作List。

length()返回列表长度

nth()返回列表中的特定项

join()将两个列表连接在一起

append()在列表末尾添加一个值。

Map函数

Map函数操作Map。

map-get()根据键值获取map中的对应值

map-merge()来将两个map合并成一个新的map

map-values()映射中的所有值。

selector选择器函数

选择符相关函数可对CSS选择进行一些相应的操作。

selector-append()可以把一个选择符附加到另一个选择符

selector-unify()将两组选择器合成一个复合选择器。

依墨~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
混合器、选择器继承

混合器使用@mixin标识符定义混合器的定义@mixin混合器的名称{代码}lighten()与darken()函数可用于调亮或调暗颜色。selector-unify()将两组选择器合成一个复合选择器。map-merge()来将两个map合并成一个新的map。min()和max()获取几个数字中的最小值或最大值。将内容插入字符串给定位置的str-insert()map-get()根据键值获取map中的对应值。获取字符串长度的str-length()map-values()映射中的所有值。...
复制链接

扫一扫