我正在使用 SCSS 代码来设计我的 ruby 应用程序的样式,并尝试编写我自己的“圆 Angular ”mixin 来帮助解决多浏览器边界圆 Angular 问题。
目前我有以下内容:
@mixin rounded($corner: all , $radius: 8px) {
@if $corner==all || $corner==bottom || $corner == right || $corner==bottom-right{webkit-border-bottom-right-radius: $radius;}
@if $corner==all || $corner==bottom || $corner == left || $corner==bottom-left{-webkit-border-bottom-left-radius: $radius;}
@if $corner==all || $corner==top || $corner == right || $corner==top-right{-webkit-border-top-right-radius: $radius;}
@if $corner==all || $corner==bottom || $corner == left || $corner==top-left{-webkit-border-top-left-radius: $radius;}
@if $corner==all || $corner==bottom || $corner == right || $corner==bottom-right{-khtml-border-radius-bottomright: $radius;}
@if $corner==all || $corner==bottom || $corner == left || $corner==bottom-left{-khtml-border-radius-bottomleft: $radius;}
@if $corner==all || $corner==top || $corner == right || $corner==top-right{-khtml-border-radius-topright: $radius;}
@if $corner==all || $corner==bottom || $corner == left || $corner==top-left{-khtml-border-radius-topleft: $radius;}
@if $corner==all || $corner==bottom || $corner == right || $corner==bottom-right{-moz-border-radius-bottomright: $radius;}
@if $corner==all || $corner==bottom || $corner == left || $corner==bottom-left{-moz-border-radius-bottomleft: $radius;}
@if $corner==all || $corner==top || $corner == right || $corner==top-right{-moz-border-radius-topright: $radius;}
@if $corner==all || $corner==bottom || $corner == left || $corner==top-left{-moz-border-radius-topleft: $radius;}
@if $corner==all || $corner==bottom || $corner == right || $corner==bottom-right{border-bottom-right-radius: $radius;}
@if $corner==all || $corner==bottom || $corner == left || $corner==bottom-left{border-bottom-left-radius: $radius;}
@if $corner==all || $corner==top || $corner == right || $corner==top-right{border-top-right-radius: $radius;}
@if $corner==all || $corner==bottom || $corner == left || $corner==top-left{border-top-left-radius: $radius;}
}
但是,SASS 似乎只能处理 if 语句中的一个条件?有没有办法解决这个问题,还是我必须为每个圆 Angular 做四个 if 语句?
最佳答案
您需要使用或
而不是||
。查看Sass Docs .
而且看起来你在每个 block 的最后一个 @if
语句中都有一个拼写错误:
$corner==bottom should be $corner==top
关于html - 你能在 SASS/SCSS CSS 中使用多个条件吗,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6206184/