less的三种基础用法

less的三种基础用法

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。

本文主要介绍less文件如何转化为css文件。

1.首先，你要确认你的电脑已经安装了vsCode。

2然后，在vsCode里面安装一个easy Less插件。

3创建less文件，保存之后会有一个对应的css文件，最终引入css文件就可以了。

less语法

变量

@width: 10px;
@height: @width + 10px;
#header {
  width: @width;
  height: @height;
}

编译成css是这样的：

#header{
    width: 10px;
    height: 20px;
}

混合

什么是混合，混合就是比如我们有一个box2的盒子，想用box1盒子的样式，我们不想再重新写一遍，可以看下面代码:

.box1 {
  width: 100px;
  height: 100px;
  background: 'red';
  border: 1px solid #f2f2f2
}

.box2{
    .box1;
    margin: 10px;
}

编译成css是这样的：

.box2{
    width: 100px;
    height: 100px;
    background: red;
    border: 1px solid #f2f2f2;
    margin: 10px;
}

嵌套

Less 提供了使用嵌套代替了我们类名拼接很长的问题。假设我们有以下 CSS 代码：

.header {
  color: black;
}
.header .nav {
  font-size: 12px;
}
.header .logo {
  width: 300px;
}

在less中我们这样写

.header{
    color: black;
    .nav{
        font-size: 12px;
    }
    .logo{
        width: 300px;
    }
}

除了嵌套，还可以在嵌套中使用伪类选择器

p{
    display: block;
    zoom: 1;
    &:after{
        content: ' ';
        display: block;
        font-size: 1px;
        height: 10px;
        clear: both;
        visibility: hidden;
    }
}