五分钟了解 Less 及使用

一、什么是Less预处

CSS预处理定义了一种新的语言;其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。

使用CSS预处理器语言，可以有让CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。

Less包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS文件，只有在被编译后才能够被浏览器识别使用

二、预处理编译工具Koala

koala是一个前端预处理器语言图形编译工具，支持LesS、SassCompass、CoffeeScript，帮助web开发者更高效地使用它们进行开发。跨平台运行，完美兼容windows、linux、mac。

这个工具会将less 转换输出成 css

官网地址：Koala - a gui application for LESS, Sass, Compass and CoffeeScript compilation.

基本介绍

设置中文

模板介绍

如何使用

添加项目

输出文件

注意事项

1、可以关闭自动保存功能

2、less文件名也不要和其他css重名

自动解析出来的css文件会以less 文件名字相同，如果重名那么生成的css文件就会重名

三、Less语法

本案例的html部分

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
  </head>

  <body>
    <div class="box">这是一段文字</div>
    <div class="wrap">
      <h3>title</h3>
      <div class="con">
        <h3>title</h3>
        <p>段落文本</p>
        <p>段落文本</p>
        <p>段落文本</p>
      </div>
      <p>段落
        <a href="#">文字</a>
      </p>
    </div>
  </body>

</html>

注释

less共有两种注释风格:

标准的CSS注释，多行注释 comment*/，会保留到编译后的文件。

单行注释// comment，只保留在less源文件中，编译后被省略。

//单行注释  不会出现在解析后的css文件后
/* 多行注释 会出现在解析后的css文件后 */

@import导入

@import "reset.css"

.css 后缀名不能省略，引入 .less 文件可以省略扩展名

/* 导入其他文件，这三种方式都是可以的 */
@import "./index.css";
@import url(./less.css);
@import url("./less.css");

变量

变量以@开头，变量名与变量值之间用[冒号]分隔如果变量需要镶嵌在字符串之中，就必须需要写在@{}之中

// 变量
// 定义
@coly:yellow;
@wi:width;
@bo:box;
// 使用——属性值
.box{
    background: @coly;
}
// 使用——属性名
.box{
    @{wi}:200px
}
.@{bo}{
    height: 200px;
}

混合

将一个定义好的class A引入到另一个class B中
混入参数但未设置默认值
混入参数并且设置了默认值
使用@arguments来引用所有传入的变量

混入类名

// 混入类名—解析前
// 定义通用属性
.fo{
   /*  在解析后的css文件中 */
    color: blue;
}
.fo2(){
    /* 不在解析后的css文件中 */
    /* 但是这个里面的多行注释是可以看到的 */
    font-size: 30px
}
// 调用定义好的类
.box{
    .fo;
    .fo2;
}

// 混入类名—解析后
.fo {
  /*  在解析后的css文件中 */
  color: blue;
}
.box {
  /*  在解析后的css文件中 */
  color: blue;
  /* 不在解析后的css文件中 */
  /* 但是这个里面的多行注释是可以看到的 */
  font-size: 30px;
}

混入参数

// 混入参数—解析前
// 1、参数没有默认值，调用必须传入参数
.fo3(@radius) {
  border-radius: @radius;
}

.box {
  .fo3(20px)
}

// 2、参数设置默认值，调用如果传参；如果没有传参，使用默认参数值
.fo4(@bol: bold) {
  font-weight: @bol;
}
.box{
  .fo4;
  .fo4(normal)
}
// 3、使用 @arguments 引用所有传入参数
.bor(@bw,@bs,@bc){
  border: @arguments;
}
.bor2(@bwi:5px,@bst:solid,@bco:red){
  border: @arguments;
}
.box{
  .bor(10px,solid,#ccc);
  .bor2;
  .bor2(15px);
  .bor2(15px,dotted);
  .bor2(15px,dotted,lightblue);
}

// 混入参数—解析后
.box {
  border-radius: 20px;
}
.box {
  font-weight: bold;
  font-weight: normal;
}
.box {
  border: 10px solid #cccccc;
  border: 5px solid #ff0000;
  border: 15px solid #ff0000;
  border: 15px dotted #ff0000;
  border: 15px dotted #add8e6;
}

嵌套

选择器嵌套
在嵌套的代码块内，使用&引用父元素

// 选择器嵌套—解析前
.wrap{
  background: yellow;
  >h3{
    font-style: 40px;
  }
  .con {
    height: 300px;
    background: pink;
    h3{
      font-size: 30px;
    }
    p{
      font-size: 20px;
    }
  }
  >p{
    font-size: 20px;
    a{
      color: red;
      &:hover{
        color: blue;
      }
    }
  }
}

// 选择器嵌套—解析后
.wrap {
  background: yellow;
}
.wrap > h3 {
  font-style: 40px;
}
.wrap .con {
  height: 300px;
  background: pink;
}
.wrap .con h3 {
  font-size: 30px;
}
.wrap .con p {
  font-size: 20px;
}
.wrap > p {
  font-size: 20px;
}
.wrap > p a {
  color: red;
}
.wrap > p a:hover {
  color: blue;
}

继承

样式的继承通过extend伪类来实现

混合可以将一个定义好的class A引入到另一个class B中实现class B继承class A中的所有属性。这样编译原理是把代码copy一份过来，编译后的CSS中依然会存留大量的元余CSS代码，为了避免这一点，我们可以使用extend伪类来实现样式的继承使用。

// 继承—解析前
.fontSt{
  font-size: 40px;
  color: #000;
  font-weight: bold;
}
.wrap{
  >p{
    &:extend(.fontSt);
  }
}
.wrap>p:extend(.fontSt){
  font-style: italic;
}

// 继承—解析后
.fontSt,
.wrap > p,
.wrap > p {
  font-size: 40px;
  color: #000;
  font-weight: bold;
}
.wrap > p {
  font-style: italic;
}

运算

任何数字、颜色或者变量都可以参与运算;在运算中以()进行优先级计算;例如: calc()函数

// 运算—解析前
@bgc:#000;
.box{
  /* 颜色的计算原理是 先转换成rgb的格式，再给每个加上20 */
  /* 如：#000 =>rgb(0,0,0) +20 = rgb(20,20,20) => #141414 */
  background: @bgc+20;
  // 这个地方要注意要加个空格
  width: 200px + 20;
  width: calc(~"200px + 100px"); 
}

// 运算—解析后
.box {
  /* 颜色的计算原理是 先转换成rgb的格式，再给每个加上20 */
  /* 如：#000 =>rgb(0,0,0) +20 = rgb(20,20,20) => #141414 */
  background: #141414;
  width: 220px;
  width: calc(200px + 100px);
}