004.mixin与function

1. @mixin

mixin允许您创建一组CSS声明,以便在整个网站中重复使用。

1.1. mixin中的CSS

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}
.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

编译后

.page-title {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  padding: 4px;
  margin-top: 10px; }

1.2. 使用参数

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

编译后

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

1.3. 默认参数

@mixin sexy-border($color, $width: 1in) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2in); }

编译后

p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed; }

h1 {
  border-color: blue;
  border-width: 2in;
  border-style: dashed; }

1.4. 可变参数

@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}

.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

编译后

.shadows {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

变量参数还包含传递给mixin或函数的任何关键字参数。 可以使用关键字($ args)函数访问这些函数,函数将它们作为从字符串(不带$)到值的映射返回。 当调用mixin时,也可以使用变量参数。 使用相同的语法,您可以展开值列表,以便将每个值作为单独的参数传递,或者展开值的映射,以便将每对值视为关键字参数。

@mixin colors($text, $background, $border) {
  color: $text;
  background-color: $background;
  border-color: $border;
}

$values: #ff0000, #00ff00, #0000ff;
.primary {
  @include colors($values...);
}

$value-map: (text: #00ff00, background: #0000ff, border: #ff0000);
.secondary {
  @include colors($value-map...);
}

编译后

.primary {
  color: #ff0000;
  background-color: #00ff00;
  border-color: #0000ff;
}

.secondary {
  color: #00ff00;
  background-color: #0000ff;
  border-color: #ff0000;
}

只要列表位于map之前,您就可以传递参数list和map,如@include colors($values ...,$map ...)。

您可以使用可变参数来封装mixin并添加其他样式,而无需更改mixin的参数签名。 如果这样做,关键字参数将直接传递到包装的mixin

@mixin stylish-mixin($color, $width){
    background:$color;
    width:$width;
}

@mixin wrapped-stylish-mixin($args...) {
    font-weight: bold;
    @include stylish-mixin($args...);
}

.stylish {
    // $width参数将被传递给stylish-mixin
    @include wrapped-stylish-mixin(#00ff00, $width: 100px);
}

编译后

.stylish {
  font-weight: bold;
  background: #00ff00;
  width: 100px; }

1.5. 传递内容给mixin

可以将一组样式传递给mixin,以便在mixin包含的样式中进行放置。 样式将出现在mixin中找到的任何@content伪指令的位置。 这使得可以定义与选择器和指令的构造相关的抽象。

@mixin apply-to-ie6-only {
  * html {
    @content;
  }
}
@include apply-to-ie6-only {
  #logo {
    background-image: url(/logo.gif);
  }
}

编译后

* html #logo {
  background-image: url(/logo.gif);
}

1.6. 变量作用域和内容块

传递给mixin的内容块在定义块的范围内进行计算,而不在mixin的范围内。 这意味着在mixin中本地的变量不能在被传递的样式块中使用,变量将解析为全局值:

$color: white;
@mixin colors($color: blue) {
  background-color: $color;
  @content;
  border-color: $color;
}
.colors {
  @include colors { color: $color; }
}

编译后

.colors {
  background-color: blue;
  color: white;
  border-color: blue;
}

2. @function

可以在sass中定义自己的函数,并在任何值或脚本上下文中使用它们。

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }

编译后

#sidebar {
  width: 240px; }

results matching ""

    No results matching ""