0
点赞
收藏
分享

微信扫一扫

预处理器less

九点韶留学 2022-02-01 阅读 82
lesscss
加载失败

文章目录

预处理器less

less官方网站

bootstrap中less教程

less是一种动态样式语言，属于css预处理器的范畴，它扩展了 CSS 语言，
增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展
LESS 既可以在 客户端 上运行 ，也可以借助Node.js在服务端运行。

less能干啥

举个例子

这是css写法，如果写的太多搞不清楚嵌套层级

* {
  margin: 0;
  padding: 0;
}
#wrap {
  position: relative;
  width: 300px;
  height: 400px;
  border: 1px solid;
  margin: 0 auto;
}
#wrap .inner {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background: pink;
  height: 100px;
  width: 100px;
}

less写法

*{
    margin: 0;
    padding: 0;

    #wrap{
        position: relative;
        width: 300px;
        height: 400px;
        border: 1px solid;
        margin: 0 auto;
        
        .inner{
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            background: pink;
            height: 100px;
            width: 100px;
        }
    }
}

一、less的使用环境

1.运行时编译

在浏览器环境中使用 Less

不建议使用这种方式，应该预编译

运行时编译(html中样式是less代码，在运行的时候编译【通过引用相关js文件】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/less">
			*{
				margin: 0;
				padding: 0;
			}
			#wrap{
				position: relative;
				width: 300px;
				height: 400px;
				border: 1px solid;
				margin: 0 auto;
				.inner{
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					margin: auto;
					background: pink;
					height: 100px;
					width: 100px;
				}
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div class="inner">
				
			</div>
		</div>
	</body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" ></script>
</html>

  • less文件也可以下载下来，然后引用本地文件<script src="less/less.min.js"></script>

  • style文件若为单独的.less文件 <link rel="stylesheet/less" type="text/less" href="styles.less" /> 但此时需要考虑跨域的问题

2.预编译

预编译(开发的时候写less文件，然后转化为css文件后引用)

(1).借助考拉编译less

koala 官网

这个不太好用

(2). vscode 插件 Easy LESS

保存拓展名为less 的文件 ，自动编译为css文件

这个太香了

(3). vscode 插件 Easy LESS

二、less的语法

1. less中的注释

以//开头的注释，不会被编译到css文件中
以/**/包裹的注释会被编译到css文件中

2. less中的变量

使用@来申明一个变量：@pink：pink;

  1. 作为普通属性值只来使用：直接使用@pink
  2. 作为选择器和属性名：@{selector的值}的形式
  3. 变量的延迟加载，及其作用域{}范围
@color:deeppink;
@m:margin;
@selector:#wrap;
@url:'../img/1.jpg';
*{
    @{m}: 0;
    padding: 0;
    background: red url(@url);
}
@{selector}{
    position: relative;
    width: 300px;
    height: 400px;
    border: 1px solid;
    margin: 0 auto;
    .inner{
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        background: @color;
        height: 100px;
        width: 100px;
    }
}
//演示变量的延迟加载，及其作用域{}范围
@var: 0;
.class {
@var: 1;
    .brass {
        @var: 2;
        three: @var;//这个编译完为3
        @var: 3;
    }
    one: @var;//这个编译完为1
}

3. 作用域（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;
}

4. less中的嵌套规则

  1. 基本嵌套规则(就是每嵌套一级，下一级为上一级选择器 下一级选择器 之间空格隔开)
  2. &的使用

@color:deeppink;
*{
    margin: 0;
    padding: 0;
}
#wrap{
    position: relative;
    width: 300px;
    height: 400px;
    border: 1px solid;
    margin: 0 auto;
    .inner{
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        background: @color;
        height: 100px;
        width: 100px;
        &:hover{
            background: pink;
        }
        //若没有& 编译后为#wrap .inner :hover
        //若加上& 编译后为#wrap .inner:hover
        //没加& hover是不可用的
    }
}

5.导入（Importing）

“导入”的工作方式和你预期的一样。你可以导入一个 .less 文件，此文件中的所有变量就可以全部使用了。如果导入的文件是 .less 扩展名，则可以将扩展名省略掉：

@import "library"; // library.less
@import "typo.css";

6. less中的混合

混合就是将一系列属性从一个规则集引入到另一个规则集的方式

混合名以 “.”开头

(1).普通混合

混合名{规则集}

编译时该混合也被当类选择器编译出去

当然类选择器也可以当普通混合使用

#wrap{
    position: relative;
    width: 300px;
    height: 400px;
    border: 1px solid;
    margin: 0 auto;
    .inner{
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }
    .inner2{
       .inner;
    }
}

(2).不带输出的混合

混合名(){规则集}

编译时该混合不被编译

使用该混合时也需要加()

(3).带参数的混合

混合名(变量){规则集}

编译时该混合不被编译

(4).带参数并且有默认值的混合

混合名(变量有默认值){规则集}

编译时该混合不被编译

.juzhong(@w:10px,@h:10px,@c:pink){
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background: @c;
    height: @h;
    width: @w;
}




