less和scss

Less基本知识

注释

1.//这样的的注释不会被解析到css文件
2./**/这样的注释 会被解析到css文件
	1./**/ 静默注释写在不该出现的地方 比如 属性中间 解析的时候会被抛弃掉 [less 和 sass 都可以]

基础知识

变量

less

1.@color:pink {background-color:@color}
2.如果把 选择器 和 属性作为变量 则引用加 {}
	1.@m:margin @selectId:#myid
	@{selectId}{@{m}:0 auto}
3.延迟加载 @var:0;.myclass{@var:2;three:@var;@var:3}
	1.在 three 的地方 @var 为 3 因为它会等到 @var:3 赋值完成后 延迟加载

sass

1.$border-color:red; 空格分割可以写多个数 $border:2px solid red; 这个 less也是可以的
2.和less一样 都具有 变量 作用域
3.和less一样 都可以作为 属性名 或 属性值 的一部分
4.和less一样 div.out{div{//表示后代属性} + div{//表示相邻} ~{//表示兄弟}} 也就是说嵌套不完全是 父子后代关系 也可以平级
4.和less不同的地方
	1.变量定义符号 $ less 用@
	2.sass 模糊了变量中的 - 和 _ 定义和使用 可以互换 less 不行
	3.sass 可以把 .div + {div{}} 等效于 .div{+ div{}} less 只能写在内部 外部无效 [less 写在外部 忽略掉了]
	4.sass 支持 .div{border:{width:10px;style:dotted;color:red}} less 不行
	5.@import url() sass 可以省略文件名后缀  less不可以

嵌套规则

less

1..father{.son{} &:hover
	1.这里 & 代表 .father 相当于 .father:hover
2.混合 mixin
	1.就是提取一部分公共代码 放入一个类中 .hunhe{width:10px} #outer{.div1{.hunhe} .div2{.hunhe}}
		1. .hunhe 会把这个混合解析到css中去[普通混合]
		2. .hunhe() 不会解析到 css中去 mixin 带参数混合 带默认数值混合
		3. .hunhe(@w,@h=10px,@c:pink){width:@w;height:@h} .div{.hunhe(10px) //有默认数值 所以可以传一个参数}
		4.命名传参混合 .hunhe(@w,@h=10px,@c:pink){width:@w;height:@h} .div{.hunhe(@c:black)
		5.匹配模式 .trangle(@_,@w,@c){width:0;height:0;} 编写工具库 库名 trangle.less
			1..trangle(U,@w,@c){border-width:@w;border-style:solid dashed dashed dashed;border-color:@c trans trans trnas}
			1..trangle(D,@w,@c){border-width:@w;border-style:dashed dashed soliddashed;border-color:trans trans @c trnas}
			3.当调用 @import "./.less" #div{.trangle(U,40px,pink)}
		6.混合守卫 mixin gardon
			1. .mix-gardon(@fs:10px){font-size:@fs} //首先定义一个普通的 混合函数
			2. .mix-gardon(@fs) when(@fs > 20) {color:red}
			3. .mix-gardon(@fs) when(@fs = 20) {color:blue}
				1.注意这里没有赋值  就是 = 比较  赋值是:  用 == 反而报错
			4. .mix-gardon(@fs) when(@fs < 20) {color:green}
			5.定义了三个 混合守卫 如果 传的参数 满足上面的条件 就给它 加上适当的 属性
			6. > < >= <= = and not or
				1..mix-gardon(@fs,@c) when(@fs > 20) and (@c = "red") {border:1ps solid blue}
				2.并且必须传参 指望默认数值是 不会触发守卫的
		6.arguments .box(@a,@b,@c){border:@arguments} #div{.box(1px,solid,red)}

sass

1.混合
	1.定义混合 @mixin abc{border:3px dashed blue;} //引入 @include abc; 不带引号
	2.混合可以带css结构 .no-bullet{list-style:none; li{line-height:30px;height:30px;}}
		1.引用后 自己会解析结构到对应的位置 less sass 都可以

继承

less

1. .in{&:extend(.juzhong all);width:100px} //加上 all 所有的都继承 包括 .juzhong:hover{}
	1.可以继承多个类 .in{&:extend(.juzhong all,.maxin all)}
2.继承 .juzhong 不能是函数

sass

1.对于sass 混合需要用 @mixin 定义 但是 继承 用 .juzhong{} 使用的时候 @extend .juzhong [注意这里有.]

命名空间

1. .zs{.juzhong(){width:100px;top:0 ...}} 定义完毕的后 调用的时候 .zs>.juzhong()

计算

0. + - * /
1.width:(100 + 100px) 必须有一个带单位
2.原封不动的给我放入css 不要自作聪明的去计算 放弃编译
	1. ~"calc(100px - 50)"

杂项

关于 @import

1.@import url("") // Es6 的 引入的文件 会发生 http 请求
2.对于 less 和 sass @import "" 不用url 在编译的时候直接就导入到主 css文件了 不会发生额外的 http 请求
3.嵌套导入
	1.在 .div1{color:red;@import "tmp.scss"} tmp.css 内容如下 + div{border:$border;font-size:16px}
		1.等价于 .div{color:red; +div{border:$border;font-size:16px}} 也就是把文件 复制粘贴进来
	2.less sass 都支持
4.可以一次性导入多文件 @import "a.scss","b.scss" [sass 支持 less 不支持]

.sass 和 .scss 的区别

1. scss 的 写法和less 很像  sass 没有{} 没有; 有递进层级关系

常见网址

1.less编译css工具
	1. http://www.koala-app.com
		1.考拉会自动解析到 同级目录下 css/ 下面 同步编译
		2.编译 scss 文件 会自动编译到 当前 css 目录下