Maison >interface Web >tutoriel CSS >CSS前端进阶之路:初涉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文件
139ff12020730b60f8928d307809d656
(3)去 less开源地址 下载less.js文件,然后引入该文件。
49d313d6f481f92f1e05c18571a9ba982cacc6d41bbb37262a98f745aa00fbf0
或者你如果不想去下载less.js文件,也可以直接使用CDN的方式引用less.js,博主就是这么做的。
8e6f3d38c25677cf9e599fd9afad70d92cacc6d41bbb37262a98f745aa00fbf0
需要说明的是,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; } }