Less 入门
1.嵌套规则
less | css |
.container{ font-size: 25px; h1{ font-size: 25px; color:#E45456; } .myclass{ color:#E45456; p{ font-size: 25px; color:#3C7949; } } } | .container { font-size: 25px; } .container h1 { font-size: 25px; color: #E45456; } .container .myclass { color: #E45456; } .container .myclass p { font-size: 25px; color: #3C7949; } |
2.变量
| less | css |
用于属性值
1都以@开头 2对变量赋值@color: red; 3可对变量运算+-*/, 运算智能识别单位 | @my-size: 50px; .big{ height: @my-size*2; } .middle{ height: @my-size+30; } .small{ height: @my-size/2; } | .big{ height: 100px; } .middle{ height: 80px; } .small{ height: 40px; } |
用于选择器和属性名
| @part: banner; @key: color; .@{part}{ @{key}: red; } #header{ background-@{key}: #fff; } | .banner{ color: red; } #header{ background-color: #fff; } |
变量值为字符串时 | @base: "http://www.xxx.com" .article{ background-image: url("@{base}/article.png") } | .article{ background-image: url("http://www.xxx.com/article.png") } |
变量的作用域
1变量的作用域为包含它的花括号,花括号之外无效。 2子花括号内的变量会覆盖父花括号的定义。 | @my-width: 1px; .header{ width: @my-width; a{ @my-width: 10px; width: @my-width; } span{ width: @my-width; } } | .header{ width: 1px; } .header a{ width: 10px; } .header span{ width: 1px; } |
两个@
称为变量的变量 | @theme: #fff; @star: theme; .banner{ color: @@star; } | .banner{ color: #fff; } |
变量延迟加载
变量可以先使用在声明 | p { font-size: @a; color: #ca428b; } @a: @b; @b: 25px; | p { font-size: 25px; color: #ca428b; } |
3.继承
less使用伪类extend实现继承 | less | css |
格式一:
选择器:extend(选择器...){ ... } | .father{ background-color: red; } .mother{ color: black; } .son:extend(.father,.mother){ font-size: 20px; } | .father{ background-color: red; } .mother{ color: black; } .son{ font-size: 20px; background-color: red; color: black; } |
格式二:
选择器{ &:extend(选择器...); ... } 注:&表示自身 | .father{ background-color: red; } .mother{ color: black; } .son{ &:extend(.father,.mother); font-size: 20px; } | .father{ background-color: red; } .mother{ color: black; } .son{ font-size: 20px; background-color: red; color: black; } |
4.混合mixin
| less | css |
混合的定义与调用
任意样式都可当做混合的定义 混合的调用加不加()都可 | .aaa{ color: red; } .header{ .aaa; } .banner{ .aaa(); } | .aaa{ color: red; } .header{ color: red; } .banner{ color: red; } |
.aaa{ color: red; } .aaa{ font-size: 10px; } .header{ .aaa; } | .aaa{ color: red; font-size: 10px; } .header{ color: red; font-size: 10px; } | |
对定义加()
不让混合定义出现在css中 | .aaa(){ color: red; } .header{ .aaa ; } | .header{ color: red; } |
!important 关键字
!important 关键字用于覆盖特定属性。 当它在mixin调用之后放置时,它会将所有继承的 属性标记为!important。
| .aaa{ color: red; font-size: 10px; } .header{ .aaa ! important ; } | .aaa{ color: red; font-size: 10px; } .header{ color: red ! important ; font-size: 10px ! important ; } |
混合的嵌套
.xa{ .outer .inner; } .xb{ .outer .inner(); } .xc{ .outer > .inner; } .xd{ .outer > .inner(); } 效果相同,得到.inner | .outer{ font-size: 10px; .inner{ color: red; } } .xa{ .outer .inner; } .xb{ .outer .inner(); } .xc{ .outer > .inner; } .xd{ .outer > .inner(); } | .outer{ font-size: 10px; } .outer .inner{ color: red; } .xa{ color: red; } .xb{ color: red; } .xc{ color: red; } .xd{ color: red; } |
带参数的混合
带参数的混合定义不被保留在css中 | .border(@width;@style;@color){ border:@width@style@color; } .myheader { .border(2px;dashed; green); } | .myheader { border: 2px dashed green; } |
.mixin(@color; @padding: 2px) { color: @color; padding: @padding; } .class1 { .mixin(#FE9A2E); } .class2 { .mixin(red;5px); } .class3 { .mixin(5px;red); } .class4 { .mixin(@padding:5px;@color:red); } | .class1 { color: #FE9A2E; padding: 2px; } .class2 { color: red; padding: 5px; } .class3 { color: 5px; padding: red; } .class4 { color: red; padding: 5px; } | |
.box-shadow(@x:0;@y:0;@height: 3px; @width: 3px) { box-shadow: @arguments; } .myclass { .box-shadow(2px; 2px); } | .myclass { box-shadow: 2px 2px 3px 3px; } | |
.mixin(dark; @color) { color: darken(@color, 15%); } .mixin(light; @color) { color: lighten(@color, 15%); } @color-new: dark; .line { .mixin(@color-new; #FF0000); } | .myclass { color: #b30000; }
|
5.其他
| less | css |
转义 〜“some_text"中的任何内容将显示为some_text。 | p { color: ~"green"; } | p { color: green; } |
注释 可以使用块样式/**/和行内注释//, 但是当编译LESS代码时, 单行注释//不会显示在CSS文件中。 | /* the green color! */ .myclass{ color: green; } // the blue color .myclass1{ color: red; } | /* the green color! */ .myclass { color: green; } .myclass1 { color: red; } |
导入 | myfile.less文件: .myclass{ color: #FF8000; }
style.less文件: @import "myfile.less"; .myclass2{ color: #FF0000; } | 编译style.less文件 .myclass{ color: #FF8000; } .myclass2{ color: #FF0000; } |
6.函数