0

我是 sass 的新手,目前正在探索它。我想尝试使用 mixin,但是当我尝试它时,它就是行不通。这是代码:

@mixin container($radius, $width, $height, $bg, $color) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    border-radius: $radius;

    $width: $width;
    $height: $height;

    $bg: $bg;
    $color: $color;

    margin: 0 auto;
}

.container {
    @include container(10px, 80%, 700px, $white, $dark-grey)
}

所以我有一个 div 和 class 容器,想把 mixin 放在那里,但它就是不工作。有人可以帮忙吗??

4

2 回答 2

2

这个?

$white: #fff;
$dark-grey: #666;

@mixin container($radius, $width, $height, $bg, $color) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    border-radius: $radius;

    width: $width;
    height: $height;

    background: $bg;
    color: $color;

    margin: 0 auto;
}

.container {
    @include container(10px, 80%, 700px, $white, $dark-grey)
}
于 2019-02-01T08:35:21.560 回答
1

看起来你的变量有点混乱

这应该有效:

@mixin container($radius, $width, $height, $bg, $color) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    border-radius: $radius;

    width: $width;         //  <= here
    height: $height;       //  <= here

    background-color: $bg; //  <= here
    color: $color;

    margin: 0 auto;
}

.container {
    @include container(
      10px, 
      80%, 
      700px, 
      white,    // <= here
      darkgrey  // <= here
    )

}

CSS


.container {
  border-radius: 10px;
  width: 80%;
  height: 700px;
  background-color: white;
  color: darkgrey;
  margin: 0 auto;
}

于 2019-02-01T07:01:18.050 回答