Sass语法基础

一.sass文件不能被浏览器直接识别，需要编异成css文件，在命令行输入指令：

sass main.scss main.css

该指令将main.scss文件编译到main.css文件中。

二.嵌套selector，在sass语法中，可以在一个selector中嵌套定义另一个selector，如：

.parent {
  color: blue;
  .child {
    font-size: 12px;
  }
}

编译后等价于以下的css定义：

.parent {
  color: blue;
}

.parent .child {
    font-size: 12px;
}

三.嵌套CSS属性值，在属性值共有的字母后加":"符号，如：

.parent {
  font : {
    family: Roboto, sans-serif;
    size: 12px;
    decoration: none;
  }
}

等价于如下css定义：

.parent {
  font-family: Roboto, sans-serif;
  font-size: 12px;
  font-decoration: none;
}

四.定义变量

在sass语法中,"$"符号用来定义变量，如：

$translucent-white: rgba(255,255,255,0.3);

 五.除了Numbers，Strings，Boolean,null等数据类型，sass语法添加了集合（lists）和图（map）数据类型，

lists数据可以用空格或逗号分隔，如：逗号分隔：

$font-family:Helvetica, Arial, sans-serif;

空格分隔：

$standard-border: 4px solid black;

注：你可以将list用括号括起来，然后创建集合的集合。

maps跟lists很相似，除了maps的数据是键值对，如：

(key1: value1, key2: value2);

注：key可以是list或者另一个map

六.Maxin

定义Maxin：可以定义参数，给参数设置默认值，参数可以以list或map的形式传入，如：

@mixin stripes($direction, $width-percent, $stripe-color, $stripe-background: #FFF) {
  background: repeating-linear-gradient(
    $direction,
    $stripe-background,
    $stripe-background ($width-percent - 1),
    $stripe-color 1%,
    $stripe-background $width-percent
  );
}

使用：在定义selector属性的大括号中添加如下语句：

 @include stripes($college-ruled-style...);

其中，变量的定义如下：

$college-ruled-style: ( 
    direction: to bottom,
    width-percent: 15%,
    stripe-color: blue,
    stripe-background: white
);

七.string interpolation 

string interpolation 允许你在字符串中间插入另一个以变量形式存在的字符串，如：
定义Mixin：

@mixin photo-content($file) {
  content: url(#{$file}.jpg); //string interpolation
  object-fit: cover;
}

使用：

.photo { 
  @include photo-content('titanosaur');
  width: 60%;
  margin: 0px auto; 
  }

等价于以下css文件：

.photo { 
  content: url(titanosaur.jpg);
  width: 60%;
  margin: 0px auto; 
}

八.Maxin中允许使用"&"selector,该符号代表Maxin被include的selector，如：

定义Maxin：

@mixin text-hover($color){
  &:hover {
      color: $color; 
  }
}



使用：


.word { //SCSS: 
    display: block; 
    text-align: center;
    position: relative;
    top: 40%;
    @include text-hover(red);
  }
等价于以下css文件：


.word{ 
    display: block;
    text-align: center;
    position: relative;
    top: 40%;
  }
  .word:hover{
    color: red;
  }
九.each循环语法：
$list: (orange, purple, teal);

//Add your each-loop here
@each $item in $list {
  .#{$item} {
    background: $item;
  }
}


十.for循环语法：


@for $i from 1 through $total {
  .ray:nth-child(#{$i}) {
    background: blue;
   }
}

十一.if函数语法：

两种情况：
width: if( $condition, $value-if-true, $value-if-false);

多种情况：
@if($suit == hearts || $suit == spades){
   color: blue;
 }
 @else-if($suit == clovers || $suit == diamonds){
   color: red;
 }
 @else{
   //some rule
 }