sass快速入门

本文参考阮一峰的《SASS用法指南》

一、申明变量

申明变量用$

$blue:#1875e7

1.1调用变量，变量作为值用

div{
  color: $blue;
}

1.2当变量作为属性值时，就需要写成#{$left}

$side:left;
.rounded{
  border-#{$side}-radius:5px;
}

二、 计算功能，可以在样式中使用算式

• 加不加括号都可以
• $var 可以直接在计算公式里引用变量，从而使代码得到复用

$var:10px;
body{
  margin:(14px/2);
  top:50px + 100px;
  right:$var * 2;
}

三、嵌套

3.1 选择器嵌套

div{
  p{
    color:red;
  }
}

3.2 属性嵌套,比如broder-color，需要加上冒号

div{
  border:{
    color:red;
  }
}

3.3 在嵌套的代码块里，使用&符号来表示父元素，比如a:hover

a{
  &:hover{
    color:red;
  }
}

四、注释

• 注释有两种，一种是//，一种是/**/

五、继承

• sass允许选择器继承另一个选择器，用 @extend 表示继承。

.class1{
  color:red;
  font-size:10px;
}
.class2{
  @extend .class1;
  border-color: #1875e7;
}

六、定义一个css版的函数，可以传递变量

1.@mixin 好比 js里面的function关键字，可以用来定义函数

• 还可以定义参数 $value
• 还可以定义初始值 $value:10px
• 还可以把属性作为变量

@mixin left{
  float:left;
  margin-left:10px;
}

@mixin left($value:10px){
  float: left;
  margin-left:$value;
}

@mixin left($derectiion){
  float:left;
  margin-#{$derection}:10px;
}

2.调用css版的函数，需要使用关键字@include

div{
@include left(20px);
}

七、颜色函数

• SASS提供了一些内置的颜色函数，以便生成系列颜色。

div{　color:lighten(#cc3, 10%);// #d6d65c
　　color:darken(#cc3, 10%); // #a3a329
　　color:grayscale(#cc3); // #808080
　　color:complement(#cc3); // #33c
 }

八、if 和 else 判断

p {
  @if 1 + 1 == 2 { border: 1px solid; }
  @if 5 < 3 { border: 2px dotted; }
  }

@mixin p($color){
  @if lightness($color) > 30% {
    background-color: #000;
  } @else {
    background-color: #fff;
  }
}

九、while循环、 for循环 和 each命令

$i:6;
@while $i>0{
  .item-#{$i}{
    width:2em*$i
  }
  $i:$i-2;
}

@for $item from 1 to 10{
  .border-#{$item}}{
  border:#{$item}px,solid,red,
}

@each $member in a ,b,c,d{
  .#{$member}{
    background-image:url("/image/#{$member}.jpg");
  }
}

十、自定义函数,使用@function和@return关键字，无需关键词，直接调用。

@function double($n){
  @return $n*4
}

#header{
  width:double(5px)
}