Less的基本使用

最新推荐文章于 2023-07-19 11:23:10 发布

Twelve--

最新推荐文章于 2023-07-19 11:23:10 发布

阅读量731

点赞数

分类专栏： CSS 文章标签： css less

原文链接：https://segmentfault.com/a/1190000012360995?utm_source=tag-newest

版权

CSS 专栏收录该内容

24 篇文章 2 订阅

订阅专栏

常用的预处理语言 Sass Less Stylus
使用Less两种方式

引入less <link rel="stylesheet/less" href="xxx.less">
然后引入 less.js 文件
使用 npm 安装 npm install -g less
在项目中使用Webpack 需要配合less-loader处理

一变量
二嵌套
三混合方法
四继承
五导入
六函数
七其他

一.变量 变量是常量，只能定义一次，不能重复使用

值变量

/* Less */
@color: #999;
#wrap{
	color:@color;
}
/* 生成的 css */
#wrap{
	color:#999;
}

以@开头定义变量使用时直接 @名称
在项目中可以把常用变量封装到一个文件中利于代码组织维护

作为选择器和属性名的变量

/* 选择器变量 */
@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;
 }
/* 属性变量 可以减少代码书写量 */
@bgc:background-color;
div{
    width:200px; 
    height:200px;
    @{bgc}:red;
}

url变量

/* 项目结果改变时 修改变量即可 不用一个个去找 */
@imgurl:"www://www.xxx.com/img/";
header{
	background:url("@{imgurl}bglogo.png")
}

声明变量

/* Less */
@background:{background:red;}
#main{
	@background();
}
/* css */
#main{
	background:red;
}

变量运算

/* 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;
}

变量作用域 就近原则

/* Less */
@var:@a;
@a:100%;
#wrap{
	width:@var;
	@a:9%;
}
/* 生成的css */
#wrap{
	width:9%;
}

用变量去定义变量

/* Less */
@fnord:"i am fnord.";
@var:"fnord";
#wrap::after{
	content:@@var; /* 将@val替换值为值 content:@fnord;*/
}
/* 生成的css */
#wrap::after{
	content:"i am fnofd."
}

二. 嵌套

& 的妙用

/* Less */
#header{
	&:after{
		content:"Less";
	}
	&_content{ /* 理解 直接把&替换成 #hearder */
		margin:20px;
	}
}
/* 生成的css */
#header::after{
	content:"Less";
}
#header_content{
	margin:20px;
}

媒体查询

/* Less */
#main{
	@media screen{
		@media(max-width:768px){
			width:100px;
		}
	}
	@media tv{
		width:1000px;
	}
}
/* 生成的css */
@media screen and(maxwidth:768px){
	#main{
		width:100px;
	}
}
@media tv{
	#main{
		width:1000px;
	}
}
/* 缺点是 每一个元素都会编译出自己@medai声明 并不会合并 */

三. 混合 (将一系列属性从一个规则集引入(“混合”)到另一个规则集的方式)

/* Less */
.card{
	background:#555;
}
#wrap{
	.card;
}
/* 生成的css */
#wrap{
	background:#555;
}

.card与 .card()是等价的
为了避免混淆可写成:

.card(){...}
#wrap{
	.card();
}
/* '.'与'#'皆可作为方法前缀 方法后面写不写'()'看个人习惯 */

默认参数方法
如果没有没有传参可以使用默认参数
@arguments犹如js中的arguments指全部参数

/* Less */
.border(@a:10px,@b:50px,@c:30px,@color:#000){
	border:1px solid @color;
	box-shadow:@arguments;
}
#main{
	.border(0px,5px,30px,red)
}
#wrap{
	.border(0px);
}
#content{
	.border;
}
/* 生成的css */
#main{
	border:1px solid red;
	box-shadow:0px,5px,30px,red;
}
#wrap{
	border:1px solid #000;
}
#content{
	border:1px solid #000;
	box-shadow:10px 50px 30px #000;
}

方法的匹配模式

 /* 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会找到方法中匹配程度最高的如果匹配程度相同将全部选择并存在着样式覆盖替换。
如果匹配的参数是变量则将会匹配如 @_

方法的命名空间

  /* Less */
#card(){
  	background:#333;
  	.d(@w:300px){
  		width:@w;
  		#a(@h:300px){
  			height:@h;
  			width:@w;
		}
	}
}
#wrap{
	#card>.d>#a(100px);
}
#main{
	#card .d();
}
#con{
	#card();
	.d(20px);
}
/* 生成的 CSS */
#wrap{
	height:100px;
	width:300px;
}
#main{
	width:300px;
}
#con{
	width:20px;
}

要点…

在 CSS 中> 选择器，选择的是儿子元素，就是必须与父元素有直接血源的元素。
在引入命令空间时，如使用 > 选择器，父元素不能加括号。
不得单独使用命名空间的方法必须先引入命名空间，才能使用其中方法。
子方法可以使用上一层传进来的方法

