LESS
阅读 (389)一、Less 概述
-
维护css弊端
CSS 是一门非程序式语言,没有变量、函数、SCOPE(作用域)等概念。
CSS 需要书写大量看似没有逻辑的代码,CSS 冗余度是比较高的。
不方便维护及扩展,不利于复用。
CSS 没有很好的计算能力
非前端开发工程师来讲,往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码项目。
-
说明
Less(LeanerStyle Sheets 的缩写)是一门 CSS扩展语言,也成为CSS预处理器。
做为 CSS的一种形式的扩展,它并没有减少CSS的功能,而是在现有的CSS语法上,为CSS加入程序式语言的特性。
它在CSS 的语法基础之上,引入了变量,Mixin(混入),运算以及函数等功能,大大简化了 CSS 的编写,并且降低了 CSS的维护成本,就像它的名称所说的那样,Less可以让我们用更少的代码做更多的事情。
LESS 是动态的样式表语言,通过简洁明了的语法定义,使编写 CSS 的工作变得非常简单,本质上,LESS 包含一套自定义的语法及一个解析器。
-
常见的CSS预处理器:Sass、Less、Stylus
一句话:Less是一门 CSS 预处理语言,它扩展了CSS的动态特性。
二、Less 安装
-
步骤
①安装nodejs,可选择版本(8.0),网址:http://nodejs.cn/download/
②检查是否安装成功,使用cmd命令(win10是window+r 打开运行输入cmd) —输入“node –v”查看版本即可
③基于nodejs在线安装Less,使用cmd命令“npm install -g less”即可
④检查是否安装成功,使用cmd命令“ lessc -v ”查看版本即可
⑤命令行编译 lessc path/xxx.less path/xxx.css
三、Less 编译
-
说明
浏览器只能识别CSS,LESS只是用来提升CSS可维护性的一个工具,所最终需要将LESS编译成CSS。两种种方式:命令行编译方式和插件编译方式。
命令行编译方式
-
步骤
命令行编译
lessc path/xxx.less path/xxx.css
sublime text—插件编译方式
-
说明
通过命令行编译效率比较低下,一般都会借助于编辑器来完成编译,以sublime_text为例,sublime_text默认并不支持LESS的编译操作,需要安装插件实现。
-
步骤
- 执行npm install -g less-plugin-clean-css(使用sublime text才用)
- ctrl+shit+p打开命令面板
- 输入install package然后回车
- 安装 LESS、lessc、Less2Css三个插件
- alt+s快捷键即可实现编译
VScode—插件编译方式
-
说明
Easy LESS 插件用来把less文件编译为css文件
安装完毕插件,重新加载下 vscode。
只要保存一下Less文件,会自动生成CSS文件。
四、Less 变量
-
说明
变量是指没有固定的值,可以改变的。因为我们CSS中的一些颜色和数值等经常使用。
@变量名:值;
- 命名规则
- 必须有@为前缀
- 不能包含特殊字符
- 不能以数字开头
- 大小写敏感
@color: pink;
五、Less 混合(Mixins)
-
说明
混合(Mixin)是一种将一组属性从一个规则集包含(或混入)到另一个规则集的方法。假设我们定义了一个类(class)如下:
.yellow{ color: yellow; }
如果我们希望在其它规则集中使用这些属性呢?没问题,我们只需像下面这样输入所需属性的类(class)名称即可,如下所示:
.div{ font-size: 14px; .yellow(); } .span{ font-size: 12px; .yellow(); }
.bordered
类所包含的属性就将同时出现在#menu a
和.post a
中了。(注意,你也可以使用#ids
作为 mixin 使用。)#green{ color: green; } .div{ font-size: 14px; #green(); } .span{ font-size: 12px; #green() }
六、Less 嵌套(Nesting)
-
说明
Less 提供了使用嵌套(nesting)代替层叠或与层叠结合使用的能力。假设我们有以下 CSS 代码:
#header {
color: black;
}
#header .nav{
font-size: 12px;
}
#header .logo {
width: 300px;
}
用 Less 语言我们可以这样书写代码:
#header {
color: black;
.nav{
font-size: 12px;
}
.logo {
width: 300px;
}
}
用 Less 书写的代码更加简洁,并且模仿了 HTML 的组织结构。
如果遇见 (交集|伪类|伪元素选择器) ,利用&进行连接
还可以使用此方法将伪选择器(pseudo-selectors)与混合(mixins)一同使用。下面是一个经典的 clearfix 技巧,重写为一个混合(mixin) (&
表示当前选择器的父级):
.clearfix {
display: block;
zoom: 1;
&:after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
}
a:hover{
color:red;
}
a{
&:hover{
color:red;
}
}
七、Less 运算(Operations)
-
说明
任何数字、颜色或者变量都可以参与运算。就是Less提供了加(+)、减(-)、乘(*)、除(/)算术运算。
/*Less 里面写*/ @witdh: 10px + 5; div { border: @witdh solid red; } /*生成的css*/ div { border: 15px solid red; } /*Less 甚至还可以这样 */ width: (@width + 5) * 2;
- 注意
- 乘号(*)和除号(/)的写法
- 运算符中间左右有个空格隔开 1px + 5
- 对于两个不同的单位的值之间的运算,运算结果的值取第一个值的单位
- 如果两个值之间只有一个值有单位,则运算结果就取该单位
八、Less calc() 特例
-
说明
为了与 CSS 保持兼容,
calc()
并不对数学表达式进行计算,但是在嵌套函数中会计算变量和数学公式的值。
@var: 50vh/2;
width: calc(50% + (@var - 20px)); // 结果是 calc(50% + (25vh - 20px))
九、转义(Escaping)
-
说明
转义(Escaping)允许你使用任意字符串作为属性或变量值。任何
~"anything"
或~'anything'
形式的内容都将按原样输出。
@min768: ~"(min-width: 768px)";
.element {
@media @min768 {
font-size: 1.2rem;
}
}
编译为:
@media (min-width: 768px) {
.element {
font-size: 1.2rem;
}
}
注意,从 Less 3.5 开始,可以简写为:
@min768: (min-width: 768px);
.element {
@media @min768 {
font-size: 1.2rem;
}
}
在 Less 3.5+ 版本中,许多以前需要“引号转义”的情况就不再需要了。
十、函数(Functions)
-
说明
Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。这些函数在 Less 函数手册 (https://less.bootcss.com/functions/)中有详细介绍。
函数的用法非常简单。下面这个例子将介绍如何利用 percentage 函数将 0.5 转换为 50%,将颜色饱和度增加 5%,以及颜色亮度降低 25% 并且色相值增加 8 等用法:
@base: #f04615;
@width: 0.5;
.class {
width: percentage(@width); // returns `50%`
color: saturate(@base, 5%);
background-color: spin(lighten(@base, 25%), 8);
}
-
参见:函数手册
https://less.bootcss.com/functions/
十一、命名空间和访问符
(不要和 CSS @namespace
或 namespace selectors 混淆了)。
-
说明
有时,出于组织结构或仅仅是为了提供一些封装的目的,你希望对混合(mixins)进行分组。你可以用 Less 更直观地实现这一需求。假设你希望将一些混合(mixins)和变量置于
#bundle
之下,为了以后方便重用或分发:
#bundle() {
.button {
display: block;
border: 1px solid black;
background-color: grey;
&:hover {
background-color: white;
}
}
.tab { ... }
.citation { ... }
}
现在,如果我们希望把 .button
类混合到 #header a
中,我们可以这样做:
#header a {
color: orange;
#bundle.button(); // 还可以书写为 #bundle > .button 形式
}
-
注意
如果不希望它们出现在输出的 CSS 中,例如
#bundle .tab
,请将()
附加到命名空间(例如#bundle()
)后面。
十二、映射(Maps)
- 说明
从 Less 3.5 版本开始,你还可以将混合(mixins)和规则集(rulesets)作为一组值的映射(map)使用。
#colors() {
primary: blue;
secondary: green;
}
.button {
color: #colors[primary];
border: 1px solid #colors[secondary];
}
输出符合预期:
.button {
color: blue;
border: 1px solid green;
}
十三、作用域(Scope)
-
说明
Less 中的作用域与 CSS 中的作用域非常类似。首先在本地查找变量和混合(mixins),如果找不到,则从“父”级作用域继承。
@var: red;
#page {
@var: white;
#header {
color: @var; // white
}
}
与 CSS 自定义属性一样,混合(mixin)和变量的定义不必在引用之前事先定义。因此,下面的 Less 代码示例和上面的代码示例是相同的:
@var: red;
#page {
#header {
color: @var; // white
}
@var: white;
}
十四、注释(Comments)
-
说明
块注释和行注释都可以使用:
/* 一个块注释
* style comment! */
@var: red;
// 这一行被注释掉了!
@var: white;
十五、导入(Importing)
-
说明
“导入”的工作方式和预期的一样。你可以导入一个
.less
文件,此文件中的所有变量就可以全部使用了。如果导入的文件是.less
扩展名,则可以将扩展名省略掉:
@import "library"; // library.less
@import "typo.css";