Less 基础

最新推荐文章于 2022-03-22 16:08:00 发布

VIP文章辰逸博客

最新推荐文章于 2022-03-22 16:08:00 发布

阅读量258

点赞数 1

分类专栏： css 文章标签： less运算 Less 嵌套 less 编译 less变量 Less 基础

本文链接：https://blog.csdn.net/chenyiboke/article/details/103209740

版权

Less 基础

1.CSS是一门非程序语言，没有变量、函数、SCOPE（作用域）等概念。

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

css的缺点：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
<style>
    html{
   
        font-size: 50px;
    }
    img{
   
        /* width: 82px;
        height: 82px; */
        width: 1.64rem;
        height: 1.64rem;
    }
    div{
   
        background-color: blue;    
        }
        p{
   
            background-color: blue;
        }
        span{
   
            background-color: blue;
        }
</style>
</head>
<body>
    
</body>
</html>

这样写的话太麻烦了。。

2. Less 介绍

    Less （leaner Style Sheets 的缩写） 是一门CSS扩展语言， 也就成为CSS预处理器。
    作为CSS的一种形式的扩展，它并没减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序是语言的特性。
    它在 CSS 的语法基础之上，引入了变量，Mixin （混入）， 运算以及函数等功能，大大简化了CSS的编写，
    并且降低了CSS的维护成本，就像它的名称所说的那样，less可以让我们用更少的代码做更多的事情。

这是Less中文网址：

  http://lesscss.cn/

常见的css预处理器： Sass、Less、Stylus
一句话：Less是一门CSS预处理语言，它扩展了CSS的动态特性。

3. Less 安装

	1. 安装nodejs，可选择版本（8.0）， 网址：http://nodejs.cn/download/
    2. 检查是否安装成功，使用cmd命令（win10 是 Windows +r 打开 运行输入cmd）  ---输入 “node-v”查看版本即可。
    3. 基于nodejs在线安装less， 使用cmd命令“npm install -g less” 即可。
    4. 检查是否安装成功，使用cmd命令“lessc -v” 查看版本即可。

less 使用：

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

		less变量
        less编译
        less嵌套
        less运算

4. less变量

最低0.47元/天解锁文章

辰逸博客

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Less 基础

Less 基础1.CSS是一门非程序语言，没有变量、函数、SCOPE（作用域）等概念。 1. CSS需要书写大量看似没有逻辑的代码，CSS冗余度是比较高的。 2. 不方便维护及扩展，不利于复用。 3. CSS没有很好的计算能力。 4. 非前端开发工程师来讲，往往会因为缺少CSS编程经验而很难写出组织良好且易于维护的CSS代码项目。css的缺点：<!D...
复制链接

扫一扫