sass基础语法

• 变量
  语法:$变量名:值
  注意:
  $也是变量名的一部分!
• 注释

		// 当行注释      这种注释,在编译的时候直接滤掉
		
		/*
		多行注释         这种注释编译时会保留,但是gulp打包时会去掉
		*/               
		
		/*!
		多行注释         这种注释编译时会保留,即使gulp打包时也不会去掉
		*/

• 数组
  变量:(),(),(),…
  例:$arr:(1,值1,值2),(2,值3,值4);

	$arr:(1,5px,red),(2,6px,green),(3,10px,pink);

• 条件语句
  • if条件
    @if 变量==值 { 样式}
  • if-else条件
    @if 变量==值 { 样式}
    @else{样式}
  • if-else if-else条件
    @if 变量==值 { 样式}
    @else if 变量==值{样式}
    @else{样式}
• 循环语句

  • for-to循环
    @for 变量 from 数字 to 数字{ 样式 }
    包含第一个数字,不包含第二个数字
    在选择器里使用变量时候 格式为: #{变量}
    在样式中使用直接使用变量即可

  • for-through循环
    @for 变量 from 数字 through 数字{ 样式 }
    包含第一个数字,也包含第二个数字

  • each循环

		$arr:(1,5px,red),(2,6px,green),(3,10px,pink);
		
		@each $index,$size,$color in $arr{
		    li:nth-child(#{$index}){
		        height: $size;
		        color: $color;
		    }
		}
	

• 选择器的嵌套

1. 后代选择器嵌套
   语法: 父级 { 后代 {} }
2. 子代选择器嵌套
   语法: 父级 { > 子代 {} }
3. 连字符选择器嵌套
   伪类选择器和伪元素选择器嵌套
   当你需要的伪类和伪元素和选择器连接再一起的时候
   使用 & 连接符操作
   语法: 选择器 { &:hover {} }
4. 群组选择器的嵌套
   语法: 群组选择器 { 子级 {} }
   语法: 选择器 { 群组选择器 {} }
   语法: 群组选择器 { 群组选择器 {} }

• 属性嵌套

1. 前提: 可以嵌套的属性才能使用,就是属性中带有中划线的属性
   => border-left
   => margin-left
   => padding-left
   => background-color
   => background-image
2. 语法: 以 padding 为例
   padding: 10px; 上下左右
   padding: 10px 10px; 上下 左右
   padding: 10px 10px 10px 10px; 上 右 下 左
   padding: 10px {
   left: 5px;
   };

• 混入/混合器
  • sass 的混合器
    => 语法: @mixin 混合器名称 {}
    => 语法: @mixin 混合器名称(变量名) {}
    => 语法: @mixin 混合器名称(变量名:默认值) {}
  • sass 的混合器的使用
    => 语法: @include 混合器名称;
    => 语法: @include 混合器名称(变量名:实际值);
• 继承
  { @extend 另一个选择器 }
• 导入
  @import “你要导入的文件名称”;