less笔记
变量
变量声明
@dark-red:#123344变量使用
.link {color :@dark-red}//作为参数使用@myName: yisayu //选择器名 @prop: color//属性 @url: “../img” .@{myName} { @{prop}: @dark-red backgroud: url(“@{url}/yisayu.png”) }变量懒加载,可以再后面声明变量
Extend扩展
使用方法
用于扩展某一选择css属性
nav ul { &:extend(.inline); background: blue; } .inline { color: red; }//less nav ul { background: blue; } .inline, nav ul { color: red; }//cssextend语法
.b { color: red } .a:extend(.b) {} // 两种写法相同 .a { &:extend(.b); } .a:extend(.b all) { //加了all修饰词 .x.b .b.h 的属性也会加进来 } .a:extend (.b, .c) { //继承多个选择器 }选择器嵌套
.bucket { tr { color: blue; } } .bucket { tr &{ //加了tr 讲tr套在.bucket外面 color: blue; } } //上面代码等于 tr .bucket { color: blue; }nth匹配
:nth-child(n+3) { color: blue; } .child:extend(n+3) {}属性匹配
[title=identifier] { color: blue; } [title='identifier'] { color: blue; } [title="identifier"] { color: blue; } .noQuote:extend([title=identifier]) {} .singleQuote:extend([title='identifier']) {} .doubleQuote:extend([title="identifier"]) {} //结果都相同all关键字用法
.a.b.test, .test.c { color: orange; } .test { &:hover { color: green; } } .replacement:extend(.test all) {} //匹配所有test相关联的选择器 //给当前选择器 添加hover .a.b.test, .test.c, .a.b.replacement, .replacement.c { color: orange; } .test:hover, .replacement:hover { color: green; }extend不能匹配 less变量为名字的选择器
@variable: .bucket; @{variable} { // interpolated selector color: blue; } .some-class:extend(.bucket) {} //报错 .bucket { color: blue; } .some-class:extend(@{variable}) {} // 无法匹配 @variable: .bucket;@media媒体查询
媒体查询只能扩展自己作用域内的属性,嵌套的也不行媒体查询外的选择器能扩展所有媒体查询内的选择器
@media screen { .selector { color: blue; } .screenClass:extend(.selector) {} //不能匹配内部嵌套的选择器 @media (min-width: 1023px) { .selector { color: blue; } } }
.topLevel:extend(.selector) {} /* 能匹配所有的选择器 */
Mixin
基本用法
用法
.a, #b { color: red; } .mixin-class { .a; } .mixin-id { #b(); } //括号可选可不选需要一个mixin本身不加载 加上括号
.my-mixin { color: black; } .my-other-mixin() { background: white; } .class { .my-mixin; .my-other-mixin; } //css .my-mixin { color: black; } .class { color: black; background: white; }带参数Mixin
用法
通过向Mixin传参的方式,能个性化的使用Mixin
.border-radius(@radius:5px) {//添加默认值 ,如果没有传参为默认值 -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } #header { .border-radius(4px); } .button { .border-radius(6px); }//类似于函数传参带多个参数的Mixin
多个参数可用逗号或分号分隔(推荐用分号,用去区分逗号分隔的列表 类似)
.name(1, 2, 3; something, else) .name(1, 2, 3)当传入参数少于无默认值的参数时 ,该mixin会被忽略,否则都会加载
.mixin(@color) { color-1: @color; } .mixin(@color; @padding:2) { color-2: @color; padding-2: @padding; } .mixin(@color; @padding; @margin: 2) { color-3: @color; padding-3: @padding; margin: @margin @margin @margin @margin; } .some .selector div { .mixin(#008000); } //css加载 .some .selector div { color-1: #008000; color-2: #008000; padding-2: 2; }传命名参数(不受位置限制)
.mixin(@color: black; @margin: 10px; @padding: 20px) { color: @color; margin: @margin; padding: @padding; } .class1 { .mixin(@margin: 20px; @color: #33acfe); } .class2 { .mixin(#efca44; @padding: 40px); }@arguments关键字
.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) { -webkit-box-shadow: @arguments; -moz-box-shadow: @arguments; box-shadow: @arguments; } .big-block { .box-shadow(2px; 5px); }使用@rest解构
.mixin(...) { // matches 0-N arguments .mixin() { // matches exactly 0 arguments .mixin(@a: 1) { // matches 0-1 arguments .mixin(@a: 1; ...) { // matches 0-N arguments .mixin(@a; ...) { // matches 1-N arguments模式匹配
.mixin(dark; @color) {//第一个参数预计为dark color: darken(@color, 10%); } .mixin(light; @color) {//第一个参数预计为light color: lighten(@color, 10%); } .mixin(@_; @color) {//第一个参数无预计参数 display: block; } @switch: light; .class { .mixin(@switch; #888);//只能匹配第二个和第三个混合 }作为函数使用Mixin
所有在Mixin内部定义的变量 都可以在调用者作用域使用
.mixin() { @width: 100%; @height: 200px; } .caller { .mixin(); width: @width; height: @height; }函数一样使用Mixin
.average(@x, @y) { @average: ((@x + @y) / 2); } div { .average(16px, 50px); // "call" the mixin padding: @average; // use its "return" value }导入less
less中可以在任何位置中导入 css中必须在开头导入
.foo { background: #900; } @import "this-is-valid.less";按选项导入
用法
语法:@import (keyword) “filename”;
reference:使用less文件 但不输出inline: 输出less文件内容,但是不进行处理less: 不管后缀名是什么,都当做less文件css: 不管后缀名是什么,都当做css文件once: 该文件只导入一次（这是默认行为）multiple: 可多次导入文件Mixin Guards 过滤条件
.mixin (@a) when (lightness(@a) >= 50%) { //>, <, >=, <=, = 所有符号列表 不用== background-color: black; } .mixin (@a) when (lightness(@a) < 50%) { background-color: white; } .mixin (@a) { color: @a; }多个条件
.mixin (@a) when (@a > 10), (@a < -10) { ... }类型条件判断
.mixin (@a; @b: 0) when (isnumber(@b)) { ... } .mixin (@a; @b: black) when (iscolor(@b)) { ... }条件判断方法
判断一个值的类型 iscolorisnumberisstringiskeywordisurl判断一个值的单位 ispixelispercentageisemisunit关联判断的混合
.mixin (@a) when (@a > 0) { ... } .mixin (@a) when (default()) { ... } // 第一条不成立才匹配 类似if...else....mixin (@a) when (isnumber(@a)) and (@a > 0) { … }//且判断
.mixin (@b) when not (@b > 0) { … }//非判断
css的判断
用法
button when (@my-option = true) { color: white; }用判断对选择器分组
& when (@my-option = true) { button { color: white; } a { color: blue; } }循环
用法(利用判断语句和嵌套来实现循环)
.loop(@counter) when (@counter > 0) { .loop((@counter - 1)); // next iteration width: (10px * @counter); // code for each iteration } div { .loop(5); // launch the loop }合并
用法(通过在属性后面+来合并属性)
.mixin() { box-shadow+: inset 0 0 10px #555; } .myclass { .mixin(); box-shadow+: 0 0 20px black; } //css加载 .myclass { box-shadow: inset 0 0 10px #555, 0 0 20px black; }父选择器
给选择器添加伪类
a { color: blue; &:hover { color: green; } } //css加载 a { color: blue; } a:hover { color: green; }修改选择器名字
.button { &-ok { background-image: url("ok.png"); } &-cancel { background-image: url("cancel.png"); } &-custom { background-image: url("custom.png"); } } //css加载 .button-ok { background-image: url("ok.png"); } .button-cancel { background-image: url("cancel.png"); } .button-custom { background-image: url("custom.png"); }多次使用&
.link { & + & { color: red; } & & { color: green; } && { color: blue; } &, &ish { color: cyan; } } //css加载 .link + .link { color: red; } .link .link { color: green; } .link.link { color: blue; } .link, .linkish { color: cyan; }&表示所有的父类选择器 而不是最近的
.grand { .parent { & > & { color: red; } & & { color: green; } && { color: blue; } &, &ish { color: cyan; } } } //css加载 .grand .parent > .grand .parent { color: red; } .grand .parent .grand .parent { color: green; } .grand .parent.grand .parent { color: blue; } .grand .parent, .grand .parentish { color: cyan; }改变选择器的嵌套顺序
.header { .menu { border-radius: 5px; .no-borderradius & { background-image: url('images/button-background.png'); } } } //css加载 .header .menu { border-radius: 5px; } .no-borderradius .header .menu { background-image: url('images/button-background.png'); }