#wrap{
    position: relative;
    width: 300px;
    height: 400px;
    border: 1px solid;
    margin: 0 auto;
    .inner{
       .juzhong(100px ,100px,pink);
    }
    .inner2{
       .juzhong();
    }
}

(5).带多个参数的混合

上方演示的就带多个参数

(6).命名参数

传参时指定传给某个形参值，其他使用默认值

若不指定，实参只会传给第一形参

.juzhong(@w:10px,@h:10px,@c:pink){
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background: @c;
    height: @h;
    width: @w;
}




#wrap{
    position: relative;
    width: 300px;
    height: 400px;
    border: 1px solid;
    margin: 0 auto;
    .inner{
       .juzhong(100px ,100px,pink);
    }
    .inner2{
       .juzhong(@c:black);
    }
}

(7).匹配模式

先设置一个被引用的匹配模式的相关代码

triangle.less

//把几种模式的相同属性放在这里，减少代码量
//第一个参数为@_,调用其他模式会自动引入该混合中的属性集
.triangle(@_,@wwww,@ccccc){
    width: 0px;
    height: 0px;
    overflow: hidden; 
}

//三角方向向左
.triangle(L,@w,@c){
    border-width: @w;
    border-style:dashed solid dashed dashed;
    border-color:transparent @c transparent transparent ;
}
//三角方向向右
.triangle(R,@w,@c){
    border-width: @w;
    border-style:dashed  dashed dashed solid;
    border-color:transparent  transparent transparent @c;
}
//三角方向向上
.triangle(T,@w,@c){
    border-width: @w;
    border-style:dashed  dashed  solid dashed;
    border-color:transparent  transparent @c transparent ;
}
//三角方向向下
.triangle(B,@w,@c){
    border-width: @w;
    border-style:solid dashed  dashed dashed;
    border-color:@c transparent  transparent transparent ;
}

3.less

@import "./triangle.less";
#wrap .sjx{
   .triangle(R,40px,yellow)
}

编译后

#wrap .sjx {
  width: 0px;
  height: 0px;
  overflow: hidden;
  border-width: 40px;
  border-style: dashed  dashed dashed solid;
  border-color: transparent transparent transparent #ffff00;
}

(8).arguments变量

.border(@w:1px,@style:solid,@c:black){
    width: 20px;
    height: 50px;
    border: @arguments;
}


#wrap .sjx{

   .border()
}

编译后：

#wrap .sjx {
  width: 20px;
  height: 50px;
  border: 1px solid black;
}

7.映射（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;
}

8.less运算

在less中可以进行加减乘除的运算

一般只有一个数带单位就行

算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。如果可能的话，算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位。无效的单位换算例如：px 到 cm 或 rad 到 % 的转换。

// 所有操作数被转换成相同的单位
@conversion-1: 5cm + 10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm

// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // 结果是 4px

// example with variables
@base: 5%;
@filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%

乘法和除法不作转换。因为这两种运算在大多数情况下都没有意义，一个长度乘以一个长度就得到一个区域，而 CSS 是不支持指定区域的。Less 将按数字的原样进行操作，并将为计算结果指定明确的单位类型。

@base: 2cm * 3mm; // 结果是 6cm

你还可以对颜色进行算术运算：

@color: #224488 / 2; //结果是 #112244
background-color: #112244 + #111; // 结果是 #223355

9. less继承

  • 性能比混合高
  • 灵活度比混合低

(1)基本用法

继承被附在选择器后面或放置在规则集（即具体定于样式处），它看起来就像是一个在关键字extend后具有可选参数的伪类（pseudoclass）。

.parentClass{
	color:red;
}
.subClassOne{
	&:extend(.parentClass);
}
.subClassTwo:extend(.parentClass){
	
}

编译为：

.parentClass,
.subClassOne,
.subClassTwo {
  color: red;
}

(2)继承嵌套（nested）选择器

.parentClass{
	span{
		color:red
	}
}
.subClassOne{
	&:extend(.parentClass span);
}

编译为：

.parentClass span,
.subClassOne {
  color: red;
}

(3)精确匹配（exactly matching）

Less中，关键字extend里面的选择器必须与已定义的样式选择器严格一致，如div .a{}样式只能通过extend（div .a）继承，而不能是extend（.a），尽管这两者在CSS中并没太多区别

.a.class,
.class.a,
.class > .a {
 	color: blue;
}
.test:extend(.class) {} // this will NOT match the any selectors above

编译将提示：extend ‘.class’ has no matches错误。此外，通配符也不能用于此情况。

(4)extend的选择器替代问题

此处即针对《less笔记-变量》文中选择器名字被变量替代的情况。只需extend继承的选择器名不包含变量，或在被参考的地方不是变量即可。

@myClass:.redColor;

@{myClass}{
	color:red;
}
.class{
	color:red;
}
.subClass:extend(.redColor){}	//extend参考的选择器名在参考处为变量，错误
.subClass:extend(@{myClass}){}	//extend内选择器名为变量，错误。
@myClass:extend(.class){}		//不是上面两种情况，无错。

