Sass：混合器、选择器继承、数值运算符、

最新推荐文章于 2024-04-04 06:00:48 发布

忘川之鱼

最新推荐文章于 2024-04-04 06:00:48 发布

阅读量233

点赞数

文章标签： sass 前端 css

本文链接：https://blog.csdn.net/m0_68618659/article/details/125978207

版权

看上去很像其他的css@标识符，比如说@media或者@font-face。这个标识符给一大段样式赋予一个名字，这样你就可以轻易地通过引用这个名字重用这段样式。下边的这段sass代码，定义了一个非常简单的混合器，目的是添加跨浏览器的圆角边框。@mixinrounded-corners{-moz-border-radius5px;-webkit-border-radius5px;border-radius5px;}然后就可以在你的样式表中通过@include来使用这个混合器，放在你希望的任何地。...

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

一、混合器

如果你的整个网站中有几处小小的样式类似（例如一致的颜色和字体)，那么使用变量来统一处理这种情况是非常不错的选择。但是当你的样式变得越来越复杂，你需要大段大段的重用样式的代码，独立的变量就没办法应付这种情况了。你可以通过sass的混合器实现大段样式的重用。

混合器使用@mixin标识符定义。看上去很像其他的css @标识符，比如说@media或者@font-face。这个标识符给一大段样式赋予一个名字，这样你就可以轻易地通过引用这个名字重用这段样式。下边的这段sass代码，定义了一个非常简单的混合器，目的是添加跨浏览器的圆角边框。

@mixin rounded-corners {

        -moz-border-radius: 5px;

        -webkit-border-radius: 5px;

        border-radius : 5px;

}

然后就可以在你的样式表中通过@include来使用这个混合器，放在你希望的任何地方。@include调用出混合器中的所有样式提取出来放在@include被调用的地方。如果像下边这样写:

notice {

        background-color: green;

        border: 2px solid #00aa00;

        include rounded-corners;

}

混合器定义：@mixin 混合器的名称 {代码}

@include 调用混合器的值

案例：sass代码：

@mixin a {
    text-decoration: none;
    font-family: "微软雅黑";
    font-size: 28px;
}

.nav {
    color: blue;
    @include a;
}

.list {
    color: aquamarine;
    @include a;
}

@mixin zbtn {
    width: 100px;
    height: 40px;
    border-radius: 10px;
}

//带有参数的混合器
@mixin color($bgcolor, $wdith, $bc, $bt:$bc) {
    background-color: $bgcolor;
    border: $wdith solid $bc;
    color: $bt;
}

.btn {
    @include zbtn;
    // @include color(gray, pink, 5px)
    @include color(blue, 5px, pink, )
}

.btn1 {
    @include zbtn;
    @include color(palevioletred, red, 10px)
}

.btn2 {
    @include zbtn;
    @include color(blue, green, 15px)
}

css代码：

.nav{color:blue;text-decoration:none;font-family:"微软雅黑";font-size:28px}
.list{color:#7fffd4;text-decoration:none;font-family:"微软雅黑";font-size:28px}
.btn{width:100px;height:40px;border-radius:10px;background-color:blue;border:5px solid pink;
color:pink}.btn1{width:100px;height:40px;border-radius:10px;background-color:#db7093;
border:red solid 10px;color:10px}.btn2{width:100px;height:40px;border-radius:10px;
background-color:blue;border:green solid 15px;color:15px}

html代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link

最低0.47元/天解锁文章

忘川之鱼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Sass：混合器、选择器继承、数值运算符、

看上去很像其他的css@标识符，比如说@media或者@font-face。这个标识符给一大段样式赋予一个名字，这样你就可以轻易地通过引用这个名字重用这段样式。下边的这段sass代码，定义了一个非常简单的混合器，目的是添加跨浏览器的圆角边框。@mixinrounded-corners{-moz-border-radius5px;-webkit-border-radius5px;border-radius5px;}然后就可以在你的样式表中通过@include来使用这个混合器，放在你希望的任何地。...
复制链接

扫一扫