SASS语法学习

一、嵌套

1.选择器嵌套

<header>
<nav>
    <a href=“##”>Home</a>
    <a href=“##”>About</a>
    <a href=“##”>Blog</a>
</nav>
<header>

 

nav {
  a {
    color: red;

    header & {
      color:green;
    }
  }  
}

2.属性嵌套

.box {
  border: {
   width: 12px;
   style: bold;
  }  
}

等于

.box {

  border-width: 12px;

  border-style: bold; }

二、混合宏

1.声明混合宏

@mixin border-radius($radius){    //它可以传递多个参数，也可以不传递任何参数
  -webkit-border-radius: $radius;
  border-radius: $radius;
}

2.调用混合宏

button {
    @include border-radius（3px）;
}

三、扩展/继承

.btn {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

.btn-primary {
  background-color: #f36;
  color: #fff;
  @extend .btn;
}

.btn-second {
  background-color: orange;
  color: #fff;
  @extend .btn;
}

四、占位符

%pt5{
  padding-top: 5px;
}
//这段代码要是没有被 @extend 调用，他并没有产生任何代码块，只是静静的躺在你的某个 SCSS 文件中。只有通过 @extend 调用才会产生代码：
.btn {
  @extend %pt5;
}

五：插值

$properties: (margin, padding);
@mixin set-value($side, $value) {
    @each $prop in $properties {
        #{$prop}-#{$side}: $value;
    }
}
.login-box {
    @include set-value(top, 14px);
}

//结果
.login-box {
    margin-top: 14px;
    padding-top: 14px;
}

//构建一个选择器
@mixin generate-sizes($class, $small, $medium, $big) {
    .#{$class}-small { font-size: $small; }
    .#{$class}-medium { font-size: $medium; }
    .#{$class}-big { font-size: $big; }
}
@include generate-sizes("header-text", 12px, 20px, 40px);

//结果
.header-text-small { font-size: 12px; }
.header-text-medium { font-size: 20px; }
.header-text-big { font-size: 40px; }