每一门技术的出现都是为了解决现存的问题,同样的,Less 的出现是为了解决 CSS 中过于呆板的写法。Less 官方文档 中对 Less 的使用有详细的介绍,总结一下为:Less = 变量 + 混合 + 函数。如果你对 js 和 css 有所了解,那么就可以很快的掌握并在你的项目中使用 Less。
一、Less 使用初体验
1. 使用 Less 写样式
使用 Npm 全局安装 Less
$ npm install less -g
创建一个空文件夹,这里命名为:
learn-less
在根目录下创建 index.html 文件,复制内容如下:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>初识 Less</title> <link href="./main.css" rel="stylesheet"> </head> <body> <div class="container">1</div> <div class="container2">2</div> <div class="container3">3</div> </body> </html>
在根目录下创建 main.less 文件,复制内容如下:
// main.less @width: 100%; @height: 100px; @color: red; .container{ width: @width; height: @height; background-color: @color; margin-bottom: 5px; } .container2{ width: @width; height: @height; background-color: @color; margin-bottom: 5px; } .container3{ width: @width; height: @height; background-color: @color; margin-bottom: 5px; }
现在打开浏览器看一下,会发现并没有加载样式。这是因为 index.html 中引入的样式文件是 main.css 而不是 main.less。所以接下来,我们需要将 main.less 转换为 main.css,不用担心,这一步骤并不需要你手动操作,仅仅是运行一条命令就会自动完成转换。
$ lessc main.less
操作完以上步骤就会发现在根目录下生成了一个 main.css 文件,此时再打开浏览器看看,样式已经出现了。
main.css 转义内容为:
.container { width: 100%; height: 100px; background-color: red; margin-bottom: 5px; } .container2 { width: 100%; height: 100px; background-color: red; margin-bottom: 5px; } .container3 { width: 100%; height: 100px; background-color: red; margin-bottom: 5px; }
如果你使用了 Webstorm 作为开发工具,那么连手动输入命令行这一步都可以跳过,因为 Webstorm 会在你的 .less 文件被修改后自动生成对应的 .css 文件,具体配置跳转:Webstorm 配置 Less 自动转译成 css
2. 感受 Less 的便利
现在有一个新的需求,需要将三个 div 的背景颜色改成蓝色(blue),如果是之前 css 的写法需要依次找到 container、container2、container3,对应修改里面的 background-color 属性,但是使用 less 我们仅仅修改前面定义过的变量值即可。
// main.less @width: 100%; @height: 100px; @color: blue; ...
使用
lessc main.less
进行转译后打开浏览器可以看到三个 div 的背景颜色已经被改变了。二、变量
在前面介绍的案例中已经使用了“变量”的概念,是不是感觉和 js 很像,事实上 less 就是用 js 的写法来写 css。
官网在介绍变量的时候会给出很多应用场景,总结一下就是使用 @ 符号定义变量,使用 @ 符号获取变量,仅仅将
@变量名
看成是一个字符串。@classname: main; @color: red; .@classname{ background-color: @color; }
从上面例子中可以看到,变量不仅仅可以作为样式属性值:
background-color: @color;
,还可以作为类名:.@classname
表示的就是.main
。这也就是为什么说仅仅将 @变量名 看成是一个字符串。
三、混合
先看一个 example.css 文件:
#menu a { color: #111; border-top: dotted 1px black; border-bottom: solid 2px black; } #menu span { height: 16px; border-top: dotted 1px black; border-bottom: solid 2px black; } #menu p { color: red; border-top: dotted 1px black; border-bottom: solid 2px black; }
可以看到上面三个样式中都有
border-top
和border-bottom
两个属性,并且内容完全相同;在传统 CSS 写法中只能这样一遍有一遍的去书写重复的内容,在 Less 中通过将公共属性抽取出来作为一个公共类
的方式规避这一点。// example2.less .bordered { border-top: dotted 1px black; border-bottom: solid 2px black; } #menu a { color: #111; .bordered; } #menu span { height: 16px; .bordered; } #menu p { color: red; .bordered(); }
将以上 example2.less 进行转译成 example2.css 文件为:
.bordered { border-top: dotted 1px black; border-bottom: solid 2px black; } #menu a { color: #111; border-top: dotted 1px black; border-bottom: solid 2px black; } #menu span { height: 16px; border-top: dotted 1px black; border-bottom: solid 2px black; } #menu p { color: red; border-top: dotted 1px black; border-bottom: solid 2px black; }
可以看到 examle2.css 与 example.css 很相似,只是多了一个 .bordered 样式。
修改 example2.less,将 .bordered 写成 .bordered(),此时在进行转译之后会看到 example2.css 和 example.css 文件就完全一样了,使用 less 书写更加简单。
// example2.less .bordered() { border-top: dotted 1px black; border-bottom: solid 2px black; } ...
总结:
混合也是减少代码书写量的一个方法;
混合的类名在定义的时候加上
小括弧 ()
,那么在转译成 css 文件时就不会出现;混合的类名在被调用的时候加上
小括弧 ()
和不加上小括弧 ()
是一样的效果,看个人习惯,如:第三行和第八行转译成 css 是一样的。1 #menu span { 2 height: 16px; 3 .bordered; 4 } 5 6 #menu p { 7 color: red; 8 .bordered(); 9 }
四、函数
曾几何时,在书写呆板的 css 时有没有想过让类名动态化,根据不同的参数生成不同的样式。看下面的示例:
// func.less .border-radius(@radius) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } #header { .border-radius(4px); } .button { .border-radius(6px); }
使用
$ lessc func.less
进行转译 func.css 文件内容如下:#header { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .button { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
可以看到,这里就用到了函数的概念,在
#header
和.button
中分别传入不同的参数,结果也就生成不同的代码。关于 less 中函数的写法还有以下几种:
// 函数的参数设置默认值: .border-radius(@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } // 函数有多个参数时用分号隔开 .mixin(@color; @padding:2) { color-2: @color; padding-2: @padding; } // 函数如果没有参数,在转译成 css 时就不会被打印出来,详见上面混合中的示例 .wrap() { text-wrap: wrap; } // 函数参数如果有默认,调用时就是通过变量名称,而不是位置 .mixin(@color: black; @margin: 10px; @padding: 20px) { color: @color; margin: @margin; padding: @padding; } .class1 { .mixin(@margin: 20px; @color: #33acfe); } // 函数参数有个内置变量 @arguments,相当于 js 中的 arguments .box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) { -webkit-box-shadow: @arguments; -moz-box-shadow: @arguments; box-shadow: @arguments; } // 函数名允许相同,但参数不同,类似于 java 中多态的概念 .mixin(@color: black) { .mixin(@color: black; @margin: 10px) {
当然,上面是开发人员自定义的函数,Less 也为我们定义了很多好用的内置函数。关于内置函数,如果掌握,可以在开发过程中节约很多时间,由于内置函数数量很多,这里就不一一介绍,传送门:Less 内置函数官方文档。
五、父子元素的写法
在 css 中父子元素的写法通常如下:
.container { padding: 0; } .container .article { background-color: red; }
在 Less 写法如下,父子嵌套关系一目了然。
.container { padding: 0; .article { background-color: red; } }
当然,父子元素还要一种是伪类的写法,在 css 中写法如下:
#header :after { content: " "; display: block; font-size: 0; height: 0; clear: both; visibility: hidden; }
在 less 中写法如下,可以看到引入了新的符号
&
,以&
来代替主类#header
。#header { &:after { content: " "; display: block; font-size: 0; height: 0; clear: both; visibility: hidden; } }
六、神奇 @import
在传统 css 文件中,每个文件都是独立的。在 less 中可以像 js 的模块那样在一个 less 文件中引入另一个 less 文件。
创建 one.less 文件:
.container { width: 100px; height: 200px; }
创建 two.less 文件:
@import "one";
使用
$ lessc two.less
转译成two.css
文件,可以看到内容如下:.container { width: 100px; height: 200px; }
@import 的作用可以看成是将 one.less 的内容复制一份到当前 .less 文件中。
那么如果 two.less 中也有一个类名叫 container 的,使用 @import 之后会变成什么样子呢?这个留给自行测试好啦。
作者:dkvirus
链接:http://www.jianshu.com/p/48018e5da7dd
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
三十分钟学会 Less
最新推荐文章于 2023-11-22 16:25:33 发布