阅读目录

  • 一、Less介绍

    • 1、官方介绍
    • 2、自己理解
    • 3、Less、Sass、Stylus
  • 二、Less使用入门
    • 1、开发模式下使用Less
    • 2、运行模式下使用Less
  • 三、常见用法示例
    • 1、从第一个Less变量开始
    • 2、变量计算
    • 3、变量混合
    • 4、嵌套规则
    • 5、函数的使用
    • 6、条件判断
    • 7、变量作用域
    • 8、不得不说的import指令
    • 9、综合实例
  • 四、总结

正文

前言：最近帮一个朋友解决点问题，在查看组件源码的时候涉及到了less语法，这可难倒博主了。没办法，既然用到就要学呗，谁让咱是无所不能的程序猿呢！所以今天来学习下Less，算是笔记，也希望给初学less的园友提供参考，如果你是前端大神，此文就没必要看了哈。算了，扯远了哈，进入正题。

本文原创地址：http://www.cnblogs.com/landeanfen/p/6047031.html

回到顶部

一、Less介绍

回到顶部

1、官方介绍

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

回到顶部

2、自己理解

Less是一门动态CSS语言，使得CSS样式更加灵活地作用于Html标签。试想如果没有Less，我们要对样式做一些逻辑计算的时候只能依靠Js去实现，有了Less之后，可以方便地动态给Html标签设置样式。比如一个最常见的需求，在当前浏览器的宽度小于500px的时候，给某一个div设置一个样式，使用less+css3就能很简单的解决问题。当然，这只是其中一个场景，less里面还能进行一些常见的条件和逻辑判断。总的来说，Less赋予了CSS逻辑运算的能力。

除此之外，动态CSS语法还有一个重要的作用就是提高样式代码的可维护性。比如一个最简单的，我们可以定义一个全局的颜色变量@aaa:#222，系统里面所有的默认颜色用的@aaa来写的，这个时候如果需要修改这个全局颜色，我们只需要改下@aaa变量的值就好了，其他地方不用做任何修改，这点，作为编程人员应该很容易理解。

说一千道一万，实践才是王道，下面跟着博主一起来看看一些Less最基础的用法吧。

回到顶部

3、Less、Sass、Stylus

说到Less，可能又有人不服了，可能有人要说：Less过时了，Sass是趋势，你看bootstrap3用的是less，怎么bootstrap4就改用sass了等等。博主想，它们三者作为Css的预处理技术，肯定都有自己的优势吧。今天在这里不想讨论三者的优缺点，先来学习Less吧，想那么多干嘛！

回到顶部

二、Less使用入门

关于Less的入门教程，网上也是一搜一大把，基本都和Less中文网上面差不多。Less既可以运行在Node服务端，也可以运行在浏览器客户端。博主对Node不熟，所以这篇还是看看其在浏览器端的使用，其实没有关系，不管在哪里使用，其基础的用法都是一样的。

一般来说，客户端运行Less分为两种情况：

  • 第一种方式是直接在html页面引用.less文件，然后借助less.js去编译less文件动态生成css样式而存在于当前页面，这种方式适用于开发模式。
  • 第二种方式是我们首先写好.less文件的语法，然后借助工具生成对应的.css文件，然后客户端直接引用.css文件即可。比如我们常用的bootstrap.css就是通过工具编译而成，这种方式更适合运行环境。
回到顶部

1、开发模式下使用Less

（1）首先我们在项目下面新建一个less文件，命名为less.less，里面写入最简单的语法

@base: #f938ab;div{background-color:@base;padding:50px;
}

（2）然后在html页面head里面引用该less文件

<linkrel="stylesheet/less"type="text/css"href="~/Content/less.less" />

（3）去 less开源地址 下载less.js文件，然后引入该文件。

<scriptsrc="less.js"type="text/javascript"></script>

或者你如果不想去下载less.js文件，也可以直接使用CDN的方式引用less.js，博主就是这么做的。

<scriptsrc="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>

需要说明的是，less.js的作用就是编译less.less文件，使它成为浏览器能读懂的css样式。

（4）在引用less.js之前，需要一个less变量，声明编译less的环境参数，所以最终所有引用文件如下：

　　<linkrel="stylesheet/less"type="text/css"href="~/Content/less.less" /><scripttype="text/javascript">less={env:"development",async:false,fileAsync:false,poll:1000,functions: {},dumpLineNumbers:"comments",relativeUrls:false,rootpath:":/a.com/"};</script><scriptsrc="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>

