Less CSS 预处理器
目录
安装
注释
嵌套
变量
操作
命名空间和访问器
扩展 Extend
混合 Mixins
传递规则集给混合
函数
Guards
导入 import
转义字符
合并
父选择器
Less 用法
Less 插件
程序化使用
安装
安装 lessc 以供全局使用:
通过 NPM (节点程序包管理器)在服务器上安装 Less:
npm install less -g
您还可以在包名称后面添加特定版本。 例如: npm install less@1.6.2 -g
安装到项目开发
npm i less --save-dev
该命令会安装最新的lessc官方版本到项目文件夹,同时会把它添加到项目 package.json 文件的 devDependencies。
Command line usage (命令行使用):
lessc [option option=parameter ...] <source> [destination]
Examples (例如)
# compile bootstrap.less to bootstrap.css
$ lessc bootstrap.less bootstrap.css# compile bootstrap.less to bootstrap.css and minify (compress) the result
$ lessc -x bootstrap.less bootstrap.css
注释
Less 和 CSS 一样,支持两种类型的注释:多行注释和单行注释。只是编译 Less 代码时,单行注释不会显示在 CSS 文件中。
嵌套
Less 嵌套是具有层级关系的 CSS 样式,CSS 的层级是由 HTML 的结构决定的。Less 嵌套用于具有后代关系和父子关系的选择器中,可以减少代码量,并且使代码结构更清晰。
.class1 {.class2 {.class3 {font-size: 30px;color:green;}}
}
变量
Less 使用 @ 符号定义变量,语法是:@变量名:变量值。变量可用作插值,变量插值的语法是:"@{变量名}"。
在样式属性值中使用时,直接用 @variable 即可使用变量;在其他地方,包括选择器名称、属性名称、URL 和 @import 语句使用时,变量必须以插值的形式使用。
@variable: 200px; //定义变量作为样式属性值使用
@classname: .nav_a; //变量值不可用中划线,此变量作为插值用于选择器名称@{classname} { //作为插值 必须加 “{}”width: @variable; //作为属性值直接使用
}
变量作用域: 变量将从本地作用域搜索,如果它们不可用,则编译器将从父作用域搜索。变量可以延迟加载,即使变量尚未声明,也可以使用变量。
操作
Less 支持一些算术运算,例如加号(+),减号( - ),乘法( * )和除法( / ),它们可以对任何数字,颜色或变量进行操作。
@fontSize: 10px; // 定义一个 Less 变量
.myclass {font-size: @fontSize * 2; // 使用乘法(*)运算符操作变量 @fontSize
} // 输出:.myclass { font-size: 20px; }
命名空间和访问器
命名空间用于将 mixins 分组在通用名称下。 使用命名空间可以避免名称冲突,并从外部封装 mixin 组。可以使用 " > " 符号来访问 mixins。
#myNamespace {.button () { 样式... } // 在'#myNamespace'命名空间里面声明 mixin ('.button')
}
#header a {#myNamespace .button();#myNamespace > .button(); // 也可以使用 “>” 符号来访问 mixins ('.button')
}
扩展 Extend
Extend 是一个 Less 伪类,它通过使用 ":extend(选择器)" 在一个选择器中扩展其他选择器样式。扩展放置在规则集中或附加到选择器。它类似于包含一个或多个类的伪类,它们之间用逗号分隔。
.style:extend(.container, .img)
{background: #BF70A5;
}
.container {font-style: italic;
}
.img{font-size: 30px;}// 输出
.style {background: #BF70A5;
}
.container,
.style {font-style: italic;
}
.img,
.style {font-size: 30px;
}
扩展不能检测选择器的重复。
.cont-main{font-size: 30px;
}
.cont-main{font-size: 30px;
}
.cont:extend(.cont-main, .cont-main) {}// 输出
.cont-main,
.cont,
.cont {font-size: 30px;
}
.cont-main,
.cont,
.cont {font-size: 30px;
}
扩展的关键字 "all" ,当最后在扩展参数中标识关键字 "all" 时,Less 将扩展所有和拓展参数相关的样式。
.style.nav,
.nav h3 {color: orange;
}
.nav {&:hover {color: green;}
}
.container:extend(.nav all) {} //扩展所有和 .nav 相关的样式// 编译成css
.style.nav,
.nav h3,
.style.container,
.container h3 {color: orange;
}
.nav:hover,
.container:hover {color: green;
}
混合 Mixins
Mixin 是一组 CSS 属性,允许您将一个类的属性用于另一个类,在 Less 中,可以使用类或id 选择器以及与 CSS 样式相同的方式声明 Mixin 。
.p1{ color:red; } // Mixins
.p2{ .p1; }
.p3{ .p1(); }// 输出结果:
.p1 { color: red; }
.p2 { color: red; }
.p3 { color: red; }
混合可以像函数一样带参数,参数可以使用逗号或分号分隔。当同时使用逗号和分号时,分号用于分隔每一个参数,逗号用于分隔 CSS 列表。
.box-shadow(@x: 0, @y: 0, @height: 3px, @width: 3px) { }
.myclass {.box-shadow(2px, 3px, 4px; 5px);// 传入两个参数,第一个参数为 2px,3px,4px,第二个参数为5px
}
不输出 Mixin:带 " ( ) " 的 Mixin不会输出。
.a(){padding-left: 100px;
}
.myclass{.a;
} // 最终CSS文件输出结果:.myclass { padding-left: 100px; },.a不会输出
命名参数:Mixins 通过使用它们的名称提供参数值而不是位置。 参数没有放置值的任何顺序,它们可以通过名称引用。
.mixin(@color: black; @fontSize: 10px) {color: @color;font-size: @fontSize;
}
.class1 {.mixin(@fontSize: 20px; @color: #F5A9D0);
}
@arguments 和 @rest:当调用 Mixin 时, @arguments 包括所有传递的参数。Mixin 通过使用 ... 提供可变数量的参数。通过在变量名称(@rest)后面放置 ... 为变量赋值参数。
.mixin(@x; @rest...) {// 使用 ... 提供可变数量的参数// @rest 绑定剩余参数// @arguments 绑定的是所有参数,包括@x参数
}
模式匹配:可以通过向 Mixin 传递参数来更改 Mixin 的行为。如果将 @ color-new 的值设置为 dark,则它会以较暗的颜色显示结果,因为 Mixin 定义与 dark 作为第一个参数匹配。
.mixin(dark; @color) {color: darken(@color, 15%);
}
.mixin(light; @color) {color: lighten(@color, 15%);
}
@color-new: dark;
.line {.mixin(@color-new; #FF0000);
}
Mixin 中的变量可以在调用者的作用域中使用,并且是可见的。
混合和函数的工作方式非常相似,Mixin 也可以嵌套,可以接受参数和返回值。
.padding(@x, @y) {@padding: ((@x + @y) / 2); // @padding 会当做返回值
}
.myclass{.padding(80px, 120px); // call to the mixinpadding-left: @padding;
}.outerMixin(@value) { // 混合nestedMixin 会当做返回值.nestedMixin() {font-size: @value;}
}
.myclass {.outerMixin(30);.nestedMixin();
}
传递规则集给混合
分离(detached)规则集合是一组 CSS 属性,嵌套的规则集合,媒体声明或是存储在一个变量中的任何其他东西。你可以将其包含到一个规则集合或其他结构中,它的所有属性将被复制在那里。你也可以使用它作为一个 mixin 参数,并传递它周围的其他任何变量。
// 声明 detached 规则集合
@detached-ruleset: { background: red; };// 使用 detached 规则集合
.top { @detached-ruleset(); } // 编译结果:.top { background: red; }
调用时分离(detached)规则集合后面的圆括号是必须的, @detached-ruleset ; 这样调用是无效的。
当你希望定义一个 mixin 将一个媒体查询中的一个代码块或者一个浏览器不支持的类名抽象出来时很有用。规则集合可以传递规则集给 mixin,所以该 mixin 会包装这些内容。比如:
.desktop-and-old-ie(@rules) {@media screen and (min-width: 1200) { @rules(); }html.lt-ie9 & { @rules(); }
}header {background-color: blue;.desktop-and-old-ie({background-color: red;});
}
分离规则集合可以在它被定义和被调用的地方使用所有变量和混入。换句话说, 定义和调用的作用域对它都是有效的。如果这两个作用域包含相同的变量或混入,声明的作用域中的值优先。
@detached-ruleset: {@msg:declareMsg; // 声明中定义的变量 @msgmsg:@msg;caller-variable: @callerVariable; // 这里变量是 undefined.callerMixin(); // 这里混合是 undefined
};selector {@detached-ruleset(); // 使用分离规则集合@msg:callerMsg; // 调用中定义的变量 @msg (将被忽略)// 需要在分离规则集合内定义变量和混合@callerVariable: value;.callerMixin() {color: red;}
}// 编译结果:
selector {msg: declareMsg;caller-variable: value;color: red;
}
定义分离规则集合体的声明的作用域是独立的。从一个变量复制分离规则集合到另一个不能修改其作用域。规则集合不会获得新的作用域,只是在那里被引用。
@detached-1: { scope-detached: @one @two; };
.one {@one: visible; // 规则集合不能使用 visible.two {@detached-2: @detached-1; // 拷贝/重命名 规则集合 @two: msg;}
}.usePlace {.one > .two(); @detached-2();
}// 编译结果:
NameError: variable @one is undefined
最后,分离规则集合可以通过被解锁(导入)获得到它作用域。
#space {.importer1() {@detached: { scope-detached: @variable; }; // 定义分离规则集合}
}.importer2() {@variable: value; // 解锁分离规则集合能使用这个变量#space > .importer1();// 解锁/导入分离规则集合
}.usePlace {.importer2(); // 第二次解锁/导入分离规则集合@detached();
}// 编译结果:
.usePlace {scope-detached: value;
}
函数
Less 映射具有值操作的 JavaScript 代码,并使用预定义的函数来操纵样式表中的 HTML 元素。Less 提供了许多用于转换颜色,处理字符串和进行算术运算的函数。。
@color: #FF8000;
@width:1.0;
.mycolor{color: @color;width: percentage(@width); // 函数 percentage() 将浮点数转换为百分比字符串
}
// 编译结果:
.mycolor {color: #FF8000;width: 100%;
}
更多类型的函数具体看下面链接:Less 函数参考http://shouce.jb51.net/less/functions/index.htm
Guards
Guards 可以用于在表达式上匹配简单的值或参数数量,类似于 if / else 语句,但是 Less 使用 Guards 而不是 if / else 语句,并执行计算以指定匹配。使用 when 关键字引进了一个 guard序列。此外,default 函数可以用于让一个 Mixin 匹配依赖于其他 Mixin 匹配,然后你可以使用它来创建类似于 else 或者 default 语句(分别属于 if 和 else 结构)的“条件式 Mixins”:
.mixin (@a) when (@a > 0) { ... }
.mixin (@a) when (default()) { ... } // matches only if first mixin does not, i.e. when @a <= 0
Less 包含五个保护比较运算符:<,>,<=,>= 和 =。 您可以使用比较运算符(=)来比较数字,字符串,标识符等,而剩余的运算符只能与数字一起使用。
.mixin (@a) when (@a >= 20px){color:red;
}.myclass { .mixin(20px) } // 输出:.myclass { color: red; }
Less 逻辑运算符使用关键字 and,并使用 not 关键字取消条件。
.mixin (@a) when not (@a< 20px) and not (@a > 50px){font-size: @a;
}
.class1 { .mixin(30px) }// 输出:.class1 { font-size: 30px; }
Less 可以使用类型检查内置函数来确定匹配值类型 。
Guards 可以使用于命名空间,mixins,css 选择器 。
@usedScope: global;
@usedMixin: use;
#namespace when (@usedScope = global) { // 命名空间使用 Guards .mixin (@color) when(@usedMixin = use) { // mixin 使用 Guards .cont when (@color = red) { // CSS 样式使用 Guards background-color: red;color: black;}.style when not (@color = red) { // CSS 样式使用 Guards background-color: blue;color: white;}}
}
p{#namespace .mixin(blue);
}
导入 import
Less 中,可以通过 @import 指令来导入外部文件。
文件拓展名:如果您使用 .css 扩展名,那么它将被视为 CSS ,如果不使用拓展名或者使用其他任何拓展名,那么它将被视为 Less 并将被导入。
@import "style"; // imports the style.less
@import "style.less"; // imports the style.less
@import "style.php"; // imports the style.php as a less file
@import "style.css"; // it will kept the statement as it is
导入选项:可用的关键字如下:
reference | 它使用一个Less文件作为参考,不会输出它。 |
inline | 它使您能够将CSS复制到输出而不进行处理。 |
less | 它会将导入的文件视为常规Less文件,尽管可能是其他文件扩展名。 |
css | 它会将导入的文件视为常规CSS文件,尽管可能是其他文件扩展名。 |
once | 它将只导入一次文件。 |
multiple | 它会多次导入文件。 |
optional | 即使找不到要导入的文件,它仍会继续编译。 |
允许在 @import 语句中使用多个关键字,但必须使用逗号分隔关键字。比如:
@import (less, optional) "custom.css";
转义字符
有时候,当需要引入无效的 CSS 语法或 Less 不能识别的字符,就需要使用转义字符。此时,就可以在字符串前面加一个 ~,并将需要转义的字符串放在 " " 中。格式为:~"anything"。
.weird-element {content: ~"some horrible but needed css hack";
} // 输出:.weird-element { content: some horrible but needed css hack; }
合并
它是 Less 的一个特性,用于添加属性值。目前只支持两种类型的合并,使用“+”标识添加属性值,并以逗号分隔添加的值,使用“+_”标识添加属性值,并以空格分隔添加的值。
// 使用 “+” 标识
.class {box-shadow+: 5px 5px 5px grey;box-shadow+: 0 0 5px #f78181;
} //结果为:.class { box-shadow: 5px 5px 5px grey, 0 0 5px #f78181; }// 使用 “+_” 标识
.class {transform+_: scale(1);transform+_: rotate(2deg);
} //结果为:.class { transform: scale(1) rotate(2deg); }
父选择器
可以使用 & (和号)运算符来引用父选择器,并且在修改类或伪类选择器的应用中非常普遍。
& 将代表最近的选择器以及所有父选择器,通过使用 & 运算符,可以重复引用父选择器,而不使用其名称。
.select {&& {color: #81BEF7;}&, &_class1 {color: #A4A4A4;}
}// 输出
.select.select {color: #81BEF7;
}
.select,
.select_class1 {color: #A4A4A4;
}
将 & 后置,可以改变选择器的顺序,将当前的选择器提到父级。
.side{div&{color:cyan;}
}
// 输出
div.side {color: cyan;
}
组合爆炸:当多个同级选择器用“,”隔开时,其子级使用连续多个 & 时,例如 &+& 或 &-&等,会生成所有可能的组合。
div,p{&+&{color:red;}
}
// 输出为
div + div,
div + p,
p + div,
p + p {color: red;
}
Less 用法
Less 插件
在 command line 中使用插件,首先需要安装插件,以 less-plugin-clean-css 插件为例:
npm install -g less-plugin-clean-css
然后通过 Lessc 命令使用插件,格式为:
lessc --plugin=PLUGIN=OPTIONS# 以 less-plugin-clean-css 插件为例
lessc --plugin=less-plugin-clean-css="advanced"
如果插件名字以“less-plugin”开头,可以使用简便写法,还以 less-plugin-clean-css 插件为例:
lessc --clean-css="advanced"
在代码中使用插件,以 less-plugin-clean-css 为例:
var LessPluginCleanCSS = require('less-plugin-clean-css'),
cleanCSSPlugin = new LessPluginCleanCSS({advanced: true});
less.render(lessString, { plugins: [cleanCSSPlugin] }).then(function(output) {},function(error) {}
);
在浏览器使用插件,在 less.js 脚本之前,应该先引入插件对应的 JavaScript 文件。
<script src="plugin.js"></script>
<script>
less = { plugins: [plugin]
};
</script>
<script src="less.min.js"></script>
程序化使用
进入 less 的切入点是 less.render 函数,使用格式如下:
less.render(lessInput, options).then(function(output) {// output.css = string of css// output.map = string of sourcemap// output.imports = array of string filenames of the imports referenced},function(error) {});// or...less.render(lessInput, options, function(error, output) {})
您可以通过添加侦听器来访问日志,如下面的格式所示:
less.logger.addListener({debug: function(msg) {},info: function(msg) {},warn: function(msg) {},error: function(msg) {}
});
Less CSS 预处理器相关推荐
- 前端CSS预处理器Sass
前面的话 "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...
- 您详细比较三个 CSS 预处理器(框架):Sass、LESS 和 Stylus
2019独角兽企业重金招聘Python工程师标准>>> CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS ...
- 初识css预处理器:Sass、LESS
这篇文章是初步介绍css预处理的,详细学习请移步官网~ sass中文文档:https://www.sass.hk/docs less中文文档:http://lesscss.cn/ 什么是css预处理器 ...
- 使用CSS预处理器Less
前天写了一篇文章,关于如何使用Harp来加快人的开发效率,在Mac系统和Linux系统上测试是没有问题的,但没有在Windows上测试,使用Windows的刚入门的前端工程师,安装Harp失败后,不知 ...
- 再谈 CSS 预处理器
CSS 预处理器是什么?一般来说,它们基于 CSS 扩展了一套属于自己的 DSL,来解决我们书写 CSS 时难以解决的问题: 语法不够强大,比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器: ...
- css预处理器sass使用教程(多图预警)
css预处理器赋予了css动态语言的特性,如变量.函数.运算.继承.嵌套等,有助于更好地组织管理样式文件,以及更高效地开发项目.css预处理器可以更方便的维护和管理css代码,让整个网页变得更加灵活可 ...
- Sass:一种CSS预处理器语言
http://sass-lang.com/ Sass是一种CSS预处理器语言,通过编程方式生成CSS代码.因为可编程,所以操控灵活性自由度高,方便实现一些直接编写CSS代码较困难的代码. 同时,因为S ...
- [css] 你有用过CSS预处理器吗?喜欢用哪个?原理是什么?
[css] 你有用过CSS预处理器吗?喜欢用哪个?原理是什么? 它能让你的CSS具备更加简洁.适应性更强.可读性更强.层级关系更加明显.更易于代码的维护等诸多好处. CSS预处理器种类繁多,目前Sas ...
- 009 - CSS预处理器less sass SAML SSO 单点登录 websocket socket.io
009_css预处理器less sass saml sso 单点登录 websocket## less 安装: npm install -g less 命令: lessc style.less sty ...
- LESS是一个CSS预处理器,跨浏览器友好,提供诸如变量,函数, mixins 和操作等功能,可以构建动态CSS...
什么是LESS? LESS是一个CSS预处理器,可以为网站启用可自定义,可管理和可重用的样式表. LESS是一种动态样式表语言,扩展了CSS的功能. LESS也是跨浏览器友好. CSS预处理器是一种脚 ...
最新文章
- 聊聊flink的NetworkEnvironmentConfiguration
- 贪心 Codeforces Round #236 (Div. 2) A. Nuts
- Jupyter Notebook——设置Jupyter Notebook默认目录
- 思科配置计算机ip地址子网掩码,计算机系统与网络技术IP地址 子网掩码 主机号等计算复习...
- MyCms自媒体内容管理系统 v1.6.0.1
- 特斯拉否认推出16万元电动车 近期全球多地曝召回
- Github图片无法打开的问题解决【2020.07.20更新】
- java苹果沙盒验证参数问题_php – iOS7 – 收据未在沙盒验证 – 错误21002(java.lang.IllegalArgumentException)...
- oracle公司部门划分,Oracle数据库4
- 团队-学生成绩管理-模块开发过程
- 【总结——HTTP协议】
- 堆排序时间复杂度计算
- Java中遍历Map集合的3种方式
- CentOS安装/卸载Anaconda(图文详解)
- 免费公网动态IP方案
- 给学妹写C程——中国海洋大学C语言程序设计课作业(一)
- 微信小游戏实现语音识别(超详细)
- Hive MetaStore服务增大内存
- 3.1抽象工厂[转]
- UG背景颜色修改和截图