项目中less常用的一些东西

站长

2022年12月07日 21:16 · 阅读数 22

一、less简介

LESSCSS是一种动态样式语言，简称LESS，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护 LESS可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。

使用文档：

Less中文网 lesscss.cn/ Less快速入门 www.bootcss.com/p/lesscss/

二、使用less

直接使用：

官网下载less.js：lesscss.cn/#download-o… 编写Less（类似于CSS），但style标记的type属性必须写为text/less（内部），link标记的rel属性必须写为stylesheet/less（外部，此时必须通过web形式访问）在Less后链接less.js文件

编译为CSS后使用：安装npm：nodejs.org 安装lessc（less compile）安装sublime插件less2css

三、语法

1、变量

LESS中使用@定义变量，然后在需要的时候调用变量，如：@name:值; 变量不仅可用于值，还可以用于选择器、URL、样式属性、变量嵌套等变量的加载使用的是Lazy Loading模式，无需先定义再使用 LESS中对于变量名称没有JS那样严格的规范，如：@a-z、@22都是合法的变量名称，建议按照规范起名

简单变量定义

@color: #f00;
h1{color:@color;}
#red{color:@color;}

生成

h1{color:#f00;}
#red{color:#f00;}

注意也有可能生成 color:red;

选择器变量定义

@selector1: myabc;
.@{selector1}{
	color:#f00;
}

生成

.myabc{
	color:#f00;
}

注意，除了简单变量外，其他变量在调用时都需要加{}

URL变量定义

@path: “../imgs”;
.btn{
	background:url("@{path}/1.jpg”);
}

生成

.btn{
	background:url(../imgs/1.jpg)
}

属性变量定义

@prop: color;
.box{
	@{prop}:red;
	background-@{prop}:blue;
}

生成

.box{
	color:red;
	background-color:blue
}

变量嵌套定义

@foo: #f00;
@too: foo;
.box{
	color:@@too;
}

生成 .box{ color:red; }

延迟加载Lazy Loading

.box{
	color:@too;
	@other:red;
}
@too:@other;
@other:green;

生成

.box{
	color:red;
}

2、混合mixin

在 LESS 中我们可以定义一些通用的属性集为一个class，然后在另一个class中去调用这些属性
.bordered {
	border-top: dotted 1px black; 
	border-bottom: solid 2px black; 
}
在其他class中引入那些通用的属性集，方式如下
#menu a { color: #111; .bordered; }
混合可以将一个定义好的class轻松的引入到另一个class中，从而实现样式的复用

带参数的混合

在Less中可以定义带一个或多个带参数的属性集合，并指定缺省值，在调用可以传递参数或使用缺省值，就像使用函数一样。如：
.ww(@w){width:@w}
div{.ww(200px)}
得到：div{width:200px}

.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
    -webkit-box-shadow: @shadow;
    box-shadow: @shadow;
}
div{.box-shadow;}
得到：div{
-webkit-box-shadow:0 1px 3px rgba(0,0,0,.25);
box-shadow:0 1px 3px rgba(0,0,0,.25)
}

使用导引表达式的混合

LESS通过导引混合来实现条件判断，如：
.mixin (@a) when (@a >= 50) { 
	background-color: black; 
} 
.mixin (@a) when (a < 50) {
	 background-color: white; 
}
 .mixin (@a) { 
	color: @a;
 }

3、运算

任何数字、颜色或者变量都可以参与运算，如：
@base: 5%;
@filler: @base * 2;
@other: @base + @filler; 
color: #888 / 4; 
background-color: @base-color + #111; 
LESS 可以分辨出颜色和单位
@var: 1px + 5; 
得到6px.

4、嵌套规则

LESS 可以让我们以嵌套的方式编写层叠样式，先看下面这段CSS代码
#header { color: black; } 
#header .navigation { font-size: 12px; } 
#header .logo { width: 300px; } 
#header .logo:hover { text-decoration: none; }

在 LESS 中可以这样写，代码更简洁更清晰
#header { color: black;
	 .navigation { font-size: 12px } 
	.logo { width: 300px; 
		    &:hover { text-decoration: none }
	 }
 }

5、继承

继承:extend
继承被附在选择器后面或放置在规则集（即具体定于样式处），它看起来就像是一个在关键字extend后具有可选参数的伪类
.parentClass{  
    color:red;  
}  
.subClassOne{  
    &:extend(.parentClass);  
}  
.subClassTwo:extend(.parentClass){  
      
}  
得到：.parentClass, .subClassOne, .subClassTwo {  
  color: red;  
}

6、注释

注释类型
// 单行注释
/* 多行注释 */

7、导入@import

可以使用@import导入其他文件（.less或.css）
如果导入的是.less文件，则可以省略扩展名
@import  “library”;  //library.less
@import  “style.css”;