less详解

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;
}//css

extend语法

.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)) { ... }

条件判断方法

• 判断一个值的类型
  
  • iscolor
  • isnumber
  • isstring
  • iskeyword
  • isurl
• 判断一个值的单位
  
  • ispixel
  • ispercentage
  • isem
  • isunit

关联判断的混合

.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');
}