Question

我正在开发一个将使用两种语言的新项目。阿拉伯语和英语。

我将在这个项目中使用SASS，在开始进行任何开发之前，我想确保使用关于浮点数和RTL / LTR的最佳方法

我想知道是否可以使用扩展SASS函数的参数。

我的HTML正文将根据用户语言提供一个类。基于该类，如果是EN，我想向左浮动，如果是AR则向右浮动。要做到这一点，我在这里有一个快速草稿：http://jsfiddle.net/WJ6wC/

.lang-en {
    direction: ltr;
    %float-dir {
        float:left;
    }
    %text-align {
        text-align:left;
    }
}
.lang-ar {
    direction: rtl;
    %float-dir {
        float:right;
    }
    %text-align {
        text-align:right;
    }
}
.content {
    width:500px;
    margin:20px auto;
    padding:20px;
    background:#e5e5e5;
    overflow:auto;
    h1, p {
        margin:0;
    }
    .thumbnail {
        @extend %float-dir;
        margin-right:20px;

    }
    .description {
        @extend %float-dir;
        @extend %text-align;
    }
}

.meta {    
      a {

        font-size:12px;
        text-decoration:none;
    }
}

.icon {
    display:inline-block;
    width:10px;
    height:10px;
    &:after {
      content:"+";
      display:inline-block;
     }
}

.control-panel {
    margin:20px 0 0 0;
    padding:10px 0 0 0;
    border-top:1px solid #ccc;
}

有一个jQuery位可以在点击时更改类。

不幸的是，程度并不接受我所知道的任何论据。我怎么能这样做，取决于身体类而不是'margin-left'，'margin-right'或者代替'padding-left'，'padding-right'？

我在想这样的事情：

.content {
     %marginSwap(10px 0 0 10px); 
}

在语言类中的某处混合以将margin-left值与margin right值交换。

像mixin一样，但依赖于父类，如扩展名：

@mixin marginSwap($top, $right, $bottom, $left) {
    margin-top:$top;
    margin-right:$left; // Left instead of right
    margin-bottom:$bottom;
    margin-left:$right;
}

希望你能从我的jsfiddle中更好地理解

Answer 1

我可以建议利用lang属性吗？如果你愿意，你可以很容易地使用mixins而不是extends。

http://codepen.io/cimmanon/pen/tshuK

@mixin margin($v) {
  @if length($v) == 4 {
    margin: $v;

    &:lang(ar) {
      margin: nth($v, 1) nth($v, 4) nth($v, 3) nth($v, 2);
    }
  } @else {
    margin: $v;
  }
}

@mixin margin-right($v) {
  margin-right: $v;

  &:lang(ar) {
    margin-left: $v;
  }
}

:lang(en) {
  direction: ltr;
}

:lang(ar) {
  direction: rtl;
}

%float-left {
  //&:lang(en) {
    float: left;
  //}

  &:lang(ar) {
    float: right;
  }
}

%align-left {
  //&:lang(en) {
    text-align: left;
  //}

  &:lang(ar) {
    text-align: right;
  }
}

.content {
    width:500px;
    margin:20px auto;
    padding:20px;
    background:#e5e5e5;
    overflow:auto;
    h1, p {
        margin:0;
    }
    .thumbnail {
        @extend %float-left;
        //@include margin(0 20px 0 0);
        @include margin-right(20px);
    }
    .description {
        @extend %float-left;
        @extend %align-left;
    }
}

您可以在任何您认为合适的祖先元素上设置lang属性，而不是使用类（如果需要，可以在html或body标签上一直使用）。

<div lang="en"></div>

Sass扩展了参数或解决方法

1 个答案: