CSS系列——前端进阶之路：初涉Less
前言：最近帮一个朋友解决点问题，在查看组件源码的时候涉及到了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文件
<link rel="stylesheet/less" type="text/css" href="~/Content/less.less" />
（3）去 less开源地址 下载less.js文件，然后引入该文件。
<script src="less.js" type="text/javascript"></script>
或者你如果不想去下载less.js文件，也可以直接使用CDN的方式引用less.js，博主就是这么做的。
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
需要说明的是，less.js的作用就是编译less.less文件，使它成为浏览器能读懂的css样式。
（4）在引用less.js之前，需要一个less变量，声明编译less的环境参数，所以最终所有引用文件如下：
<link rel="stylesheet/less" type="text/css" href="~/Content/less.less" />
<script type="text/javascript">
less = {
env: "development",
async: false,
fileAsync: false,
poll: 1000,
functions: {},
dumpLineNumbers: "comments",
relativeUrls: false,
rootpath: ":/a.com/"
};
</script>
<script src="//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>
<mimeMap fileExtension=".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)有不同于“父类”的属性，可以“重写”，是不是一样一样的。
既然做了测试，我们还是来看看测试结果：
<div id="div1">div1</div>
<div id="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>
<div id="div1" class="divcolor">div1</div>
<div id="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/
欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文连接，否则保留追究法律责任的权利
CSS系列——前端进阶之路：初涉Less的更多相关文章
- 前端进阶之路：初涉Less
阅读目录 一.Less介绍 1.官方介绍 2.自己理解 3.Less.Sass.Stylus 二.Less使用入门 1.开发模式下使用Less 2.运行模式下使用Less 三.常见用法示例 1.从第一 ...
- 前端学习之路-CSS介绍，Html介绍，JavaScript介绍
CSS介绍 学前端必备掌握CSS样式,css为层叠样式表,用来定义页面的显示效果,加强用户的体验乐趣,那么如何用css到html中呢? style属性方式 利用标签中的style属性来改变显示样式 & ...
- 【SSH进阶之路】Hibernate系列——总结篇(九)
这篇博文是Hibernate系列的最后一篇,既然是最后一篇,我们就应该进行一下从头到尾,整体上的总结,将这个系列的内容融会贯通. 概念 Hibernate是一个对象关系映射框架,当然从分层的角度看,我 ...
- 前端进阶（12） - css 的弱化与 js 的强化
css 的弱化与 js 的强化 web 的三要素 html, css, js 在前端组件化的过程中,比如 react.vue 等组件化框架的运用,使 html 的弱化与 js 的强化 成为了一种趋势, ...
- 一个「学渣」从零开始的Web前端自学之路
从 13 年专科毕业开始,一路跌跌撞撞走了很多弯路,做过餐厅服务员,进过工厂干过流水线,做过客服,干过电话销售可以说经历相当的“丰富”. 最后的机缘巧合下,走上了前端开发之路,作为一个非计算机专业且低 ...
- 2017PHP程序员的进阶之路
2017PHP程序员的进阶之路 又是一年毕业季,可能会有好多毕业生即将进入开发这个圈子,踏上码农这个不归路.根据这些年在开发圈子总结的LNMP程序猿发展轨迹,结合个人经验体会,总结出很多程序员对未来的 ...
- Java进阶之路
Java进阶之路——从初级程序员到架构师,从小工到专家. 怎样学习才能从一名Java初级程序员成长为一名合格的架构师,或者说一名合格的架构师应该有怎样的技术知识体系,这是不仅一个刚刚踏入职场的初级程序 ...
- 【转】2017PHP程序员的进阶之路
2017PHP程序员的进阶之路 又是一年毕业季,可能会有好多毕业生即将进入开发这个圈子,踏上码农这个不归路.根据这些年在开发圈子总结的LNMP程序猿发展轨迹,结合个人经验体会,总结出很多程序员对未来的 ...
- 运维工程师打怪升级进阶之路 V2.0
在此之前,发布过两个版本: 运维工程师打怪升级之路 V1.0 版本发布 运维工程师打怪升级必经之路 V1.0.1 很多读者伙伴们反应总结的很系统.很全面,无论是0基础初学者,还是有基础的入门者,或者是 ...
随机推荐
- 快速开发基于 HTML5 网络拓扑图应用
采用 HT 开发网络拓扑图非常容易,例如<入门手册>的第一个小例子麻雀虽小五脏俱全:http://www.hightopo.com/guide/guide/core/beginners/e ...
- 深入学习jQuery描述文本内容的3个方法
× 目录 [1]html() [2]text() [3]val()[4]总结 前面的话 在javascript中,描述元素内容有5个属性,分别是innerHTML.outerHTML.innerTex ...
- oracle操作符
Oracle中算术操作符(+)(-)(*)(/) 值得注意的是:/ 在oracle中就相当于显示中的除法 5/2 = 2.5 比较操作符: 其中等号可以换成其他运算符:(后面为该操作符的单条件查询样例 ...
- Jsp的九大对象，七大动作，三大指令
jsp九大内置对象:1>out 向客户端输出数据,字节流.如out.print(" dgaweyr"); 2>request 接收客户端的http请求.String g ...
- WinServer2008R2 + IIS 7.5 + .NET4.0 经典模式 运行WebAPI程序报404错误的解决方案
在Windows Server 2008 R2系统下,IIS 7.5 + .NET Framework 4.0的运行环境,以经典模式(Classic Mode)部署一个用.NET 4.0编译的 Web ...
- 文字处理控件TX Text Control的使用
这几天一直在研究TX Text Control的使用,由于这方面的资料相对比较少,主要靠下载版本的案例代码进行研究,以及官方的一些博客案例进行学习,使用总结了一些心得,特将其总结出来,供大家分享学习. ...
- doT js 模板引擎【初探】要优雅不要污
js中拼接html,总是感觉不够优雅,本着要优雅不要污,决定尝试js模板引擎. JavaScript 模板引擎 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注. ...
- php调用web service接口(.net开发的接口)
实例代码1: try { $this->soapClientObj = new SoapClient(self::URL . '?wsdl', array('connection_timeout ...
- java分解质因数
package test; import java.util.Scanner; public class Test19 { /** * 分析:对n进行分解质因数,应先找到一个最小的质数k * 最小 ...
- mysql can't create threads in threadpool
最近,我们在券商端的mysql运行一段时间后,发生mysql can't create threads in threadpool,如下所示: 据官网一个报告显示,目测是一个bug,内存紧张导致,那天 ...