CSS之less的介绍

神秘人一号

2022-10-24 49 阅读5分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第20天，点击查看活动详情

CSS的弊端

Css是一门非程序式语言，没有变量、函数、作用域等概念

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

Less 介绍

Less：就是一门CSS预处理语言，它扩展了CSS的动态特性，使CSS具备一定的逻辑性、计算能力

注意：浏览器不识别less代码，目前阶段，网页要引入对应的css文件（后期项目阶段有更简单的方法）

我们可以使用less运算写法完成px单位到rem单位的换算

Less的使用

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

css里能写的样式，less里也都能写，但是 less比css更强大

Less编译

本质上，less包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，变异生成对应的CSS文件

所以，我们需要把我们的less文件，编译生成为CSS文件，这样我们的HTML页面才能使用

解决方案：

这个插件的作用：less文件保存自动生成CSS文件，只要一保存Less文件，他就会自动生成CSS文件，然后将生成的CSS文件引入到页面中就可以用

需要维护的时候，只需要修改less里的值，对应的CSS文件里的样式自动更改

Less变量

变量是没有固定的值，可以改变的，因为我们CSS中的一些颜色和数值等经常使用

变量名的规范：

//写在less文件里
//定义一个粉色的变量
@color:pink;
//某些元素使用变量
body{
    background-color：@color;
}
div{
    color:@color;
}

Less 嵌套

嵌套选择两种情况：

第一种嵌套选择父选择器的（所有）后代：内层选择器的前面没有&符号，则它被解析为父选择器的后代

第二种嵌套选择交集选择器、伪类、伪元素选择器：内层选择器前有&符号，则它就被解析为选择当前选择器

嵌套选择后代(所有)标签设置样式

.father{
    width:200px;
    height:200px;
    background-color:pink;
    a{
        color:red;
    }
}

less文件里显示的和保存后自动生成SCC文件，并且里面的内容换成CSS样式写法：

.father{
    width:200px + 2;
    height:(200px / 10);
    background-color:pink;
    p {
       a{
        color:red;
        }
    }
}

less文件里显示的和保存后自动生成SCC文件，并且里面的内容换成CSS样式写法：

嵌套选择后代(所有)类设置样式

.father{
    width:200px;
    height:200px;
    background-color:red;
    .son{
        color:red;
    }
}

less文件里显示的和保存后自动生成SCC文件，并且里面的内容换成CSS样式写法：

嵌套选择交集选择器、伪类、伪元素选择器

&不生成后代选择器，表示当前选择器

加上&符号它就被解析为元素自身的伪类

a{
    color:red;
    &:hover{
        color:pink;
    }
}

less文件里显示的和保存后自动生成SCC文件，并且里面的内容换成CSS样式写法：

.nav{
    &::after{
        content:"";
    }
}

less文件里显示的和保存后自动生成SCC文件，并且里面的内容换成CSS样式写法：

综合写法

.father{
    width:200px + 2;
    height:(200px / 10);
    background-color:pink;
    p {
       a{
        color:red;
            &:hover{
            color: pink;
            }
        }
    }
    .nav{
        color: purple;
    }
}

less文件里显示的和保存后自动生成SCC文件，并且里面的内容换成CSS样式写法：

Less运算

任何数字、颜色或者变量都是可以参与运算，就是less提供了加、减、乘、除算数运算

@border：5px + 5;
div{
    width:20px + 50;
    height:20px * 2;
    border:@border solid red;
    background-color:#666 - #333;
}

注意点：

1、加减乘除直接写计算表达式

2、除法需要添加小括号或.

3、多个单位运算以第一个单位为准

Less 里导入

一般加在less的开头位置

单引号双引号都可以

@import 后面要有空格

控制less导出css文件的位置

场景：在工作中，less是一个文件夹，css是一个文件夹，但是less保存，自动保存在它旁边

解决方法：

注意：

后面带上/ ，表示是CSS文件夹，以后在less里保存的时候，如果有CSS文件夹就直接用，没有css文件夹就自己创建一个css文件夹

想要所有的样式都保存到一样的文件里，配置插件就可以了

如果某个less文件有自己单独的导出路径，在这和less文件的第一行写导出路径的相关代码就行：

导出只有第一行有用，如果有两个导出，那就两个互相切换一下第一行

禁止导出CSS文件

想要保存less文件，他不保存出css文件，可以设置禁止导出

友情链接：