Question

我正在尝试为border-radius创建@mixin。这就是我到目前为止所做的工作：

@mixin border-radius($radius,$tb:"",$lr:"") {
@if $lr=="both" and $tb=="both"{
      -webkit-border-radius: $radius;
         -moz-border-radius: $radius;
          -ms-border-radius: $radius;
           -o-border-radius: $radius;
              border-radius: $radius;
} @else {   
    @if ($lr~="l"){}
    @if ($lr=="r" or $lr=="") and ($tb=="t" or $tb==""){
          -ms-border-top-right-radius: $radius;
              border-top-right-radius: $radius;
    }
    @if ($lr=="r" or $lr=="") and ($tb=="b" or $tb==""){
       -ms-border-bottom-right-radius: $radius;
           border-bottom-right-radius: $radius;
    }
    @if ($lr=="l" or $lr=="") and ($tb=="t" or $tb==""){
           -ms-border-top-left-radius: $radius;
               border-top-left-radius: $radius;
    }
    @if ($lr=="l" or $lr=="") and ($tb=="b" or $tb==""){
        -ms-border-bottom-left-radius: $radius;
            border-bottom-left-radius: $radius;
    }
}
}

我将其称为@include border-radius(5px,"b","r");，它将为右下角呈现特定于浏览器的边框半径。

我想进一步简化它并将其称为@include border-radius(5px,"br");，但为了使其成功，我需要知道如何测试变量contains。

css选择器$tb~="t"不起作用。如何检查变量是否包含值？

更新理想情况下，解决方案看起来像这样：

@mixin border-radius($radius,$sides...) {
$t:0;$b:0;$r:0;$l:0;
@if $sides ~="l" {$l:1;}
@if $sides ~="r" {$r:1;}
@if $sides ~="t" {$t:1;}
@if $sides ~="b" {$b:1;}
@if $l+$r==0 {$l:1;$r:1;}//if neither l nor r are passed, both are included
@if $t+$b==0 {$t:1;$b:1;}//if neither b nor t are passed, both are included
@if $sides=="" or $t+$b+$r+$l==4 {//handle case when all are returned
      -webkit-border-radius: $radius;
         -moz-border-radius: $radius;
          -ms-border-radius: $radius;
           -o-border-radius: $radius;
              border-radius: $radius;
} @else {
    @if $r==1 and $t==1{
          -ms-border-top-right-radius: $radius;
              border-top-right-radius: $radius;
    }
    @if $r==1 and $b==1{
       -ms-border-bottom-right-radius: $radius;
           border-bottom-right-radius: $radius;
    }
    @if $l==1 and $t==1{
           -ms-border-top-left-radius: $radius;
               border-top-left-radius: $radius;
    }
    @if $l==1 and $b==1{
        -ms-border-bottom-left-radius: $radius;
            border-bottom-left-radius: $radius;
    }
}}

然后，添加@include border-radius(3px,l,t,b);＆amp; @include border-radius(3px,l);会返回：

-ms-border-top-left-radius: 3px;
    border-top-left-radius: 3px;
-ms-border-top-left-radius: 3px;
    border-top-left-radius: 3px;

和@include border-radius(3px);会返回：

-webkit-border-radius: 3px;
   -moz-border-radius: 3px;
    -ms-border-radius: 3px;
     -o-border-radius: 3px;
        border-radius: 3px;

鉴于没有计算在运行时发生，我不关心性能，但我担心我的sass代码简洁易读。我想我可以使@each方法起作用。

Answer 1

我不知道怎么做包含，但你可以传递一个列表并使用@each循环。

$sides: l,b,r,t

@each $side in $sides{
    @if $side==l {do something}
    @else if $side==t {do something}
    @else if $side==b {do something}
    @else if $side==r {do something}
}

它不像contains那样方便，但如果列表有值，则应该让你执行代码。

Answer 2

你想要太聪明了。最直接的方法是在属性名称之后将其命名为。

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
          border-radius: $radius;
}

@mixin border-top-right-radius($r) {
    // other prefixes
    border-top-right-radius: $r;
}

如果你真的想要聪明，可以这样做：

@mixin border-radius($tl: null, $tr: null, $br: null, $bl: null) {
    border-top-left-radius: $tl;
    border-top-right-radius: $tr;
    border-bottom-right-radius: $br;
    border-bottom-left-radius: $bl;
}

.foo {
    @include border-radius($tl: .5em, $br: .5em);
}

生成：

.foo {
  border-top-left-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
}

请记住，以这种方式写出单独的属性比使用速记要多得多，所以要负责任地使用：

.foo {
    border-radius: .5em 0;
}

包含的SASS条件语句

2 个答案: