简单使用less

为了简化代码而采用的，CSS自带不兼容老浏览器，于是有了less

CSS变量和函数

/* define */
html{
	--varName:200px;
}
/* 使用 */
div{
	wdith:var(--varName);
    /* calc()函数负责计算*/
    height:calc(500px/2);
}

less

• less是css的增强版，写更少的代码实现更强大的样式
• 支持变量，mixins..
• 语法与css一致，但有许多扩展
• 浏览器无法直接执行less代码，需要转换工具将less to css
• 将代码模块化，方便维护与管理

基础语法

less源码（只是介绍一些基本的语法）

//变量声明
@a:100px;
@a: 200px;
@b: img;
@c: test;
//less行注释
/* less，css块注释，会编译到css文件内 */
div{
    /* 变量直接使用 */
    width: @a;
    /* 引用其他属性 */
    height: $width;
    /* 变量作为部分值的使用 */
    background-image: url("@{b}/1.png");
    /* div里的元素样式 */
    span{
        color: red;
    }
    /* &代表外层的父元素 */
    &:hover{
        color: blue;
    }
}
/* 变量作为类名的使用 */
.@{c}{
    width: @a;
}
/* 继承div的属性，自己也有独特的属性 */
.box:extend(div){
    background-color: #bbffaa;
}
/* mixin 混合 
    也就是直接对已有样式进行调用
*/
.box2{
    .test();
}
/* 创建mixins1,不会被编译 */
.my-mix(){
    border: 2px solid red;
}
/* 创建mixins2 */
.my-mix2(@var1,@var2){
    width: @var1;
    height: @var2;
}
/* 使用mixins2 */
.box3{
    .my-mix2(100px, 200px);
}

编译的css源码

/* less，css块注释，会编译到css文件内 */
div,
.box {
  /* 变量直接使用 */
  width: 200px;
  /* 引用其他属性 */
  height: 200px;
  /* 变量作为部分值的使用 */
  background-image: url("img/1.png");
  /* div里的元素样式 */
  /* &代表外层的父元素 */
}
div span {
  color: red;
}
div:hover {
  color: blue;
}
/* 变量作为类名的使用 */
.test {
  width: 200px;
}
/* 继承div的属性，自己也有独特的属性 */
.box {
  background-color: #bbffaa;
}
/* mixin 混合 
    也就是直接对已有样式进行调用
*/
.box2 {
  width: 200px;
}
/* 创建mixins1,不会被编译 */
/* 创建mixins2 */
/* 使用mixins2 */
.box3 {
  width: 100px;
  height: 200px;
}

此外，less里面的所有数据都可以进行运算

wdith: 200px +100px;

less还给我们提供了很多的函数

引入

• 相当与将别的less文件内容复制进来
• 优点就是将代码模块化，比如var.less文件管理变量，mixins.less管理函数..
• 方便后期维护管理

@import "lessFileName";

debug

因为在浏览器的开发工具里显示的都是css代码位置，所以需要使用less工具来帮助我们进行调试

• 更改less的json配置文件把sourceMap改为true即可
• 再次进入开发者工具显示的就是less代码位置