SASS是否支持添加!对mixin中的所有属性都很重要?

 gxh123 发布于 2023-02-13 19:01

我目前正在使用罗盘框架和所有有用的CSS3 mixins.我想使用border-radius(5px)mixin并拥有来自它的所有属性标记!important

在LESS中,可以!important通过在调用后简单地指定它来应用于mixin中的所有属性

.myMixin(@x) {
    border-radius: @x;
    -moz-border-radius: @x;
}

.myClass {
  .myMixin(5px) !important;
}

编译成

.myClass {
    border-radius: 5px !important;
    -moz-border-radius: 5px !important;
}

在SASS中这是可能的,还是我必须用一个重要的参数重写mixins?

@mixin my-border-radius($value, $important: false) {
    border-radius: @value if($important, !important, null);
    ....
}

cander.. 29

答案太明显了......

!important 可以简单地指定为属性值的一部分

border-radius(5px !important);


小智.. 8

Cander的答案适用于简单变量,其后没有任何其他属性。对于更复杂的CSS,您可以这样做,例如transition属性:

    @mixin transition($ duration,$ content:null){
        -webkit-transition:所有$ duration线性$ content;
        -moz-transition:所有$ duration线性$ content;
        -o-transition:所有$ duration线性$ content;
        过渡:所有$ duration线性$ content;
    }

我添加了$content变量并将其设置为null。现在,您可以使用以下命令来简单地调用mixin:

@include transition(0.3s);

如果要添加!important,请使用

@include transition(0.3s, !important);

谢谢!

2 个回答
  • 答案太明显了......

    !important 可以简单地指定为属性值的一部分

    border-radius(5px !important);
    

    2023-02-13 19:02 回答
  • Cander的答案适用于简单变量,其后没有任何其他属性。对于更复杂的CSS,您可以这样做,例如transition属性:

        @mixin transition($ duration,$ content:null){
            -webkit-transition:所有$ duration线性$ content;
            -moz-transition:所有$ duration线性$ content;
            -o-transition:所有$ duration线性$ content;
            过渡:所有$ duration线性$ content;
        }
    
    

    我添加了$content变量并将其设置为null。现在,您可以使用以下命令来简单地调用mixin:

    @include transition(0.3s);

    如果要添加!important,请使用

    @include transition(0.3s, !important);

    谢谢!

    2023-02-13 19:03 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有