1. 相关网站
2. Less是什么
- Less 是一种 CSS 预处理语言. 其在 CSS 的基础上, 增加了变量, Mixin, 函数等特性. 增加了 CSS 的可维护可重用性.
- Less 需要 node.js 的支持. 可运行于 Node 或 浏览器端.
3. Less2CSS
-
安装 node.js
-
使用 node.js 中的 npm 安装 less.
npm install -g less
-
使用 lessc, less 文件编译为 css 文件
lessc style.less style.css
4. Less比CSS多出的特性
4.1. Less导入其他文件
- 使用
@import 伪指令导入其他 less 文件. 可出现在文件任意位置.
- 如果 import 的文件后缀是 css, 则导入的内容被视为 css, 不作编译处理.
- 如果 import 的文件后缀是其他, 都将视为 less 文件导入.
- import 支持各种导入选项. 选项写在
()中, 多个选项之间使用,分割.
-
(reference): 使用一个 less 作为参考, 不输出它本身.
-
(inline): 将 css 直接不作处理的复制到输出 css 文件中.
-
(less): 指定导入为 less 文件, 而不看文件后缀.
-
(css): 指定导入为 css 文件, 而不看文件后缀.
-
(once): 只导入一次该文件.
-
(multiple): 多次导入文件.
-
(optional): 即使找不到要导入的文件, 也仍然会继续编译.
//-------------- importA.less -------------
.Label {
background-color: red;
color: black;
}
//-------------- test.less -------------
@import (reference) "./importA.less";
//@import (inline) "./test.css";
#Wgt {
.Label();
}
//-------------- test.css -------------
#Wgt {
background-color: red;
color: black;
}
4.2. 嵌套规则
类似于其他语言的作用域, 实现各选择器的嵌套
MainWindow {
color: white;
h1 {
color: red;
}
#MyBtn{
&:hover {
color: blue;
}
&_1 {
color: yellow;
}
}
}
//--------- 生成的 CSS ----------
MainWindow {
color: white;
}
MainWindow h1 {
color: red;
}
MainWindow #MyBtn:hover {
color: blue;
}
MainWindow #MyBtn_1 {
color: yellow;
}
4.3. 算术运算符
- 支持
+, -, *, / 运算符
- 可作用于 数字, 颜色, 变量
@nSize: 10px;
h1 {
padding: @nSize + 5 @nSize - 5 @nSize * 5 @nSize / 3;
}
//--------- 生成的 CSS ----------
h1 {
padding: 15px 5px 50px 3.33333333px;
}
4.4. 变量
注意: 它的变量更像是其他语言的常量, 因为它只能被定义一次.
@mainColor: #ffffff;
.pre {
background-color: @mainColor;
color: @mainColor + #111;
}
//--------- 生成的 CSS ----------
.pre {
background-color: #ffffff;
color: #ffffff;
}
@var: {
font-family: "Comic Sans MS";
background-color: #AA86EE;
.MyClass {
color: red;
}
};
// 调用
#PushButton {
@var();
}
//--------- 生成的 CSS ----------
#PushButton {
font-family: "Comic Sans MS";
background-color: #AA86EE;
}
#PushButton .MyClass {
color: red;
}
4.5. 可供调用的函数
4.6. Mixins混合
- 类似于其他编程语言中的函数, 将一组 CSS 封装起来, 并可以提供参数.
- 其功能为: 按照各条件和参数, 输出指定 css.
- 因为没有条件语句, 可使用保护的命名空间来模拟该语法功能. 只有在条件返回为真时才使用.
- 可使用
! important 关键字来覆盖特定属性.
- 声明混合: 可使用类选择器或id选择器用和使用正常CSS一样的方式来声明.
- 带参数
- 参数之间使用
;或, 分割(建议使用;). 且该部分样式只在调用处展开.
- 参数可提供默认形参, 实参传入的时候尽量使用名字指定具体参数, 而不使用位置指定.
- 使用
@参数名 表示参数.
- 使用
@{参数名} 和 ~"" 配合, 实现字符串替换.
-
@arguments 表示使用所有参数
// 可使用 . 和 # 选择器, 定义 mixin
// 无参数 mixin 会在定义处展开
.Label {
margin: 0px 0px 0px 0px;
}
// 带参数时, 推荐使用 ; 分割各参数
// 带参数 mixin, 不会在定义处展开
.BorderCss(@borderW; @borderStyle; @borderCol) {
// @arguments 表示顺序使用所有参数
border: @arguments;
border-left-color: @borderCol;
}
#WgtCSS(@objName; @width; @height)
{
@{objName} {
width: @width;
height: @height + 2px;
}
}
// 使用
.MyWgt {
.Label(); // ()可省略
padding-left: 5px;
padding-right: 5px;
.BorderCss(@borderW: 2px; @borderStyle: bold;
@borderCol: red);
// ~" " 表示转义, 不对 #BtnA 作解析
#WgtCSS(@objName: ~"#BtnA"; @width:10px; @height:5px);
}
//--------- 生成的 CSS ----------
.Label {
margin: 0px 0px 0px 0px;
}
.MyWgt {
margin: 0px 0px 0px 0px;
padding-left: 5px;
padding-right: 5px;
border: 2px bold red;
border-left-color: red;
}
.MyWgt #BtnA {
width: 10px;
height: 7px;
}
4.6.1. Mixin中可包含的内容
- 可包含普通 CSS 语法.
- 可定义变量. 说的是可在 Mixin 中定义变量. 其中的变量会在调用 Mixin 处展开.
- 变量存在作用域. 当调用 Mixin 时存在同名变量时, 在调用者中包含的变量优先级最高.
- 可定义 Mixin.
.WidgetMixin(@col) {
color: @col;
// 定义 Mixin
.BorderMixin(@borderW; @borderCol) {
border: @borderW solid @borderCol;
}
// 定义 变量
@bkCol: @col + #888;
}
// 调用
#MyWgt {
.WidgetMixin(@col: red);
// 调用了 WidgetMixin 后, .BorderMixin 和 @bkCol 就都包含在其中了
.BorderMixin(@borderCol: black; @borderW: 10px);
background-color: @bkCol;
}
//--------- 生成的 CSS ----------
#MyWgt {
color: red;
border: 10px solid black;
background-color: #ff8888;
}
4.6.2. 可变数量参数
- 可使用
... 表示可变数量参数.
- 可使用
@rest... 变量表示剩余的参数.
// 使用 ...
.BorderCSS(...){
border: @arguments;
}
// 使用 @rest...
.BorderCSS_1(@col; @rest...) {
color: @col;
border: @rest;
}
#MyWgt {
.BorderCSS(1px; solid; red);
}
#MyWgt_1 {
.BorderCSS_1(@col: blue; @rest: 2px solid black);
}
//--------- 生成的 CSS ----------
#MyWgt {
border: 1px solid red;
}
#MyWgt_1 {
color: blue;
border: 2px solid black;
}
4.6.3. 模式匹配
用于规定一定的条件, 符合条件则展开
// 只能匹配第一个参数为 blueSkin 的调用
.ButtonCss(blueSkin, @bkCol) {
background-color: darken(@bkCol, 10%);
color: white;
}
.ButtonCss(whiteSkin, @bkCol) {
background-color: lighten(@bkCol, 10%);
color: black;
}
// @_ 可匹配任何值
.ButtonCss(@_, @bkCol) {
padding: none;
}
//调用
@crtSkin: whiteSkin;
#MyButton {
.ButtonCss(@crtSkin, @bkCol: #888);
}
//--------- 生成的 CSS ----------
#MyButton {
background-color: #a2a2a2;
color: black;
padding: none;
}
4.7. 条件判断
- 没有 if/else 语法, 而是使用 Guards. 用于执行指定匹配的 mixin.
- 比较运算符:
<, >, <=, >=, =.
-
= 可用于比较数字, 字符串, 标识符等.
- 其他只能用于比较数字.
- 逻辑运算符:
when, and表示与, ,表示或, not非.
- 类型检查函数:
- 检查特定类型:
iscolor(), isnumber(), isstring(), iskeyword(), isurl().
- 检查特定单位:
ispixel(), ispercentage(), isem(), isunit().
-
default() 表示 条件语句中的 else, switch 语句中的 default.
// [1] and 为 &&, not 为 !
.mixin(@skin; @col) when (@skin = "blue") and (not (@col = red))
{
color: blue;
background-color: white;
}
// [2] , 为 ||
.mixin(@skin; @col) when (@skin = "red"), (iscolor(@col))
{
color: red;
background-color: black;
}
.TempMixin(@w) when (@w < 10px)
{
padding-left: @w;
}
.TempMixin(@w) when (@w = 10px)
{
padding-right: @w;
}
// default()
.TempMixin(@w) when (default())
{
padding-bottom: @w;
}
// 使用
#Wgt {
// 符合 [1] 和 [2] 的条件
.mixin(@skin:"blue"; @col: black);
// 符合 default() 条件
.TempMixin(12px);
}
//--------- 生成的 CSS ----------
#Wgt {
color: blue;
background-color: white;
color: red;
background-color: black;
padding-bottom: 12px;
}
4.8. 循环
.generate-columns(@n, @i: 1) when (@i =< @n) {
.column-@{i} {
width: (@i * 100% / @n);
}
// 递归调用
.generate-columns(@n, (@i + 1));
}
// 调用
.generate-columns(4);
//--------- 生成的 CSS ----------
.column-1 {
width: 25%;
}
.column-2 {
width: 50%;
}
.column-3 {
width: 75%;
}
.column-4 {
width: 100%;
}
4.9. 合并merge
- 在一般 css 属性后, 增加
+ 和 +_, 来实现相同属性的值合并.
-
+: 使用 , 合并各部分的值.
-
+_: 使用
#MyButton {
// +_ 使用 空格 合并
padding+_: 10px;
padding+_: 5px;
// + 使用 , 合并
margin+: 10px;
margin+: 5px;
}
//--------- 生成的 CSS ----------
#MyButton {
padding: 10px 5px;
margin: 10px, 5px;
}
