Sass 混合器

混合器

混合器使用@mixin标识符定义。sass混合器可以简化代码,提高效率。
不能使用后代选择器去继承css选择器,否则会失控,但可以用选择器去继承后代选择器


sass中的数据类型:


数字、

字符串(常用引号包裹)、

颜色、

布尔值(true、false)、

空值(null)、

数组、

maps(键值对 key value)

可以在你的样式表中通过@include来使用这个混合器,放在你希望的任何地方。@include调用会把混合器中的所有样式提取出来放在@include被调用的地方

/* 混合器 */
@mixin border{
    border-radius: 20px;
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
}

.input{
    border: 1px solid paleturquoise;
    /* 混合器调用 */
    @include border;
}

混合器中不仅可以包含属性,也可以包含 css 规则,包含选择器和选择器中的属性

@mixin nav_ul{
    list-style: none;
    li{
        list-style: none;
        list-style-type: none;
        padding: 10px;
    }
}

ul{
    color: palegreen;
    @include nav_ul;
}

当一个包含 css 规则的混合器通过@include包含在一个父规则中时,在混合器中的规则最终会生成父规则中的嵌套规则。

混合器传参

可以通过在 @include 混合器时给混合器传参,来定制混合器生成的精确样式。当 @include 混合器时,参数其实就是可以赋值给 css 属性值的变量

@mixin colors($num1,$num2,$num3){
    color: $num1;
    &:hover{
        color: $num2;
    }
    &:vertical{
        color: $num3;
    }
}

a{
    @include colors(red,yellow ,blue )
}

选择器继承

使用 sass 的时候,最后一个减少重复的主要特性就是选择器继承。选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式。这个通过 @extend 语法实现

.asd{
    width: 100px;
    height: 200px;
    border: 1px solid red;
    margin: 10px;
}

.mard{
    @extend .asd;
    color: palegreen;
}

继承的高级用法

最常用的一种高级用法是继承一个 html 元素的样式。尽管默认的浏览器样式不会被继承,因为它们不属于样式表中的样式,但是你对 html 元素添加的所有样式都会被继承。

.span{
    background-color: red;
    @extend a;
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值