Less学习笔记

Less

前言：维护CSS的弊端

CSS是一门非程序语言，没有变量，函数，SCOPE(作用域)等概念。

• CSS需要书写很多看似没有逻辑的代码，CSS代码冗余度比较高。
• CSS没有很好的计算能力。
• 不方便维护，不利于复用。
• 非前端开发工程师来讲，往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码项目。

1. Less 介绍

Less是一门CSS扩展语言，也称为CSS预处理器。
Less 作为CSS的一种扩展，他没有减少CSS的功能，并且在现有CSS的语法基础上，为CSS增加了程序式语言的特性。
Less 在 css 的基础上，引入 变量，mixin(混入),运算以及函数等功能，大大简化了CSS的编写，并且降低了CSS代码的维护成本。
正如其名，less 可以让我们用更少的代码做更多的事情。

Less中文网址：http://lesscss.cn/

常见的CSS预处理器：Sass , Less, Stylus

2.Less 使用

我们首先新建一个后缀为less的文件，在这个less文件里面书写less语句。

• Less变量
• Less编译
• Less嵌套
• Less运算

2.1 Less 变量

@变量名：值；

变量命名规范

• @为前缀
• 不能包含特殊字符
• 不能以数字开头
• 大小写敏感

2.2 Less 编译

本质上，Less包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译成对应的CSS文件。
所以我们需要把我们的less文件，编译成css文件，这样我们的html页面才能使用。

写好myless.less
保存，自动生成myless.css文件

2.3 Less 运算

任何 数字，颜色（没错，16进制颜色也可以）或者 变量 都可以参与运算。
Less 提供加 + 减 - 乘 * 除 / 算术运算.

/* Less 里面写 */
@width:10px + 5;
div {
	border:@width solid red;
}
/* 生成的css文件 */
div {
	border:15px solid red;
}
/* less 甚至可以这样写 */
width:(@width + 5) * 2;

注意:

• 运算符左右都有空格隔开
• 如果两个值之间只有一个值有符号，则运算结果就取该值
• 对于不同单位的值之间的运算，运算结果的值取第一个值的单位
• 十六进制颜色的运算：background-color: #666 - #444; /* #222 */
• 混合运算：height: (200px + 50px) * 2;

2.4 Less 嵌套

在css语法中，我们想实现嵌套的话，可以通过 子元素选择器 后代选择器 等实现。
那在Less中如何实现嵌套呢？
如下：

/* less 中的嵌套 */
/*  less中的嵌套 子元素直接写在 父元素里面  */
div{
  height: 100px;
  width: 100%;
  font-size: 14px;
  a{
    font-size: 12px;
  }
}

上面的less代码，经过编译后生成的css代码如下：

/* css中的嵌套 */
div {
  height: 100px;
  width: 100%;
  font-size: 14px;
}
/* css 中的嵌套 通过 后代选择器/子元素选择器。。。 */
div a {
  font-size: 12px;
}

也就是说，less中的嵌套：子元素在父元素的css代码块中书写。
需要注意的有：伪类、伪元素，交集选择器的嵌套语法。如下demo:

错误写法：

/* 注意 伪类/伪元素/交集选择器 在嵌套中的写法 */
/* 如果有 伪类/伪元素/交集选择器 在内层选择器前面要加 & 符号*/
div{
  /* some code... */
  a{
    color: red;
    :hover{
      /* 这样写并不能起效 */
      color: blue;
    }
  }
}

正确写法：

/* 注意 伪类/伪元素/交集选择器 在嵌套中的写法 */
/* 如果有 伪类/伪元素/交集选择器 在内层选择器前面要加 & 符号*/
div{
  /* some code... */
  a{
    color: red;
    &:hover{
      /* 正确写法 在hover前加 & 符号 */
      color: blue;
    }
  }
}