方法的条件筛选 when

/* Less */
/* and相当于'&&' not相当于 '!' 逗号','相当于或运算 '|' */
#card{
	.border(@width,@color,@style)when(@width>100px)and(@color=#999){
		border:@style @color @width;
	}
	.background(@color)when not(@color>=#222){
		background:@color;
	}
	.font(@size:20px)when(@size>50px),(@size<100px){
		font-size:@size;
	}
}
#main{
	#card>.border(200px,#999,solid);
	#card .background(#111);
	#card > .font(40px);
}
/* 生成的 CSS */
#main{
	border:solid #999 200px;
	background:#111;
	font-size:40px;
}

要点…

比较运算有： > >= = =< <。
= 代表的是等于
除去关键字 true 以外的值都被视为 false

数量不定的参数

/* Less */
.boxShadow(...){
	box-shadow:@arguments;
}
.textShadow(@a,...){
	text-shadow:@arguments;
}
#main{
	.boxShadow(1px,4px,30px,red);
	.textShadow(1px,4px,30px,red);
}
/* 生成的 CSS */
#main{
	box-shadow:1px 4px 30px red;
	text-shadow:1px 4px 30px red;
}

方法使用important！

/* Less */
 .border{
     border: solid 1px red;
     margin: 50px;
 }
 #main{
     .border() !important;
 }
 /* 生成后的 CSS */
 #main {
     border: solid 1px red !important;
     margin: 50px !important;
 }

循环方法
官网中的一个 Demo，模拟了生成栅格系统

 /* Less */
 .generate-columns(4);
 .generate-columns(@n, @i: 1) when (@i =< @n) {
   .column-@{i} {
     width: (@i * 100% / @n);
   }
   .generate-columns(@n, (@i + 1));
 }
 /* 生成后的 CSS */
 .column-1 {
   width: 25%;
 }
 .column-2 {
   width: 50%;
 }
 .column-3 {
   width: 75%;
 }
 .column-4 {
   width: 100%;
 }

实战技巧

/* Less */
.ave(@x,@y){
	@ave:((@x+@y)/2);
}
div{
	.ave(16px, 50px);
	padding:@ave;
}
/* 生成的 CSS */
div{
	padding:33px;
}

四.继承 extend是Less的一个伪类可继承所匹配声明中的全部样式

/* Less */
.animation{
	transition:all .3s ease-out;
	.hide{
		transform:scale(0);
	}
}
#main{
	&:extend(.animation);
}
#con{
	&:extend(.animation .hide);
}
/* 生成的 CSS */
.animation, #main{
	transition;all .3s ease-out;
}
.animation .hide, #con{
	transform:scale(0);
}

all 全局搜索替换

/* Less */
#main{
	width:200px;
}
#main{
	&:after{
		content:"less";
	}
}
#wrap:extend(#main all){}
/* 生成的 CSS */
#main, #wrap{
	width:200px;
}
#main:after, #wrap:after{
	content:"less";
}

五. 导入

导入 less 文件可省略后缀

import  "main";

reference
使用引入的less文件但不好编译它
使用@import(reference)导入外部文件但不会添加把导入的文件编译到最终输出中只引用

/* Less */
@import (reference) "bootstrap.less";
#wrap:extend(.navbar all){}

once
@import语句但默认行为表明相同但文件只会被导入一次而随后导入文件的重复代码都不会解析。

@import (once) "foo.less";

multiple
使用@import(multiple)允许导入多个同名文件

/* Less */
.a{color:green};
@import (multiple) "foo.less";
@import (multiple) "foo.less";
/* css */
.a{color:green;}
.a{color:green;}

六. 函数

判断类型

isnumber(#ffo) /* 是否是一个数字 返回boolean类型 */
iscolor(xx)
isurl(xx)

颜色操作

saturate /* 增加一定数值的颜色饱和度 */
lighten /* 增加一定数值的颜色亮度 */
darken /* 降低一定数值的颜色饱和度 */
fade /* 给颜色设定一定数值的透明度 */
mix /* 根据比例混合两种颜色 */

数学函数

ceil /* 向上取整 */
floor /* 向下取整 */
percentage /* 将浮点数转换为百分比字符串 */
round /* 四舍五入 */
sqrt /* 计算一个数的平方根 */
abs /* 计算数字的绝对值 原样保持单位 */
pow /* 计算一个数的乘方 */

七. 其他
注释:

// 只会在less中显示 
/* 会在less和css中显示 */

Twelve--

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Less的基本使用

常用的预处理语言 Sass Less Stylus使用Less两种方式引入less <link rel="stylesheet/less" href="xxx.less">然后引入 less.js 文件使用 npm 安装 npm install -g less在项目中使用Webpack 需要配合less-loader处理一变量二嵌套三混合方法四继承五导...
复制链接

扫一扫