less详解

拥抱前端开发的未来，掌握Less的魔力！在我们精心撰写的博客文章中，你将发现如何通过学习Less这一强大的CSS预处理器，以更高效、更可维护的方式编写样式代码。无论你是初学者还是经验丰富的开发者，我们的指南将带你逐步了解Less的核心概念和语法。通过实际示例和深入解析，你将从中汲取灵感，提升你的前端技能。加入我们的学习社区，与同行分享知识，一同探索创新、时尚而富有表现力的前端设计世界！ 

简介

官网

https://less.bootcss.com/

搭建

安装node.js

安装Less

注意：安装不了直接win+x在管理员的终端窗口安装

cnpm install -g less

lessc -v

        

编译

命令行编译
终端命令：

lessc style.less style.css

直接使用【在服务器运行情况下】
在项目中引入Less文件与解析Less的js文件

<link rel="stylesheet/less" type="text/css" href="style.less"/>
<script src="https://cdn.jsdelivr.net/npm/less@4"></script>

下载服务器：

cnpm install -g http-server

运行服务器：

http-server

基础

作用域、注释、导入

注释
块注释和行注释都可以使用

/* 一个块注释
* style comment! */
@var: red;

 

// 这一行被注释掉了！
@var: white;

导入
使用sass的@import规则并不需要指明被导入文件的全名。你可以省略.less或.less文件后缀

@import "library"; // library.less
@import "typo.css";

作用域
Less 中的作用域与 CSS 中的作用域非常类似。首先在本地查找变量和混合，如果找不到，则从“父”级作用域继承
与 CSS 自定义属性一样，混合（mixin）和变量的定义不必在引用之前事先定义

嵌套

基础使用

#header {
color: black;

.logo {
width: 300px;
}
}

:hover伪选择器使用
&表示当前选择器的父级

.box{
width: 100px;
height: 100px;
background-color: gray;
&:hover{
background-color: red;
}
}          

          

变量

声明变量

@width: 1200px;
.container {
width: @width;
}

变量可以先使用在声明

.container {
width: @width;
}
@width: 1200px;

选择器使用变量

@my-selector: banner;
.@{my-selector} {
font-weight: bold;
}

url地址使用变量

@images: "../img";
body {
color: #444;
background: url("@{images}/hello.png");
}

属性当作变量

使用$prop语法可以很容易地将属性当作变量来处理
.widget {
color: #efefef;
background-color: $color;
margin: 15px;
}          
        

混合

简介
将一个类的属性用于另一个类

.p1 {
color: red;
}
.p2 {
background: #64d9c0;
.p1();
}
.p3 {
background: #DAA520;
.p1;
}

混合添加括号
如果你想创建一个混合，但是你不希望这个混合出现在你的CSS中，在混合定义后面加圆括号

/**不会有效果**/
.my-other-mixin() {
background: white;
}
.class {
.my-other-mixin();
}

混合中使用!important
在混合调用后使用!important关键字将它继承的所有属性标记为!important

.foo (@bg: #f5f5f5; @color: #900) {
background: @bg;
color: @color;
}
.important {
.foo() !important;
}

带参数的混合
混合也可以接受参数，这些参数是混合时传递给选择器块的变量

.border-radius(@radius,@color:red) {
border-radius: @radius;
color: @color
}
#header {
.border-radius(4px,blue);
}
.button {
.border-radius(6px);
}          

运算

加法

@fontSize: 10px;

.myclass {
font-size: @fontSize + 10;
color: green;
}

减法

@fontSize: 10px;

.myclass {
font-size: @fontSize - 5;
color: green;
}

乘法

@fontSize: 10px;

.myclass {
font-size: @fontSize * 2;
color: green;
}

除法【添加括号】

@fontSize: 10px;

.myclass {
font-size: (@fontSize / 2);
color: green;
}
        

进阶

转义

简介
允许你使用任意字符串作为属性或变量值
任何 ~"anything" 形式的内容都将按原样输出

示例

@min768: ~"(min-width: 768px)";
.element {
@media @min768 {
font-size: 1.2rem;
}
}          

函数

percentage 将数值转换为百分比

@width: 0.5;
.class {
width: percentage(@width); // returns `50%`
}

ceil 向上取整

.nav{
width: ceil(199.5); // 200
}

floor 向下取整

.nav{
width: ceil(199.5); // 199
}