十分钟学会SASS和LESS语法

SASS语法要点

注释效果：
//单行注释不会被编译出来
/**/多行注释会被编译出来

插值语法：
$key:margin;
.box{
	#{$key}:auto;  //井号
}

作用域原则：就下(近)原则
$number:123px;
.box3{
  height:$number  
  
  $number:456px; //变量声明不会提升
  width:$number; //就近原则
}  	 	 	
结果是
height:123px;
width:456px;

选择器嵌套规则

ul{
  list-style:none;
  li{
    float:left;
    div{margin:10px;}
    p{margin:20px;}
  }
  &hover{  //如果直接用 :hover会有空格
    color:red;
    font:{  //拓展写开
			family:arial;
			size:10px;
			weight:bold;
		}
  }
}

运算规则：

$num:100px;
.box{
  width:$num * 3;
  height:$num +10px;


**在sass当中运算的单位值不相同会报错
不会自动转化单位**


默认不会对 / 斜线进行运算操作

font: 20px / 1.5;   //默认不会转义

padding: （20px / 1.5）  //加了括号会变成运算 （13.33333px）加括号

}

内置函数规则

.box5{
	width:round(3.4px)   ->3px
	height:percentage(0.2) ->20%
	margin:random();
}

自定义函数规则

@function sum($n,$m){
	@return $n+$m
}

混入样式规则

@mixin show{
	display:block;
}      //不会渲染到页面上只是作为混入

@mixin hide($color){
	display:none;
	color：$color;
}

.box6{
	width:100px;
	@include show;  //直接调用
	@include hide(blue);   //这样不会单独生成样式只是做到混入
}

****

.line{
	display:inline;  //这样写会多一条样式
}

%line{
	display:inline;  //这样写就不会生成.line样式
}

.box7{
	@extend .line; //只有引入时才会自动解析为下方样式
    			   //继承.line选择器下所有样式
}

.line,.box7{
	display:inline;
}

条件写法规则


$count:5;
.box11{
	@if($count > 4){
		width:100px +$count
	} 
}

循环语句规则

循环语句
@for  $i  from  0 through 2{
	.box-#{$i}{
		width:100px + $i;
	}
}

导入规则

@import   “./reset.css";

LESS语法要点

注释规则

//单行注释不会被编译出来
/**/多行注释会被编译出来

插值规则：

插值
@key:margin;
.box{
	@{key}:auto;       //类似解构
}

作用域规则


.box3{
	@number:456px;
	width:@number; //就近原则
}

选择器嵌套规则

ul{
	list-style:none;
	li{
		float:left;
		div{margin:10px;}
		p{margin:20px;}
	}
	&hover{
		color:red;
	}
}

运算规则

@num:100px;
.box{
  width:@num * 3;
  height:@num +10px;
//两个数值相加如果单位不同以第一个单位为准

  font: 20px / 1.5;   //智能转义

  padding:~"20px / 1.5"   //会转义（手动转义）

  color：#010203  * 2；
}

内置函数规则

.box5{
	width:round(3.4px)   ->3px
	height:percentage(0.2) ->20%
}

混入样式规则

混入样式
.show{
	display:block;
}

.hide(@color){
	display:none;
	color：@color
}

.box6{
	width:100px;
	.show;
	.hide(blue);   //这样不会单独生成样式只是做到混入
}

命名空间规则(less专有)


#nm(){
	.show{display:inline-block}
}

.box7{
	#nm.show; 
}

继承和合并规则


继承
.line{
	display:inline;   
}

.box7{
	&:extend(.line)
}

合并
.box9{
	background+:url(a.png);
	background+:url(b.png);
}

条件写法



@count:5;
.get(@cn) when(@cn >4){
	width:100px +@cn;
}

.box1{
	.get(@count)
}

循环写法：


@count :0;


.get(@cn)  when (@cn <3){
	.get((@cn+1))
	.box-@{cn}{
		width:100px +@cn
	}
}

.get(@count2)

导入规则

@import './reset.less'

对比之处

1.Sass的安装需要安装Ruby环境，Less基于JavaScript
//在vscode安装easy less 和 sass 插件可以自动将.less和 .scss自动转换为 .css文件

2.sass有变量和作用域，变量有全局和局部之分，并且有优先级


3.sass有函数的概念；
- @function和@return以及函数参数（还有不定参）可以让你像js开发那样封装你想要的逻辑。
-@mixin类似function但缺少像function的编程逻辑，提高css代码段的复用性和模块化


4.sass可以进行进程控制：
-条件：@if @else；
-循环遍历：@for @each @while
-继承：@extend
-引用：@import

Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持。



5.Less与Sass处理机制不一样
前者是通过客户端处理的，后者是通过服务端处理，相比较之下前者解析会比后者慢一点


6.编写变量的方式
Sass使用$，而Less使用@。


7..输出设置
Less没有输出设置
Sass提供4中输出选项：nested, compact, compressed 和 expanded。
输出样式的风格可以有四种选择，默认为nested
-nested：嵌套缩进的css代码
-expanded：展开的多行css代码
-compact：简洁格式的css代码
-compressed：压缩后的css代码