我想知道是否可以制作一个 mixin 来处理多个参数作为应转换为 rtl 的属性。
我想做类似的事情
.css-selector {
width: 300px;
height: 200px;
@include rtl {
padding: 10px 5px 3px 4px;
margin: 3px 8px 2px 5px;
}
}
与混合:
$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,但它不起作用(“...h $property in”之后的无效CSS:预期表达式(例如1px,粗体)是“@content {)”。
现在我用 2 个变量处理 rtl:
$dir: left !default;
$opdir: right !default;
当它是 RTL 时我会改变。我在我的 sass 文件中使用它,例如
margin-#{$dir}: 15px;
但我认为这个解决方案不够灵活。而且我也不想为每个 css 属性包含一个单独的 mixin。
有人有更好的想法或解决方案吗?欢迎任何反馈
不是相同的方法,但是双应用程序 sass http://anasnakawa.github.com/bi-app-sass/将解决 rtl 问题,并且它将为您生成 2 个不同的样式表
创建必要的文件(在上面的链接中进行了解释)后,您所要做的就是为左/右属性调用预定义的混合(浮动,边框,边距,填充,文本对齐...)
.foo {
@include float(left);
@include border-left(1px solid white);
@include text-align(right);
}
该项目还有一个用于较少语言的端口
- 无双应用程序 http://anasnakawa.github.com/bi-app-less/
Update
in 双应用程序 sass http://anasnakawa.github.com/bi-app-sass/有rtl
& ltr
条件混合对于处理特殊情况很有用,请参见以下示例
.something {
@include ltr {
// anything here will appear in the ltr stylesheet only
background-image: url( 'app-ltr.jpg' );
}
@include rtl {
// for rtl sheet only
background-image: url( 'app-rtl.jpg' );
margin-top: -2px;
}
}
请注意,此功能不支持bi-app-less
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)