sass与less的简单基本总结

基本概览
sass和less主要区别: 在于实现方式 less是基于JavaScript的在客户端处理 所以安装的时候用npm，sass是基于ruby所以在服务器处理。
很多开发者不会选择LESS因为JavaScript引擎需要额外的时间来处理代码然后输出修改过的CSS到浏览器。

sass（预处理器）有两种不同的语法：

• Sass,一种缩进语法
• SCSS,一种 CSS-like 语法

Sass缩进语法，没有花括号，没有分号，具有严格的缩进 （更短并且更易于书写，clean和格式良好）。例：

	// Variable
	!primary-color= hotpink
	
	// Mixin
	=border-radius(!radius)
	    -webkit-border-radius= !radius
	    -moz-border-radius= !radius
	    border-radius= !radius
	
	.my-element
	    color= !primary-color
	    width= 100%
	    overflow= hidden
	
	.my-other-element
	    +border-radius(5px)

Scss类css拓展语法 （兼容css语法,语义化强） ：

// Variable
$primary-color: hotpink;

// Mixin
@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
}

.my-element {
    color: $primary-color;
    width: 100%;
    overflow: hidden;
}

.my-other-element {
    @include border-radius(5px);
}

1.拓展名

• less的文件拓展名是xxx.less
• sass的拓展名是xxx.scss(Sassy CSS)或xxx.sass(Indented Sass缩进格式)

2.变量

• sass中的变量以$开头，例：

    $width: 12rem;
    #main:{
    	width:$width;
    }
  

• less中的变量以@开头，例：

    @width:12rem;
    #main:{
    	width:@width;
    }
  

3.嵌套和父选择器&

• sass，例：

    .border{
     	border:1px solid #ccc;
    }
    .main-content{
    	font: {
    	    family: fantasy;
    	    size: 16px;
    	    weight: bold;
    	  }
    	&:hover{
    		background:blue;
    	}
    	&_navbar{
    		font-size:16px;
    	}
    	@extend .border；//继承子类
    }
  

• less,例：

    .border{
     	border:1px solid #ccc;
    }
    .main-content{
    	&:hover{
    		background:blue;
    	}
    	&_navbar{
    		font-size:16px;
    	}
    	&:extend(.border);//继承子类
    	.border;//继承子类
    }
  

4.sass的@mixin和less的mixin混合
less的mixin,例：

mixin的基本引用
.a,#b{
	color:green;
}
.mixin-class{
    .a();
}
.mixin-id {
  #b;
}
注：.a()和.a;作用一样；

---

.my-mixin{
    color: black;
}
.my-other-mixin(){
    background: wheat;
}
.class{
    .my-mixin;
    .my-other-mixin;
}
输出：
.my-mixin {
	color: black;
}
//此处并没有输出 .my-other-mixin
.class {
  color: black;
  background: wheat;
}
注：mixin加（）在生成的css中不输出

---

@arguments变量

.box-shadow(@x:0; @y:0; @blur:1px; @color:#000){
-webkit-box-shadow:@arguments;
       -moz-box-shadow:@arguments;
           -box-shadow:@arguments;
}
.big-block{
    .box-shadow(2px; 5px;)
}
输出：
.big-block {
  -webkit-box-shadow: 2px 5px 1px #000;
  -moz-box-shadow: 2px 5px 1px #000;
  -box-shadow: 2px 5px 1px #000;
}

---

@rest变量
.mixin(...) {        // 匹配0-N 个参数
.mixin() {           // 只匹配0个参数
.mixin(@a: 1) {      // 匹配0-1个参数
.mixin(@a: 1; ...) { // 匹配0-N个参数
.mixin(@a; ...) {    // 匹配1-N个参数

---

@switch模式匹配
.mixin(dark; @color) {
  color: darken(@color, 10%);
}
.mixin(light; @color) {
  color: lighten(@color, 10%);
}
.mixin(@_; @color) {
  display: block;
}

运行：
@switch: light;

.class {
  .mixin(@switch; #888);
}

结果输出：
.class {
  color: #a2a2a2;
  display: block;
}

sass的@mixin,例：

@mixin button {  
    font-size: 1em;  
    padding: 0.5em 1.0em;  
    text-decoration: none;  
    color: #fff;  
}
引用（@include）：
.button-green {  
    @include button; 
    background-color: green;  
}

---

多个参数：
@mixin button($background, $color) {  
    font-size: 1em;  
    padding: 0.5em 1.0em;  
    text-decoration: none;  
    color: $color;  
    background: $background;  
}

.button-green {  
    @include button(green, #fff);  
}

---

可变参数：
@mixin box-shadows($shadow...) {  
    box-shadow: $shadow;  
}

.container {  
    @include box-shadows(0px 1px 2px #333, 2px 3px 4px #ccc);  
}
编译完：
.container {  
    box-shadow: 0px 1px 2px #333,  
                2px 3px 4px #ccc;  
}

5.@import
sass,例：

局部文件导入，局部文件会被直接插入到css规则内导入它的地方
aside {
  background: blue;
  color: white;
}
导入：
.blue-theme {@import "blue-theme"}
结果：
.blue-theme {
  aside {
    background: blue;
    color: #fff;
  }
}

---

导入.css   .sass    .scss文件（后缀名可省略）
@import "input.scss";
//或者
@import "input";
//多文件导入
@import "input.scss", "select.scss";

less,例:

--@import 可以根据文件扩展名不同而用不同的方式处理
如果文件是.css的扩展名，将处理为CSS和@import语句保持原样。
如果为其他的扩展名将处理为less导入。
如果没有扩展名，将会为他添加.less扩展名，作为less导入。
example:
@import "foo";      // foo.less 导入为less文件
@import "foo.less"; // foo.less 导入为less文件
@import "foo.php";  // foo.php  导入为less文件
@import "foo.css";  // 语句保持原样，导入为css文件

6.注释

1）多行注释
/* Hello, I'm a CSS-style comment */
.class { color: black }

2）单行注释（静默注释不会出现在编译完css中）
// Hi, I'm a silent comment, I won't show up in your CSS
.class { color: white }