Less 概述
1)动态样式语言
CSS 是一门非程序式语言,没有变量、函数、作用域等概念。CSS 被称之为 静态样式语言,从而导致样式文件的修改和维护困难。
动态样式语言 是指,在静态样式语言的基础上,添加了一门真正的语言所必需的元素:变量、数据类型、运算、逻辑结构、函数、继承等,从而大大提高样式的可修改和可维护性。
2)什么是 Less
Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。
Less 官网:http://www.lesscss.net/
3)如何使用 Less
a. 在客户端使用
- 在 HTML 页面的
<head>
元素内引入.less
样式文件(**rel
**属性值为stylesheet/less
)。
@base: #f938ab;
.box-shadow(@style, @c) when (iscolor(@c)) {
box-shadow: @style @c;
-webkit-box-shadow: @style @c;
-moz-box-shadow: @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
.box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
color: saturate(@base, 5%);
border-color: lighten(@base, 30%);
div { .box-shadow(0 0 5px, 30%) }
}
- 下载
less.js
文件,在<head>
元素内引入。
值得注意的是:
less
样式文件必须在less.js
文件之前引入。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在客户端使用Less</title>
<link rel="stylesheet/less" type="text/css" href="less/css/style.less">
<script src="less/js/less.js"></script>
</head>
<body>
<div class="box">
<h1>标题</h1>
<p>段落</p>
</div>
</body>
</html>
b. 在服务器端使用
在服务器端安装 less
的最简单方式就是通过 npm
(node 的包管理器)。
Node.js的安装及验证请参考《Node.js安装教程》
- 通过
npm
工具包安装less
。
npm install less -g
- 通过以下命令测试
less
是否安装成功。
lessc
命令行方式将 less
文件编译成 css
文件。
lessc style.less > style.css
配置 WebStorm 中的 less
- 点击“File”->“Setting”,弹出配置窗口。
- 点击“Tools”->“File Watchers”。
- 点击左下角的“加号”,选择
Less
选项。 - 配置“Program”选项,值为
lessc
的安装路径。
保存配置后,修改任意less
文件,即可以自动生成一个css
文件。
**值得注意的是:**此配置只对当前项目有效。如果创建新项目,必须重新进行配置。
Less 语法
1)注释
CSS 形式的注释在 LESS 中是依然保留的:
/* Hello, I'm a CSS-style comment */
.class { color: black }
LESS 同样也支持双斜线的注释, 但是编译成 CSS 的时候自动过滤掉:
// Hi, I'm a silent comment, I won't show up in your CSS
.class { color: white }
2)变量
变量就是一次声明可以多次使用的数据。
@nice-blue: #5B83AD;
#header { color: @ nice-blue; }
输出:
#header { color: #5B83AD; }
**值得注意的是:**LESS 中的变量为完全的‘常量’,所以只能定义一次。
3)混合
在 LESS 中可以定义一些通用的属性集为一个class,然后在另一个class中去调用这些属性。
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
如果需要在其他 class 中引入那些通用的属性集,只需要在任何class中像下面这样调用就可以了。
#menu a {
color: #111;
.bordered;
}
.post a {
color: red;
.bordered;
}
.bordered class里面的属性样式都会在 #menu a 和 .post a中体现出来:
#menu a {
color: #111;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
.post a {
color: red;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
4)带参混合
在 LESS 中,还可以像函数一样定义一个带参数的属性集合:
.border-radius (@radius) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
然后在其他 class 中像这样调用:
#header {
.border-radius(4px);
}
.button {
.border-radius(6px);
}
为参数设置默认值:
.border-radius (@radius: 5px) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
这样调用:
#header {
.border-radius;
}
@radius 的值就是 5px。
@arguments 变量
@arguments包含了所有传递进来的参数。
.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
box-shadow: @arguments;
-moz-box-shadow: @arguments;
-webkit-box-shadow: @arguments;
}
.box-shadow(2px, 5px);
将会输出:
box-shadow: 2px 5px 1px #000;
-moz-box-shadow: 2px 5px 1px #000;
-webkit-box-shadow: 2px 5px 1px #000;
5)嵌套规则
LESS 可以以嵌套的方式编写层叠样式。例如以下案例:
#header { color: black; }
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
#header .logo:hover {
text-decoration: none;
}
在 LESS 中就可以这样写:
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
&:hover { text-decoration: none }
}
}
值得注意的是:
&
符号的使用如果想写串联选择器,而不是写后代选择器,就可以用到
&
了。
.bordered {
&.float {
float: left;
}
.top {
margin: 5px;
}
}
会这样输出:
.bordered.float {
float: left;
}
.bordered .top {
margin: 5px;
}
6)运算
任何数字、颜色或者变量都可以参与运算。LESS 中允许的计算有+
、-
、*
、/
和%
。
@screen-width: 992px;
.col-md-1 {
width: floor(@screen-width/12);
}
将会输出:
.col-md-1 {
width: 82px;
}
7)函数
LESS 内置了几十个函数,用于颜色转换、字符串处理和数学运算等。
a. Color 函数
lighten(@color, 10%); // return a color which is 10% *lighter* than @color
darken(@color, 10%); // return a color which is 10% *darker* than @color
saturate(@color, 10%); // return a color 10% *more* saturated than @color
desaturate(@color, 10%); // return a color 10% *less* saturated than @color
fadein(@color, 10%); // return a color 10% *less* transparent than @color
fadeout(@color, 10%); // return a color 10% *more* transparent than @color
fade(@color, 50%); // return @color with 50% transparency
spin(@color, 10); // return a color with a 10 degree larger in hue than @color
spin(@color, -10); // return a color with a 10 degree smaller hue than @color
mix(@color1, @color2); // return a mix of @color1 and @color2
例如下述案例:
@base: #f04615;
.class {
color: saturate(@base, 5%);
background-color: lighten(spin(@base, 8), 25%);
}
将会输出:
.class {
color: #f6430f;
background-color: #f8b38d;
}
b. Math 函数
round(1.67); // returns `2`
ceil(2.4); // returns `3`
floor(2.6); // returns `2`
8)文件导入
LESS 允许创建一个 main 文件(主要用于引入其他 LESS 文件)。
.less
后缀可带可不带。
@import "lib.less";
@import "lib";
**值得注意的是:**最后会生成一个 CSS 文件,而不是多个 CSS 文件。
9)定制 Bootstrap
a. 查看 Bootstrap 源码
打开 Bootstrap 源码包中的 less
目录中的 bootstrap.less
文件:
// 核心变量和混合类
@import "variables.less";
@import "mixins.less";
// 重置和依赖类
@import "normalize.less";
@import "print.less";
@import "glyphicons.less";
// 核心类
@import "scaffolding.less";
@import "type.less";
@import "code.less";
@import "grid.less";
@import "tables.less";
@import "forms.less";
@import "buttons.less";
// 组件类
@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";
// 插件类
@import "modals.less";
@import "tooltip.less";
@import "popovers.less";
@import "carousel.less";
// 工具类
@import "utilities.less";
@import "responsive-utilities.less";