Sass和Less的区别

一、sass与less的区别：

1.实现方式：
Less是基于JavaScript，是在客户端处理的
Sass是基于Ruby的，是在服务器端处理的

2.变量：
Less: @
Sass: $

3.Sass比Less扩展语法多

二、less

1.变量：@name

2.混合：定义.class{} 、 使用 .class()

3.嵌套：.class{.class{}}

4.注释：/***/ , //

5.calc：计算

6.导入：@import “url”

7.maps对象:

      #colors() {
         primary: blue;
         secondary: green;
       }

      .button {
         color: #colors[primary];
         border: 1px solid #colors[secondary];
       }

8.&引用：

	.class{
            color:#333;
            &:hover{...}
		  }

三、Sass

1.变量: $name

2.> + ~ : 直接子元素、紧跟同级元素、所有同级元素

3.局部css：.blue-theme {@import “blue-theme”} // _blue-theme.scss

4.静默注释：属性结尾

   1、// 这是注释   （不会生成在.css文件中）
   2、/* 这是注释 */（会生成在.css文件中）

5.@mixin: 混合器 @include name 提取混合内容

    接受传参：@mixin link-colors($normal, $hover, $visited) {
				  color: $normal;
				  &:hover { color: $hover; }
				  &:visited { color: $visited; }
				}
				
	顺序传参：a {	
				  @include link-colors(blue, red, green);
				}
				
    指定传参：a {
					@include link-colors(
					  $normal: blue,
					  $visited: green,
					  $hover: red
				  )
				}				
								
传递样式片段：@mixin button {  
					font-size: 1em;  
					padding: 0.5em 1.0em;  
					text-decoration: none;  
					color: #fff;  
					@content;  
				}

				.button-green {  
					@include button {  
						background: green  
					}
				}

6.@extend： 当样式和选择器之间的关系在某些方面比较紧密的时候，使用@extend。除此之外，你可以使用@mixin在任何地方

			.error {
			  border: 1px solid red;
			  background-color: #fdd;
			}
			.seriousError {
			  @extend .error;
			  border-width: 3px;
			}