这里要强调的是，less变量的声明必须要在less.js的引用之前。

（5）调试运行

我们直接运行项目，得到如下结果

如果你的调试环境不是Visual Studio，就不会有这个问题！对于上述问题，需要在web.config里面配置如下节点

<system.webServer><staticContent><mimeMapfileExtension=".less"mimeType="text/css" /></staticContent>
</system.webServer>

然后再次运行，可以看到编译生成的css如下

回到顶部

2、运行模式下使用Less

如果是运行环境，最好是将less.less编译成.css文件，然后直接引用生成的.css文件即可，博主不熟悉Node的环境，这里，博主介绍一款less生成css的工具：Koala。首先去官网下载安装文件，安装运行之后得到如下界面：

然后将less所在的目录拖到界面中间

点击Compile按钮。将会在less.less的同级目录下生成一个less.css文件

然后直接引用这个css文件即可。有了工具是不是很easy~~

回到顶部

三、常见用法示例

初初入门，我们还是从最基础的开始吧！

回到顶部

1、从第一个Less变量开始

@base: #f938ab;div{background-color:@base;padding:50px;
}

页面html代码：

<body><div>第一个Less样式</div>
</body>

编译之后的Css样式如下：

效果预览：

以上是一个最基础的Less变量，在.less文件里面定义一个全局的@base变量，那么在该文件里面所有地方均可调用。

需要说明的是（1）Less里面的变量都是以@作为变量的起始标识，变量名由字母、数字、_和-组成；（2）在一个文件里面定义的同名变量存在全局变量和局部变量的区别（后面介绍）；

回到顶部

2、变量计算

@nice-blue: #f938ab;
@light-blue: @nice-blue + #333;div{background-color:@light-blue;
}

编译得到结果：

div{background-color:#ff6bde;
}

这说明，在Less里面，变量可以动态计算。

回到顶部

3、变量混合

混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。我们来看下面的例子：

.rounded-corners (@radius: 15px){border-radius:@radius;-webkit-border-radius:@radius;-moz-border-radius:@radius;
}#div1{padding:20px;width:200px;height:100px;border:2px solid red;.rounded-corners;}#div2{padding:20px;width:200px;height:100px;border:2px solid green;.rounded-corners(30px);}

编译后的结果你是否猜到了呢：

#div1{padding:20px;width:200px;height:100px;border:2px solid red;border-radius:15px;-webkit-border-radius:15px;-moz-border-radius:15px;
}#div2{padding:20px;width:200px;height:100px;border:2px solid green;border-radius:30px;-webkit-border-radius:30px;-moz-border-radius:30px;
}

原理解析：最上面的 @radius 变量可以理解为一个方法的参数，然后“15px”可以理解为参数的默认值。首先我们定义一个动态样式 .rounded-corners ，这个样式有一个动态的参数 @radius ，这个参数的默认值是“15px”。我们调用的时候如果不传参数，那么 @radius 就等于15px，如果我们传了30px，那么@radius就是我们传的参数值。如果这样理解是否会好一点呢，是不是有点类似我们编程里面的“方法”的概念。如果按照面向对象的原理也很好理解，#div1和#div2继承.rounded-corners这个样式，所以可以直接使用，然后如果“子类”(#div2)有不同于“父类”的属性，可以“重写”，是不是一样一样的。

既然做了测试，我们还是来看看测试结果：

    <divid="div1">div1</div><divid="div2">div2</div>

回到顶部

4、嵌套规则

在CSS里面，我们也经常可以见到标签样式嵌套的写法，那么在Less里面它是怎么实现的呢？我们来下下面的Less代码

#div1{h1 {font-size:26px;font-weight:bold;}span{font-size:12px;a {text-decoration:none;&:hover {border-width: 1px;}}}
}

编译后的CSS：

#div1 h1{font-size:26px;font-weight:bold;
}#div1 span{font-size:12px;
}#div1 span a{text-decoration:none;
}#div1 span a:hover{border-width:1px;
}

Less的这种写法好处是显而易见，标签层级结构清晰可见，并且能减少css代码量。但博主猜想肯定有人会不习惯这种写法，就是因为这种结构层级深，所以在阅读上面还是会有人不习惯，不管怎么样，且用且珍惜吧。

回到顶部

5、函数的使用

在Less里面函数的概念还是比较容易理解的。比如我们有这么一段定义：

