Less使用简介
一、简介
Less是CSS预处理语言,它扩展了CSS语言,增加了变量(variables)、混合(Mixins)、函数(functions)等,使CSS更容易维护和扩展。Less可以运行在Node环境或浏览器中。
1、Node环境
- 安装
npm install -g less
安装css
压缩插件
npm install -g less-plugin-clean-css
- 命令行
lessc styles.less styles.css
//或
lessc styles.less
使用压缩插件
lessc --clean-css styles.less
//或
lessc --clean-css styles.less styles.min.css
- 代码
npm init
npm install less --save-dev
study-less.js
:
var less = require('less');
var css = '.class{ width: (1 + 1)px}';
var options = {
compress: true
};
less.render(css, options, function(e, output){
console.log(output.css);
});
2、浏览器环境
- HTML
下载less.js
文件并引入或使用CDN:
<!DOCTYPE html>
<html>
<head>
<title>Less</title>
<meta charset='utf-8'/>
<link rel="stylesheet/less" type="text/css" href="styles.less"/>
<script>
//配置(options)通过定义全局变量`less`实现,需要在引入`less.js`之前定义
less = {
env: "development"
};
</script>
<script src="less.js"></script>
</head>
<body>
<main>
<h1>Study Less</h1>
<article>
<h2>Lesson one</h2>
<p class="post">It's <a>CSS</a>, with just a little more.</p>
</article>
</main>
</body>
</html>
- LESS
@height: 200px;
@width: @height * 2;
main{
width: @width;
height: @height;
}
.bordered{
border: dotted 1px lightgreen;
}
h2{
color: #E5E5E5 - #222;
.bordered();
}
.post a{
color: red;
.bordered();
}
- Watch Mode
在development
模式下,使用less.watch()
可开启监视模式,在监视模式下,修改.less
文件后,页面会自动应用修改后的样式:
<script>less = { env: 'development'};</script>
<script src="less.js"></script>
<script>less.watch();</script>
- 效果
二、语法
1、变量(Variables)
@width: 10px;
@height: @width + 10px;
#header{
width: @width;
height: @height;
}
使用lessc
处理后如下:
#header {
width: 10px;
height: 20px;
}
2、混入(Mixins)
混入是将一个规则集的一组属性设置到另一个规则集中。
.bordered{
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
使用混入:
#menu a{
color: #FFF;
.bordered();
}
.post a{
color: red;
.bordered();
}
使用lessc
处理后如下:
#menu a {
color: #FFF;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
.post a {
color: red;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
3、嵌入(Nesting)
使用嵌入可以代替级联或与级联结合使用,嵌入使css
代码更简洁,结构上模仿自HTML
。
#header{
color: black;
.navigation{
font-size: 12px;
}
.logo{
width: 300px;
}
}
使用lessc
处理后如下:
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
&
表示当前选择器的父级:
.clearfix{
display: block;
zoom: 1;
&:after{
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
}
使用lessc
处理后如下:
.clearfix {
display: block;
zoom: 1;
}
.clearfix:after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
@
规则和冒泡
@
规则(例如:@media
、@supprots
)可以和其他选择器一样被嵌入。
@
规则位于顶部,相对于同一规则集中的其他元素的顺序保持不变,这也被叫做冒泡。
.component{
width: 300px;
@media(min-width: 768px){
width: 600px;
@media(min-resolution: 192dpi){
background-image: url(/img/retina2x.png);
}
}
@media(min-width: 1280px){
width: 800px;
}
}
使用lessc
处理后如下:
.component {
width: 300px;
}
@media (min-width: 768px) {
.component {
width: 600px;
}
}
@media (min-width: 768px) and (min-resolution: 192dpi) {
.component {
background-image: url(/img/retina2x.png);
}
}
@media (min-width: 1280px) {
.component {
width: 800px;
}
}
4、运算(Operations)
可以对任何数字、颜色或变量进行算数学运算(+
、-
、*
、/
),运算时会考虑到单位:因此在数字的加、减或比较前会转换为相同的单位,最终结果的单位类型由最左边的单位决定。如果不能转换或转换没有意义,则单位被忽略,例如:px
到cm
或rad
(弧度)到%
是不能转换的。
@conversion-1: 5cm + 10mm; //6cm
@conversion-2: 2 - 3cm - 5mm; //-1.5cm
@incompatible-units: 2 + 5px -3cm;
@base: 5%;
@filter: @base * 2;//10%
@other: @base + @filter;//15%
在乘法或除法时,不会做单位的转换。
@base: 2cm * 3mm;//6cm
@color: #224488 / 2;//#112244
@background-color: #112244 + #111;//#223355
calc()
函数并不对数学表达式进行计算,但在嵌套函数中会计算变量和数学公式的值。
- 样例
@base: 5%;
@var: 50vh/2;
@incompatible-units: 2 + 5px -3cm;
.operations{
width: 5cm + 10mm;
height: 2 - 3cm - 5mm;
border-width: 2 + 5px -3cm;
border-radius: @base * 2;
min-height: calc(50% + (@var - 20px));
max-width: @incompatible-units;
color: #224488 / 2;
background-color: #112244 + #111;
}
使用lessc
处理后如下:
.operations {
width: 6cm;
height: -1.5cm;
border-width: 7px -3cm;
border-radius: 10%;
min-height: calc(50% + (25vh - 20px));
max-width: 7px -3cm;
color: #112244;
background-color: #223355;
}
5、转义(Escaping)
转义允许使用任何字符串作为属性或变量的值,格式为:
//引号可以为单引号也可以为双引号
~'any string'
引号内的内容会保留原样。
@min768: ~"(min-width: 768px)";
.element{
@media @min768{
font-size: 1.2rem;
}
}
使用lessc
处理后如下:
@media (min-width: 768px) {
.element {
font-size: 1.2rem;
}
}
6、函数(Functions)
Less提供了多种函数用于算术运算、转换颜色、处理字符串等。
@base: #f04615;
@width: 0.5;
.class{
width: percentage(@width);
//以绝对量增加HSL颜色空间中颜色的饱和度
color: saturate(@base, 5%);
content: replace("One + one = 4", "one", "2", "gi");
}
使用lessc
处理后如下:
.class {
width: 50%;
color: #f6430f;
content: "2 + 2 = 4";
}
7、命名空间和访问器(Namespaces and Accessors)
使用命名空间可以将混入(mixin)分组或封装,能避免名称冲突。
在#bundle
下封装一些混入和变量,以便以后重用或分发:
#bundle(){
.button{
display: block;
border: 1px solid black;
background-color: grey;
&:hover{
background-color: white;
}
}
.tab{
font-size: 20px;
opacity: 0.8;
}
.citation{}
}
#header a{
color: orange;
#bundle.button();
//或
#bundle > .tab;
}
使用lessc
处理后如下:
#header a {
color: orange;
display: block;
border: 1px solid black;
background-color: grey;
font-size: 20px;
opacity: 0.8;
}
#header a:hover {
background-color: white;
}
8、映射(Maps)
从Less 3.5开始,可以将命名空间和[]
语法结合,使规则集或混入转为映射。
#colors(){
primary: blue;
secondary: green;
}
.button{
color: #colors[primary];
border: 1px solid #colors[secondary];
}
使用lessc
处理后如下:
.button {
color: blue;
border: 1px solid green;
}
9、作用域(Scope)
Less的作用域和CSS非常类似,变量和混入首先会在本地查找,如果找不到,则从父作用域查找。
@var: red;
#page{
@var: white;
#header{
color: @var;
}
}
与CSS自定义属性一样,混入和变量的定义不必放在使用之前:
@var: red;
#page{
#header{
color: @var;
}
@var: white;
}
上面两个例子使用lessc
处理后如下:
#page #header {
color: white;
}
10、注释(Comments)
Less既支持行注释也支持块注释:
/*
line1: comment
line2: comment
*/
@var: red;
//single
@color: blue;
10、导入(Importing)
可以使用@import
导入Less或CSS文件。如果导入的是.less
文件,则导入之后就可以使用该文件中的所有变量等内容,且扩展名可以省略。
@import "library"; // library.less
@import "typo.css";