我想知道是否有可能创建一个mixin,它可以处理多个参数作为属性,并将其转换为rtl。我想做的事情类似于:
.css-selector {
width: 300px;
height: 200px;
@include rtl {
padding: 10px 5px 3px 4px;
margin: 3px 8px 2px 5px;
}
}
使用mixin:
$rtl = false !default;
@mixin rtl() {
@if $rtl {
dir: rtl;
@each $property in @content {
//check property if it's padding or margin or something
else rtl-related... if hit use rtl mixin
}
}
@else { @content; }
}
我认为我应该解析@content,但它无法正常工作(Invalid CSS after "...h $property in ": expected expression (e.g. 1px, bold), was "@content {)。
现在我使用2个变量来处理rtl:
$dir: left !default;
$opdir: right !default;
我希望在RTL时更改这个内容。我在Sass文件中使用它,例如:
margin-#{$dir}: 15px;
但我认为这个解决方案不够灵活。而且我也不想为每个 CSS 属性包含一个单独的混合(mixin)。
是否有更好的想法或解决方案?欢迎任何反馈。
`.cssBlock{ margin-top: 50px; @if $ltr { margin-left: 30px; } @else { margin-right: 30px; } }`
- woutvdd