scss

!scss 的几个常用

npm install -g node-sass //安装node-sass处理scss文件// 可能会失败
//npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/ 
//用cnpm安装 
//在html中用scss
//它会在目标文件夹下新建一个同名的css文件，然后关联
node-sass  -w -r <源文件夹> -o <目标文件夹>    //它只会跟踪同名文件，没有则新建
-w, --watch                Watch a directory or file //监听
-r, --recursive            Recursively watch directories or files  //递归地查看目录或文件
-o, --output               Output directory //输出目录
//指定文件
node-sass --watch src/input.scss dist/output.css 

  插值：#{$name}  
  父级选择器：&
  变量声明：$
  继承：@extend
  判断：@if (我觉得在@mixin中更能体现它的强大，因为可以结合变量使用)
  混合指令：@mixin  使用include

/*代码示例*/
   <div class="mpt">
       <div class="children"></div>
       <div class="children2"></div>
       <div class="children3"></div>
  </div>

/*嵌套   父嵌子*/  
$col:red; /*变量声明，跟js一样有作用域*/
$chi:green;
$chi2:black;
$col2:blue;
$move:hover;

.all{
  width: 50px;
  height: 50px;
}
.mpt{
  width: 100px;
  height: 100px;
  background:$col;
  .children{
     @extend .all;/*/   继承 */
     background:$chi;     
  }
  /*编译后*/
     /*
		.children{
			 width: 50px;
 			 height: 50px;
 			 background:green;
		}
    */
  /*子嵌父*/
  .children2{
     @extend .all;
     background:$chi2;
     &:#{$move}{/*  插值语句*/
      transform: scale(2);
      background: #{$col2};
     }
  }
   /*编译后*/
     /*
		.children2{
			 width: 50px;
 			 height: 50px;
 			 background:black;
		}
		.children2：hover{
			   transform: scale(2);
    		   background:blue;
		}
    */
}
/*混合器使用*/
/*1 属性声明 （其实可以用 @extend 继承）*/
/*声明混合名*/
@mixin name{
   font: {
	  family: Arial;
	  size: 20px;
	  weight: bold;
	}
	color: #ff0000;
}
/*引用混合名*/
.name{
	@include name;
}
		
/*2 声明 函数类*/
/*声明混合名*/
@mixin name($n,$na:$val)/*$val=20px*/
   font: {
	  family: $n;
	  size: $na; /*没有传值就默认$val*/
	  weight: bold;
	}
	@if $name1=='Arial'{
		color: #ff0000;
    }
}
/*引用混合名*/
.name{
	@include  name（Arial，30px）; /*//没有传值就默认$val=20px*/
} 
			



/*声明函数 用法和js一样*/
@function num($num){
   @return $num
};
/*遍历    <list> 是具体的值*/  
 @for  $num  from 1 to 3{
  $hh:$num;/*1,2,3*/
 }
@each $animal in puma, seaSlug, egret, salamander {
  .#{$animal}-icon {  /* 通过 #{} 插值语句可以在选择器或属性名中使用变量*/
    background-image: url('/images/#{$animal}.png');
  }
}
     /*  编译后*/
 .puma-icon {
     background-image: url('/images/puma.png');
  }
 .seaSlug-icon {
     background-image: url('/images/sea-slug.png'); 
  }
 .egret-icon {
      background-image: url('/images/egret.png');
  }
  .salamander-icon {
       background-image: url('/images/salamander.png'); 
  }

更多推荐scss官网