常用sass代码

1.sass 变量

$width: 5em;  (!global  可以定义为全局变量   !default 未赋值则使用该值，否则用之前的值)

#main {
  width: $width;  
}

2.插值语句 #{}

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

编译为
p.foo {
  border-color: blue; }

3.导入scss

@import "rounded-corners", "text-shadow";

4.扩展  @extend

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

5.占位符选择器

#context a%extreme {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}

.notice {
  @extend %extreme;
}

编译后
#context a.notice {
  color: blue;
  font-weight: bold;
  font-size: 2em; }

6.循环

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

@each $animal, $color, $cursor in (puma, black, default),
                                  (sea-slug, blue, pointer),
                                  (egret, white, move) {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}

7.混合与引入混合

@mixin clearfix {
  display: inline-block;
  &:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  * html & { height: 1px }
}


.page-title {
  @include clearfix ;
  padding: 4px;
  margin-top: 10px;
}
或者直接  @include clearfix ;





@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}

p { @include sexy-border(blue, 1in); }
编译后
p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed; }

8.函数

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

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

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

其他

@use  @forward  mix