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

看上去很像其他的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>
    &l
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值