(5)媒体查询@media内的继承范围（scope）问题

同一个媒体查询（@media）内可被继承，

@media print {
 	.screenClass:extend(.selector) {} // extend inside media
  	.selector { // this will be matched - it is in the same media
    	color: black;
  	}
}
.selector { // ruleset on top of style sheet - extend ignores it
  	color: red;
}
@media screen {
  	.selector {  // ruleset inside another media - extend ignores it
    	color: blue;
  	}
}

编译为：

@media print {
  .selector,
  .screenClass {
    color: black;
  }
}
.selector {
  color: red;
}
@media screen {
  .selector {
    color: blue;
  }
}

说明：并非内外部优先级问题，实际编译可知，若将媒体查询print内部的.selector去掉，仍然无法继承外部的.selector。

(6)Duplication（重复）问题

.class1,.class2{
	color:red;
}
.class3:extend(.class1,.class2){}

注意：class1与class2是用逗号隔开，属于分组查询，所有不会有上面的第2条。编译为：

.class1,
.class2,
.class3,
.class3 {
  color: red;
}

可见继承于分组选择器将是每个都单独继承。对于此处class1与class2完全一样的情况，extend内只写一个即可，不存在匹配问题。

(7)继承的经典使用情况

extend的经典使用情况在于，用于减少基类的使用。

如：现在有个默认字体样式类baseStyle，此外有个与baseStyle稍有差别的类specialStyle。则使css较少的css与html分别可为：

css：

.baseStyle{
	color:gray;
	font-weight:500;
}
.specialStyle{
	color:blue;
}

html：

<p class="baseStyle">我是默认的段落样式</p>
<p class="baseStyle specialStyle">我是默认样式上加了特殊样式的段落</p>

而思路相同，却更好的做法是使用Less的继承：

.baseStyle{
	color:gray;
	font-weight:500;
}
.specialStyle:extend(.baseStyle){
	color:blue;
}

效果虽一样，但使用less将使html结构信息更加直观，也更便于日后修改。

继承实际上是将当前的选择器名以分组形式添加到被继承的选择器处，所以当既有继承又有自身样式时，应注意被继承的选择器的位置。

情况一：被继承的选择器在前面


.parentClass{
	color:red;
}
.subClass{
	color:blue;
	&:extend(.parentClass);
	border:1px solid blue;
}

编译结果，与预期一致，使用了自身的特殊color：

.parentClass,
.subClass {
  color: red;
}
.subClass {
  color: blue;
  border: 1px solid blue;
}

情况二：被继承的选择器在后面

.subClass{
	color:blue;
	&:extend(.parentClass);
	border:1px solid blue;
}
.parentClass{
	color:red;
}

编译结果，因为位置原因，与预期不一致，此时此例中继承没达到目的：

.subClass {
  color: blue;
  border: 1px solid blue;
}
.parentClass,
.subClass {
  color: red;
}

(8)all 的使用

*{
    margin: 0;
    padding: 0;
}

.juzhong{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
}

.juzhong:hover{
    background: red!important;
}

#wrap{
    position: relative;
    width: 300px;
    height: 300px;
    border: 1px solid;
    margin: 0 auto;
    .inner{
        &:extend(.juzhong all);
        &:nth-child(1){
           width: 100px;
           height: 100px;
           background: pink;
        }
        &:nth-child(2){
           width: 50px;
           height: 50px;
           background: yellow;
        }
    }
}

编译后

* {
  margin: 0;
  padding: 0;
}
.juzhong,
#wrap .inner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
}
.juzhong:hover,
#wrap .inner:hover {
  background: red!important;
}
#wrap {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid;
  margin: 0 auto;
}
#wrap .inner:nth-child(1) {
  width: 100px;
  height: 100px;
  background: pink;
}
#wrap .inner:nth-child(2) {
  width: 50px;
  height: 50px;
  background: yellow;
}

10. less避免编译

为了与 CSS 保持兼容，calc() 并不对数学表达式进行计算，但是在嵌套函数中会计算变量和数学公式的值。

@var: 50vh/2;
width: calc(50% + (@var - 20px));  // 结果是 calc(50% + (25vh - 20px))

//~"" 里面的任何内容都不进行计算
padding: ~"calc(50% + (@var - 20px))";// 结果是 calc(50% + (@var - 20px))

举报

相关推荐

CSS预处理器-Less

cssless前端

less--css预处理器

javascript原型模式开发语言

CSS预处理器sass和less

csssassless

sass和less css的预处理器

css前端开发那些事儿

css 预处理器之 less sass scss stylus

日记本css3

探索CSS预处理器：Sass、Less与Stylus

csssassless

css 预处理器之 less sass scss stylus 起步

基础前端

C预处理器

c语言c++算法

Webpack5 学习（4）：处理 less 和 sass 预处理器

webpack前端工程化lesssassWebpack前端开发yyds干货盘点

预处理 less

前端学习less
0 条评论
加载失败