.mixin (dark, @color){color:darken(@color, 10%);
}.mixin (light, @color){color:lighten(@color, 10%);
}.mixin (@_, @color){display:block;
}

然后有这么一句调用

@switch: light;.class{.mixin(@switch, #888);}

编译得到

.class{color:#a2a2a2;display:block;
}

以上不难理解，就是一个简单的逻辑判断。

回到顶部

6、条件判断

在上述“函数的使用”里面，我们看到Less支持“等于”的匹配方式，除此之外，Less里面还支持大于、小于等条件判断的语法，此之所谓“导引混合”。先来看看它的语法：

首先定义几个条件判断的“方法”

.mixin (@a) when (lightness(@a) >= 50%){background-color:black;
}.mixin (@a) when (lightness(@a) < 50%){background-color:white;
}.mixin (@a){color:@a;
}

然后调用该“方法”

.class1{.mixin(#ddd)}.class2{.mixin(#555)}

你猜结果是什么？编译结果如下：

.class1{background-color:black;color:#ddd;
}.class2{background-color:white;color:#555;
}

原理解析：不知道你有没有猜对结果，反正最开始博主是猜错了的。when的语法不难理解，就是一个条件判断，关键是下面的color从哪里来的。原来在Less里面是一种混合调用的方式，也就是说，如果定义了三个函数mixin，分别对应有三个不同的条件，那么我们调用mixin函数的时候如果三个的条件都满足，那么它三个的结果都会得到。这就是为什么我们class1和class2得到如上结果。在Less里面所有的运算符有： >、 >=、 =、 =<、 <，除了这5个运算符，Less还提供了基于值类型进行判断的方法：iscolor()、isnumber()、isstring()、iskeyword()、isurl()等。用法如下：

.mixin (@a, @b: 0) when (isnumber(@b)){...}.mixin (@a, @b: black) when (iscolor(@b)){...}

除了上述条件表达式以外，Less还提供了and、not等逻辑表达式。基础用法如：

.mixin (@b) when not (@b > 0){background-color:blue;}

回到顶部

7、变量作用域

Less的作用域很好理解，就是我们常说的全局变量和局部变量的区别，记住Less里面变量名可以重复。

@aaa: red;#div1{@aaa:green;#header {color:@aaa; }}#div2{color:@aaa;
}

相信你已经猜到结果了吧。编译之后

#div1 #header{color:green;
}#div2{color:red;
}

回到顶部

8、不得不说的import指令

less里面使用import将外部的less引入到本地less文件里面来。比如A.less里面定义了一个变量@aaa:red，而B.less文件里面也需要使用@aaa这个变量，这个时候怎么办呢？import派上用场了。

A.less内容如下：

@aaa:red;

B.less内容如下：

@import 'A.less';div{color:@aaa;
}

然后再html页面引入B.less文件，编译最终可以得到如下结果

div{color:@aaa;
}

有人可能要说，不就是引用其他less文件里面的变量吗，没啥用。可是你想过没有，由于项目里面模块很多，每个模块都有自己的less文件，如果没有import，怎么去统一调度呢。这点从bootstrap就可以看出来，当我们下载bootstrap3的源码，你会发现有很多的less文件，放在less文件夹里面，这些less文件分别对应着各个模块的样式。形如

各个模块的样式写完后，会有一个bootstrap.less文件，将其他所有的less文件都import进来，其内容如下：

// Core variables and mixins
@import "variables.less";
@import "mixins.less";// Reset and dependencies
@import "normalize.less";
@import "print.less";
@import "glyphicons.less";// Core CSS
@import "scaffolding.less";
@import "type.less";
@import "code.less";
@import "grid.less";
@import "tables.less";
@import "forms.less";
@import "buttons.less";// Components
@import "component-animations.less";
@import "dropdowns.less";
@import "button-groups.less";
@import "input-groups.less";
@import "navs.less";
@import "navbar.less";
@import "breadcrumbs.less";
@import "pagination.less";
@import "pager.less";
@import "labels.less";
@import "badges.less";
@import "jumbotron.less";
@import "thumbnails.less";
@import "alerts.less";
@import "progress-bars.less";
@import "media.less";
@import "list-group.less";
@import "panels.less";
@import "responsive-embed.less";
@import "wells.less";
@import "close.less";// Components w/ JavaScript
@import "modals.less";
@import "tooltip.less";
@import "popovers.less";
@import "carousel.less";// Utility classes
@import "utilities.less";
@import "responsive-utilities.less";

然后我们编译bootstrap.less，就能将所有模块的less文件引入进来。

为了证明这点，我们来测试一把，在A.less里面加入如下内容：

@aaa:red;
@widthtest:200px;.class2{background-color:green;border:5px solid red;
}

B.less内容如下：

@import 'A.less';div{color:@aaa;width:@widthtest;height:50px;
}

然后编译B.less得到的B.css文件内容如下：

.class2{background-color:green;border:5px solid red;
}div{color:#ff0000;width:200px;height:50px;
}

另外，import指令还包含了多种参数类型：

1. @import (reference) "文件路径";　将引入的文件作为样式库使用，因此文件中样式不会被直接编译为css样式规则。当前样式文件通过extend和mixins的方式引用样式库的内容。

2. @import (inline) "文件路径";　　用于引入与less不兼容的css文件，通过inline配置告知编译器不对引入的文件进行编译处理，直接输出到最终输出。

3. @import (less) "文件路径";　　默认使用该配置项，表示引入的文件为less文件。

4. @import (css) "文件路径";　　表示当前操作为CSS中的@import操作。当前文件会输出一个样式文件，而被引入的文件自身为一个独立的样式文件

5. @import (once) "文件路径";　　默认使用该配置项，表示对同一个资源仅引入一次。

6. @import (multiple) "文件路径";　　表示对同一资源可引入多次。

回到顶部

9、综合实例

对于上文提到的屏幕变化的时候动态去设置样式的问题，使用less结合css3的@media就能轻松处理，比如有下面一段less代码：

@base: #f938ab;div{background-color:@base;padding:50px;
}.divcolor{@media (max-width:400px) {background-color: green;}@media (min-width: 400px) and (max-width: 800px){background-color:red;}@media (min-width: 800px){background-color:#f938ab;}}

界面html如下：

<body><divid="div1"class="divcolor">div1</div><divid="div2">div2</div>
</body>

使用这种嵌套的写法就能实现多个条件的预设样式，所以最终编译得到的css如下：

/*line 4, http://localhost:34512/Content/less.less*/div{background-color:#f938ab;padding:50px;
}@media (max-width: 400px){
.divcolor {background-color:green;}}
@media (min-width: 400px) and (max-width: 800px){
.divcolor {background-color:red;}}
@media (min-width: 800px){
.divcolor {background-color:#f938ab;}}

表示当前文档的宽度小于400的时候，背景色为green；大于400小于800时背景色为red；大约800时背景色为#f938ab。来看看是不是这样：

这里只是一个简单的测试，实际应用中肯定不可能只是设置一个简单的背景色。对于响应式布局的情况，这种写法非常多。

对于条件判断，less支持嵌套的写法，比如：

@base: #f938ab;div{background-color:@base;padding:50px;
}
.class1{width:550px;margin:10px;
}.class2{width:150px;margin:auto;display:block;
}.divcolor{@media (max-width:800px) {background-color: green;.class1;@media (min-width:400px){background-color: red;.class2}}
}

编译得到的css如下：

div{background-color:#f938ab;padding:50px;
}
.class1{width:550px;margin:10px;
}
.class2{width:150px;margin:auto;display:block;
}@media (max-width: 800px){
.divcolor {background-color:green;width:550px;margin:10px;}}
@media (max-width: 800px) and (min-width: 400px){
.divcolor {background-color:red;width:150px;margin:auto;display:block;}}

回到顶部

四、总结

一些基础的用法暂时先介绍这么多，更多高级用法还有待研究再发出。由于博主接触less语法的时间并不长，如果有理解有误之处，还望园友们指出。

本文转自懒得安分博客园博客，原文链接：http://www.cnblogs.com/landeanfen/p/6047031.html，如需转载请自行联系原作者

CSS系列——前端进阶之路：初涉Less相关推荐

  1. 前端进阶之路: 前端架构设计(2)-流程核心

    可能很多人和我一样, 首次听到"前端架构"这个词, 第一反应是: "前端还有架构这一说呢?" 在后端开发领域, 系统规划和可扩展性非常关键, 因此架构师备受重视 ...

  2. 2021年高级前端进阶之路

    YYDS 2021年高级前端进阶之路1.两边固定,中间自适应布局(1.用flex;2.用display:left;3.用相对定位和绝对定位结合)2.js判断字符串中出现次数最多的字符(1.用for循环 ...

  3. 【2019 前端进阶之路】深入 Vue 响应式原理，活捉一个 MVVM

    作者:江三疯,专注前端开发.欢迎关注公众号前端发动机,第一时间获得作者文章推送,还有各类前端优质文章,致力于成为推动前端成长的引擎. 前言 作为 Vue 面试中的必考题之一,Vue 的响应式原理,想必 ...

  4. 前端进阶之路：初涉Less

    阅读目录 一.Less介绍 1.官方介绍 2.自己理解 3.Less.Sass.Stylus 二.Less使用入门 1.开发模式下使用Less 2.运行模式下使用Less 三.常见用法示例 1.从第一 ...

  5. 【WEB前端进阶之路】 HTML 全路线学习知识点梳理（上）

    前言 HTML 是一切Web开发的基础,本文专门为小白整理,针对前端零基础的朋友们,手把手教你学习HTML,让你轻松迈入WEB开发的行列. 首先,感谢 @橙子_ 在HTML学习以及本文编写过程中对我的 ...

  6. 【转】前端进阶之路：如何高质量完成产品需求开发

    有时候好的文章不是光收藏一下就可以的,要研究为什么人家那么思考,你为什么不行?要多想. 前言 看到这篇的时候,想起前几周的周末参加的一个工作坊,讲师有提到一个问题,作为程序员你们写了解你们写代码的目的 ...

  7. web前端进阶之路；web前端不能只做普通程序员；web前端应该向前端架构师前进

    有人说产品开发过程中web前端没有结论,只有随需求不停的修改,但是项目必须要有阶段性的结论,作为一个前端开发,如何避免为了某一个需求而陷入反复更改的困境呢?不要把责任全部推到产品不断的需求更改或者设计 ...

  8. 前端进阶之路 0.1+0.2 !== 0.3?

    因为JavaScript采用的是IEEE 754语言规范导致的问题,小数计算并不十分精确,如何解决小数精确的问题: 设置一个误差范围值:机器精度 es6之前 if (!Number.EPSILON) ...

  9. 【前端进阶之路】内存基本知识

    内存管理 本文以V8为背景 对之前的文章进行重新编辑,内容做了很多的调整,使其具有逻辑更加紧凑,内容更加全面. 1. 基础概念 1.1 生命周期 不管什么程序语言,内存生命周期基本是一致的: 分配你所 ...

最新文章

  1. C++/C++11中用于定义类型别名的两种方法：typedef和using
  2. IIS8 添加配置 WCF服务
  3. 模板 - 树上问题（树的直径、动态查询树的直径、树的重心）
  4. 【机器学习】机器学习Top10算法，教你选择最合适的那一个！一文读懂ML中的解析解与数值解...
  5. PAT甲级——1102 Invert a Binary Tree (层序遍历+中序遍历)
  6. android8.1状态栏图标,Android 8.1 去掉 Launcher3 默认给 icon 增加的白边
  7. 大佬把Spring框架总结的「无比详细」，不信你学不会！
  8. 服务器性能瓶颈分析方法
  9. CNN的卷积运算为何使用互相关而不是卷积
  10. 人工蜂群算法python_人工蜂群算法-python实现
  11. python微信集成_Python微信公众号后台开发005：集成智能聊天机器人​
  12. MVC3.0图片滚动和相册展示(下)
  13. String.GetEnumerator 方法的C#例子
  14. python判断ip能否ping通_python 检查IP是否能ping通，并且分别导入两个文件
  15. MAC安装apache tomcat配置方法图文教程
  16. 深度学习图像分类（三）： VggNet
  17. Android移动应用开发大作业——日程管理+邮件反馈
  18. oracle和mysql建表语句的区别_mysql和oracle建表语句的区别
  19. python多线程爬取美图录网站图集按模特姓名存储到本地（二）
  20. vue中监听enter键触发事件

热门文章

  1. sql server 链接到oracle库，读取对应信息
  2. 不知道对象的传递那些参数
  3. CCF CSP201709-1打酱油
  4. 【python初识】列表与函数模块
  5. iOS开发如何避免安全隐患
  6. BottomNavigationBar使用详解
  7. vue-cli watch/timer
  8. Execute Process Task
  9. java向MySQL插入当前时间的四种方式和java时间日期格式化的几种方法(案例说明)...
  10. 安装redis及python redis模块