CSS 需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用,尤其对于非前端开发工程师来讲,往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码,造成这些困难的很大原因源于 CSS 是一门非程序式语言,没有变量、函数、SCOPE(作用域)等概念。为了方便前端开发的工作量,出现了less.
less的使用注意事项
less使用.less
作为文件后缀。通过第三方工具,可以一键或者实时编译成对应的css文件。也就是说:实际项目中,我们编辑的是.less
文件,但引用时依旧像往常一样引用.css
文件。通过第三方工具(例如Koala),可以实现.less
文件一发生改变,就生成同名的.css
文件。
LESS的基础语法基本上分为以下几个方面:变量、混合(Mixins)、嵌套规则、运算、函数、作用域等
变量
以 @
开头 定义变量,并且使用时 直接 键入 @
名称。
变量的好处是显而易见的,在平时工作中,我们就可以把 常用的变量 封装到一个文件中,这样利于代码组织维护。 用以下导入方法
注意,由于变量只能定义一次,其本质就是“常量”;
1.属性值作为变量:@变量名:值;
//定义变量(全局变量)
@COLOR:#ff0000;
@WIDTH:200px;
div{
background:@COLOR;
padding:@WIDTH;
}
//编译后的css
div{
background: #ff0000;
padding: 200px;
}
2.选择器作为变量
@mySelector: #wrap;
@Wrap: wrap;
@{mySelector}{ //变量名 必须使用大括号包裹
color: #999;
width: 50%;
}
.@{Wrap}{
color:#ccc;
}
#@{Wrap}{
color:#666;
}
// 编译后的 CSS
#wrap{
color: #999;
width: 50%;
}
.wrap{
color:#ccc;
}
#wrap{
color:#666;
}
3.属性名作为变量
@borderStyle: border-style;
@Soild:solid;
#wrap{
@{borderStyle}: @Soild;//变量名 必须使用大括号包裹
}
// 编译后的 CSS
#wrap{
border-style:solid;
}
4.路径作为变量 项目结构改变时,修改其变量即可
@images: "../img";//需要加引号
body {
background: url("@{images}/dog.png");//变量名 必须使用大括号包裹
}
// 生成的 CSS
body {
background: url("../img/dog.png");
}
5.声明变量
- 结构: @name: { 属性: 值 ;};
- 使用:@name();
@background: {background:red;};
#main{
@background();
}
@Rules:{
width: 200px;
height: 200px;
border: solid 1px red;
};
#con{
@Rules();
}
//生成的 CSS
#main{
background:red;
}
#con{
width: 200px;
height: 200px;
border: solid 1px red;
}
6.用变量定义变量 解析的顺序是从后向前逐层解析。
@fnord: "I am fnord.";
@var: "fnord";
#wrap::after{
content: @@var; //将@var替换为其值 content:@fnord;
}
/* 生成的 CSS */
#wrap::after{
content: "I am fnord.";
}
7.变量的作用域。一句话,就近原则;和js的作用域一样,即内部的变量可以覆盖全局变量;或者是相同的变量,后面的值会覆盖前面声明的。
less内容
@var: red;
#page {
@var: white;
#header {
color: @var; // white
}
}
/* Less */
@var: @a;
@a: 100%;
#wrap {
width: @var;
@a: 9%;
}
/* 生成的 CSS */
#wrap {
width: 9%;
}
8.变量的运算
- 加减法时 以第一个数据的单位为基准
- 乘除法时 注意单位一定要统一
/* Less */
@width:300px;
@color:#222;
#wrap{
width:@width-20;
height:@width-20*5;
margin:(@width-20)*5;
color:@color*2;
background-color:@color + #111;
}
/* 生成的 CSS */
#wrap{
width:280px;
height:200px;
margin:1400px;
color:#444;
background-color:#333;
}
嵌套
& :代表的上一层选择器的名字,此例便是header
/* Less */
#header{
&:after{注意:不能省略&,如果省略会给每一个子元素添加一个after。
content:"Less is more!";
}
.title{
font-weight:bold;
}
&_content{//理解方式:直接把 & 替换成 #header
margin:20px;
}
}
/* 生成的 CSS */
#header::after{
content:"Less is more!";
}
#header .title{ //嵌套了
font-weight:bold;
}
#header_content{//没有嵌套!
margin:20px;
}
混合
1.无参数方法 方法犹如 声明的集合,使用时 直接键入名称即可
/* Less */
.card { // 等价于 .card()
background: #f6f6f6;
-webkit-box-shadow: 0 1px 2px rgba(151, 151, 151, .58);
box-shadow: 0 1px 2px rgba(151, 151, 151, .58);
}
#wrap{
.card;//等价于.card();
}
/* 生成的 CSS */
#wrap{
background: #f6f6f6;
-webkit-box-shadow: 0 1px 2px rgba(151, 151, 151, .58);
box-shadow: 0 1px 2px rgba(151, 151, 151, .58);
}
要点:
`.` 与 `#` 皆可作为 方法前缀。
方法后写不写 `()` 看个人习惯。
2.默认参数方法
Less 可以使用默认参数,如果 没有传参数,那么将使用默认参数。
@arguments
犹如 JS 中的 arguments
指代的是 全部参数。
传的参数中 必须带着单位。
/* Less */
.border(@a:10px,@b:50px,@c:30px,@color:#000){
border:solid 1px @color;
box-shadow: @arguments;//指代的是 全部参数
}
#main{
.border(0px,5px,30px,red);//必须带着单位
}
#wrap{
.border(0px);
}
#content{
.border;//等价于 .border()
}
/* 生成的 CSS */
#main{
border:solid 1px red;
box-shadow:0px,5px,30px,red;
}
#wrap{
border:solid 1px #000;
box-shadow: 0px 50px 30px #000;
}
#content{
border:solid 1px #000;
box-shadow: 10px 50px 30px #000;
}
3.方法的匹配模式
与 面向对象中的多态 很相似
/* Less */
.triangle(top,@width:20px,@color:#000){
border-color:transparent transparent @color transparent ;
}
.triangle(right,@width:20px,@color:#000){
border-color:transparent @color transparent transparent ;
}
.triangle(bottom,@width:20px,@color:#000){
border-color:@color transparent transparent transparent ;
}
.triangle(left,@width:20px,@color:#000){
border-color:transparent transparent transparent @color;
}
.triangle(@_,@width:20px,@color:#000){
border-style: solid;
border-width: @width;
}
#main{
.triangle(left, 50px, #999)
}
/* 生成的 CSS */
#main{
border-color:transparent transparent transparent #999;
border-style: solid;
border-width: 50px;
}
要点
- 第一个参数 `left` 要会找到方法中匹配程度最高的,如果匹配程度相同,将全部选择,并存在着样式覆盖替换。
- 如果匹配的参数 是变量,则将会匹配,如 `@_` 。
得到返回变量的返回值
.public(@pd1;@pd2){
@s:(@pd1+@pd2)
}
div{
.public(10;10);
padding:@s;
}
//生成的css
div {
padding: 20;
}
4.使用important: 相当于这个方法中的每一个属性都设置了一遍important,不允许覆盖
.border{
border: solid 1px red;
margin: 50px;
}
#main{
.border() !important; //border里面的每个属性都会被important
}
/* 生成后的 CSS */
#main {
border: solid 1px red !important;
margin: 50px !important;
}
5.继承属性:extend是less的一个伪类。它可以继承所匹配声明中的全部样式。
.mainBg{
background: red;
.fontSize{
color: #fff;
}
}
#main{
background: green;
width: 100px;
height: 100px;
&:extend(.mainBg);
}
#con{
background:blue;
width: 100px;
height: 100px;
&:extend(.mainBg .fontSize);
}
#wrap:extend(.mainBg all) {
width: 100px;
height: 100px;
font-size: 30px;
}
//生成的css
.mainBg,
#main,
#wrap {
background: red;
}
.mainBg .fontSize,
#con,
#wrap .fontSize {
color: #fff;
}
#main {
background: green;
width: 100px;
height: 100px;
}
#con {
background: blue;
width: 100px;
height: 100px;
}
#wrap {
width: 100px;
height: 100px;
font-size: 30px;
}
6.导入
在less文件中可以引入其他的less文件。使用关键字import。
导入 less 文件 可省略后缀
import "main";
//等价于
import "main.less";
@import 的位置可随意放置
#main{
font-size:15px;
}
@import "style";
加reference属性,不会编译该引入文件,但是可以使用该文件的变量Less 中 最强大的特性
使用 引入的 Less 文件,但不会 编译它。
/* Less */
@import (reference) "bootstrap.less";
#wrap:extend(.navbar all){}
加once属性,表明相同的文件只会被导入一次,而随后的导入文件的重复代码都不会解析。
@import (once) "foo.less";
@import (once) "foo.less"; // this statement will be ignored
加multiple属性,允许导入多个同名文件
/* Less */
// file: foo.less
.a {
color: green;
}
// file: main.less
@import (multiple) "foo.less";
@import (multiple) "foo.less";
/* 生成后的 CSS */
.a {
color: green;
}
.a {
color: green;
}
7.避免编译
less里面有一个避免编译,有时候我们需要输出一些不正确的css语法或者使用less不认识的专有语法。要输出这样的值我们可以在字符串前加上一个~
这个calc,有时候我们是让浏览器计算,不是让less计算
.test_03{
width: 300px;
height: ~'calc(300px - 30px)';
}
//编译后
.test_03 {
width: 300px;
height: calc(300px - 30px);
}
8、注释
/* */ CSS原生注释,会被编译在 CSS 文件中。
/ / Less提供的一种注释,不会被编译在 CSS 文件中
css仅支持块注释。less里块注释和行注释都可以使用: