首页 文章

Sass扩展了参数或解决方法

提问于
浏览 次
0

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

我将在这个项目上使用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 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中更好地理解

sass

1 回答

  • 2

    我可以建议利用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>
    回复于

相关问题