scss学习笔记

[yangmaoHu]

变量

[yangmaoHu]

mixin

1.定义：@mixin 后添加名称与样式
@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

2.引用混合样式
@include 在其后添加混合名称，以及需要的参数（可选）
.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

3.参数
给参数设定默认值
@mixin sexy-border($color, $width: 1in) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}

关键词参数
p { @include sexy-border($color: blue); }
h1 { @include sexy-border($color: blue, $width: 2in); }

4.向混合样式中导入内容