less 什么是less 怎么使用less

别帅

2023-12-01

什么是less？

作为一个前端开发，写css样式是再平常不过的事情了，有时候，多个元素的样式是一样的，但是我们还是会把这些样式重新写一遍，要不就是键盘三剑客 CTRL + C，CTRL + A，CTRL + V，真是苦了比程序猿，现在，我们不用再那么傻了，我们给css加点猛料。less是一个兼容css的拓展语言。
因为 Less 和 CSS 非常像，因此很容易学习。而且 Less 仅对 CSS 语言增加了少许方便的扩展，这就是 Less 如此易学的原因之一。

Less 到底为 CSS 添加了什么功能？以下就是这些新加功能的概览。

变量（Variables）

说到变量，在座的大佬肯定会想到 js，没错。无需多说，看代码一目了然。

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}

编译成css就是这样的

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

是不是特别简单啊弟弟们浪，甭着急，接着往下看。

混合（Mixins）

什么是混合，混合就是比如我们有一个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;
}

嵌套（Nesting）

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;
    }
}

这样看起来是不是更有逼格了，一看就是文艺程序猿

说起文艺，给大家讲一个只有程序猿才能看笑的段子:
文艺程序员写代码追求让别人看懂，普通程序员追求让自己看懂，2B程序员则追求让编译器能看懂;半年后看自己当初写的代码，文艺程序员不知道是自己写的但很容易看懂，普通程序员知道是自己写的但是不太容易看懂，2B程序员埋头看了半天后拍着桌子吼到：“这是哪个SB写的程序!”

运算（Operations）

less中支持运算，对，就是加减乘除


@width: 5px + 5px;  // 结果为10px
@height: 2px * 2px; // 结果为4px

@public: 5%;
@public1: @public * 2; // 结果为10%
@public2: @public * @public1; //结果为50%

函数（Function）

他和js中的函数方法是一样的，比如一些公共的样式，我们可以封装成一个函数，可以传值，动态改变一些颜色，像素等

@color: red;
.box(@color){
    background: @color
}

.box1{
    .box('blue');
    text-align: center
}

less 的用法

安装（node环境）

npm i less --save-dev

服务器端

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" ></script>

只需要引入css，js即可，但是，切记不要再上产环境使用这种方式，这种方式只建议学习使用。但是平常做项目我们想使用less，但是发布上线的时候怎么办呢，别着急，打开外行看着像黑客一样牛逼的cmd。

打开cmd，进入到当前less文件夹，输入指令 lessc index.less index.css 。记住，一定是lessc 不是 less 。index.less是你的less文件，index.css是你要编译成的css文件，文件名随便写，编译过后会在文件夹生成一个index.css的文件，这个文件就是普通的css文件，项目中直接引入这个index.css文件就OK了。