前端less入门

目录

Less 是什么

注释

 变量

   1. 变量的使用

   2.变量插值

    3.延迟加载——先加载变量再赋值

嵌套规则

父选择器

混合(Mixin)

1.普通混合

2.带参数的混合

 3.命名参数

4.匹配模式

5.@arguments 变量

 运算

继承

避免编译

---

Less 快速入门 | Less.js 中文文档 - Less 中文网

• Less 是什么

Less(Leaner Style Sheets 精简样式表) 是一种动态样式语言，属于 css 预处理器的范畴，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展，Less 既可以在 客户端 上运行 ，也可以借助 Node.js 在服务端运行。

Less 编译工具：

Koala - a gui application for LESS, Sass, Compass and CoffeeScript compilation.

• 注释

• 多行注释保留会被保留在编译生成的 CSS 中
• 单行注释不会被保留在编译生成的 CSS 中

/* 
 * 多行注释
 * style comment! 
*/

// 单行注释
div {
  color: red;
}

•  变量

   1. 变量的使用

@ 声明变量，作为普通属性值使用

/*
less
*/
@width: 50px;
@height: 100px;

div {
  width: @width;
  height: @height;
}

   2.变量插值

变量用于选择器名、属性名、URL、@import语句

/*
less
*/
@my-selector: banner;

// 需要添加 {}
.@{my-selector} {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

/*
less
*/
@property: color;

.widget {
  @{property}: #0ee;
  background-@{property}: #999;
}

/*
less
*/
@images: '../img';

body {
  color: #444;
  background: url('@{images}/white-sand.png');
}

@themes: '../../src/themes';

@import '@{themes}/tidal-wave.less';

    3.延迟加载——先加载变量再赋值

当一个变量被声明多次，会取最后一次的值，并由内而外，先寻找作用域内的变量，如果没有在寻找作用域外的变量。

/*
编译前的less
*/
@var: 0;
.class {
  @var: 1;
  .brass {
    @var: 2;
    three: @var;
    @var: 3;
  }
  one: @var;
}

/*
编译后的css
*/
.class {
  one: 1;
}
.class .brass {
  three: 3;
}

• 嵌套规则

/*
编译前的less
*/
#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

/*
编译后的css
*/
#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

• 父选择器

在嵌套规则中， & 表示父选择器

/*
编译前的less
*/
.header {
  a {
    color: blue;
    &:hover {
      color: green;
    }
  }
}

/*
编译后的css
*/
.header a {
  color: blue;
}
.header a:hover {
  color: green;
}

如果没有 &，会被编译成后代选择器 a :hover 而不是 a:hover 注意空格开了

除此之外，& 还能用于生成重复类名：

/*
编译前的less
*/
.button {
  &-ok {
    background-image: url('ok.png');
  }

  &-custom {
    background-image: url('custom.png');
  }
}

/*
编译后的css
*/
.button-ok {
  background-image: url('ok.png');
}

.button-custom {
  background-image: url('custom.png');
}

• 混合(Mixin)

混合(Mixin)是一种将一组属性从一个规则集包含(或混入)到另一个规则集的方式，可理解为函数或者方法

1.普通混合

/*
编译前的less
*/
.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

#menu a {
  color: #111;
  .bordered();
}

.post a {
  color: red;
  .bordered();
}

/*
编译后的css
*/
.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

#menu a {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

.post a {
  color: red;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

2.带参数的混合

带参数的混合要按顺序传递，不然会出错

/*
编译前的less
*/
.border(@width, @style, @color) {
  border: @width @style @color;
}
div {
  .border(1px, solid, #ccc);
}

/*
编译后的css
*/
div {
  border: 1px solid #ccc;
}

混合带参数并有默认值

/*
less
*/
.border(@width, @style, @color: #ccc) {
  border: @width @style @color;
}
div {
  .border(1px, solid);
}

// 会出错
.border(@width: 1px, @style, @color) {
  border: @width @style @color;
}
div {
  .border(solid, #ccc);
}

 3.命名参数

在向混合传实参时指定形参，实现不按顺序传入

/*
less
*/
.border(@width, @style, @color: #ccc) {
  border: @width @style @color;
}
div {
  .border(@style: solid,  @width: 100px);
}

4.匹配模式

• 相当于对函数的重写，根据参数匹配对应的混合
• 匹配模式并不是只会找最适合的一项进行匹配，所有合适的项都会匹配并生成效果

/*
编译前的less
*/
.mixin(dark, @color) {
  color: darken(@color, 10%);
}
.mixin(light, @color) {
  color: lighten(@color, 10%);
}
// @_ 表示匹配所有
.mixin(@_, @color) {
  display: block;
}

@switch: light;

.class {
  .mixin(@switch, #888);
}

/*
编译后的css
*/
.class {
  color: #a2a2a2;
  display: block;
}

5.@arguments 变量

@arguments 变量包含了传入的所有参数

/*
编译前的less
*/
.border_arg(@w:30px,@c:red,@xx:solid){
    border:@arguments;
}
 
.test_arguments{
    .border_arg();
}

/*
编译后的css
*/
.test_arguments{
    border:30px red solid;
}

•  运算

计算结果以操作数最左侧的单位类型为准

/*
less
*/
@conversion-1: 5cm + 10mm; // 6cm
@conversion-2: 2 - 3cm - 5mm; // -1.5cm
@conversion-3: 3.1 * 2cm; // 6.2cm
@conversion-4: 4px / 2; // 4px / 2

// conversion is impossible
@incompatible-units: 1cm - 1px; // 0.97354167cm

// example with variables
@base: 5%;
@filler: @base * 2; // 10%
@other: @base + @filler; // 15%

@color: #224488 / 2; // #112244
background-color: #112244 + #111; // #223355

• 继承

• 继承可让多个选择器应用同一组属性，最终编译为并集选择器
• 其性能比混合高，但灵活性比混合低

/*
编译前的less
*/
nav ul {
  &:extend(.inline);
  background: blue;
}
.inline {
  color: red;
}

/*
编译后的css
*/
nav ul {
  background: blue;
}
.inline,
nav ul {
  color: red;
}

加all继承所有的状态。

/*
编译前的less
*/
.test {
  color: orange;
}
.test {
  &:hover {
    color: green;
  }
}

.replacement:extend(.test all) {
    background-color:yellow;
}

/*
编译后的css
*/
.test,
.replacement {
  color: orange;
}
.test:hover,
.replacement:hover {
  color: green;
}

.replacement {
  background-color:yellow;
}

• 避免编译

通过加引号可以避免 Less 编译，直接把内容输出到 CSS 中

/*
编译前的less
*/
.banner .inline .header {
  width: '100px + 100px';
  height: 100px + 100px;
}

/*
编译后的css
*/
.banner .inline .header {
  width: '100px + 100px';
  height: 200px;
}