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 目录下
