Less复习

最新推荐文章于 2023-06-06 17:15:33 发布
最新推荐文章于 2023-06-06 17:15:33 发布
阅读量133 收藏
点赞数
文章标签： 大前端 前端 less css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44827845/article/details/117301570
版权
本文介绍了Less预处理器的基础知识，包括Less的概述、入门案例、文件编译为CSS的方法。详细阐述了Less的语法特性，如变量、变量数组、颜色函数、数学函数、作用域、混合、匹配模式、运算、嵌套规则、@arguments变量、避免编译以及!important的使用。通过实例展示了如何利用Less提高CSS的可维护性和效率。
摘要由CSDN通过智能技术生成

Less复习

一、Less概述

Less是一种CSS的扩展和动态样式表语言，CSS预处理，可以在客户端或服务器端运行，帮助我们自定义，管理和重用网页的样式表。Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。
Less是一种开源语言，也是跨浏览器兼容的语言。

二、Less入门案例

创建HTML文件后，在<head>中引入：

<link rel="stylesheet/less" type="text/css" href="./css/styles.less" />
<script src="//cdn.jsdelivr.net/npm/less@3.13" ></script>

<body>
	 <div id="header"></div>
</body>

写入外部样式，styles.less

@width: 100px;
@height: @width + 50px;
#header {
  width: @width;
  height: @height;
  background-color: hotpink;
}

在这里插入图片描述
可以实现高度比宽度大50px，只需要改变宽度即可。

三、Less文件编译为CSS文件

  1. 确认电脑已经安装了node环境
  2. 安装less编译器lessc,命令如下：
    npm install -g less

在这里插入图片描述

  1. dos窗口进入需要转换的less文件的位置
  2. 执行以下命令：
    lessc less文件名.less 生成的css文件名.css
    在这里插入图片描述

四、Less语法

1.变量

引入外部less文件

@color: red;
@size: 14px;
@width: 100px;
@height: @width + 50px;
.container{
	background: @color;
	font-size: @size;
	width: @width;
	height: @height;
}

在这里插入图片描述

2.变量数组

@colors: red,green,blue ;
#p{
	color: extract(@colors, 1)   //less 初始为1开始
}

在这里插入图片描述

3.颜色函数

LESS提供了一些函数，使定义和操作颜色变得超级简单。使用其中的一些函数帮助你控制颜色，更好地配色并保持其组织性。
在这里插入图片描述

@colors: red,green,blue ;
#p{
	color: extract(@colors, 1)   /*extract从数组中取值，less 初始为1开始*/
}
#p1{
	/*color: fadeout(extract(@colors,1),90%) ;*/
	color: mix(extract(@colors,1),extract(@colors, 3)) ;
}

在这里插入图片描述

4.数学函数

  1. round(1.67); // 返回2
  2. ceil(2.4); // 返回3
  3. floor(2.6); // 返回2
  4. percentage(0.5); // 返回50%
@colors: red,green,blue ;
#p2{
	color:extract(@colors, ceil(1.5))
}

在这里插入图片描述

5.作用域

@a: red ;
//在大括号中也可以定义变量
#p3{
	@a: pink ;
	/*color: lighten(@a, 50%);*/
	color:lighten(@a,5%) ;
}
h1{
	color: @a ;
}
h2{
	color: darken(@a, 15%); 
}

在这里插入图片描述
less中的作用域首先会从本地查找变量或者混合模块，如果没找到的话会去父级作用域中查找，直到找到为止。

6.混合

<body>
	<h3 class = "one">我喜欢<span class = "two">杨迪</span></h3>
	 <h4>hahahaha</h4>
</body>

/*混合语法*/
.one{
	color:green ;
	font-size: 30px;
	.two() ;
}
.two(@a:red){
	color:@a ;
	font-size: 50px;
	font-style: italic;
	}	
h4{
	cursor: pointer;
	.two(green) ;
}

在这里插入图片描述

7.匹配模式

可以理解成JS当中if-else、switch语句,假设项目需要多处用到一些小图标，这里以三角形来举例。

<body>
	 <p class = "sanjiaoxing"></p>
</body>

/*朝上的三角形*/
.triangle(top,@width: 50px,@color: #ccc){
	border-width: @width;
	border-color: transparent transparent @color transparent;
	border-style: dashed dashed solid dashed;
} 
/*朝下的三角形*/
.triangle(bottom,@width: 50px,@color: #ccc){
	border-width: @width;
	border-color: @color transparent transparent transparent;
	border-style: solid dashed dashed dashed;
} 
/*朝左的三角形*/
.triangle(left,@width: 50px,@color: #ccc){
	border-width: @width;
	border-color: transparent @color transparent transparent;
	border-style: dashed solid dashed dashed;
} 
/*朝右的三角形*/
.triangle(right,@width: 50px,@color: #ccc){
	border-width: @width;
	border-color: transparent transparent transparent @color ;
	border-style: dashed dashed dashed solid;
} 
/*只要是用到.triangle,都会携带以下这些CSS，@_表示携带这些公共样式*/
.triangle(@_,@width: 50px,@color: #ccc){
	height: 0;
	width: 0;    /*注意这个width设置，不设置就不会出现三角形*/
	overflow: hidden;
}
/*开始调用*/
.sanjiaoxing{
	.triangle(bottom,30px,red);
}

在这里插入图片描述

8.运算

一般运算是用在px和color，但color相对少用。

@fontSize: 50px;
@color: #ccc;
.container{
	font-size: @fontSize + 30;
	color: @color + 10;
}

在这里插入图片描述

9.嵌套规则

<ul class="list">
	<li class = "li"><a href="#" class = "a">点击</a><span class = "span">时间</span></li>
	<li class = "li"><a href="#" class = "a">点击</a><span class = "span">时间</span></li>
	<li class = "li"><a href="#" class = "a">点击</a><span class = "span">时间</span></li>
	<li class = "li"><a href="#" class = "a">点击</a><span class = "span">时间</span></li>
</ul>

/*第一种*/
.list{
	width: 200px;
	height: auto;
	background-color: pink;
	.li{
		height: 30px;
		line-height: 30px;
	 }
	.a{
		font-size: 24px;
		&:hover{
			color: green;   /* &:指向上一层父选择器 */
		}
	  }
	 .span{
		font-size: 12px;
	 }	 
}

在这里插入图片描述
嵌套规则当然可以使用下面的第二种写法

/*第二种*/
.list{
	width: 200px;
	height: auto;
	background-color: pink;
    .li{
		height: 30px;
		line-height: 30px;
	    .a{
	        font-size: 24px;
			&:hover{
				color:red ;
			}
	     }
		.span{
			  font-size: 12px;
		}
   }
}

写的层级越多，解析会越慢，推荐第一种。

10.@arguments变量

@arguments表现传入的所有参数，使用较少。

.border(@w: 2px,@color: red,@style: solid){
	border: @arguements;
}
.container{
	width: 100px;
	height: 100px;
	.border();
}

/*编译成CSS*/
.container {
	width: 100px;
	height: 100px;
	border: 2px red solid;
}

11.避免编译

有时候会输出一些不正确的CSS语法或者使用一些Less不认识的语法。我们可以在值的前面加上~，表示不进行编译。比如滤镜等。

.container{
	width: ~'calc(100%-20)';  /*calc() 函数计算 <div> 元素的宽度*/
	height:50px;
	background-color: pink;
}
.one{
	width: calc(50% - 20px);
	height:50px;
	background-color: hotpink;
}
.two{
	width: calc(50%);
	height:50px;
	background-color: hotpink;
}

在这里插入图片描述

12.!imporant

!imporant优先执行

<p class = "container" id = "p">林志玲</p>

.container{
	width: 100px;
	height: 100px;
	background: pink;
	border: 4px green solid ;
}
#p{
	border: 2px red dashed !important ;
}

在这里插入图片描述

猫与故巷0214
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
less基础(全)
weixin_45921263的博客
06-03 813
文章目录前言一、less概述二、新功能（以示例为主）1.变量、变量数组2.函数(颜色，数学函数)3.less语法之作用域4.混合（案例）5.匹配模式6.运算（案例）7.嵌套规则（案例）三.less语法之避免编译（案例）总结 前言 本篇文章就是对less作一基本的总结。其中从它的使用环境，变量，函数，作用域，运算，嵌套规则等这些方面来总结。 一、less概述 1.Less是一种CSS的扩展和动态样式表语言，CSS预处理器，可以在客户端或服务器端运行，帮助我们自定义，管理和重用网页的样式表。 2.Less
less复习
kun_moon的博客
10-07 94
less less是一种动态样式语言，属于css预处理器的范畴，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。 LESS 既可以在 客户端 上运行 ，也可以借助Node.js在服务端运行。 less中的注释 以//开头的注释，不会被编译到css文件中； 以/**/包裹的注释会被编译到css文件中。 less中的变量 使用@来声明一个变量，如： @myCo...
less复习（全）
信念之于人，犹翅膀之于鸟，信念是飞翔的翅膀
04-20 143
文章目录变量嵌套媒体查询混入条件混入参数混入带选择器的css样式嵌套混入小知识 变量 less : 变量复习 嵌套 /* 嵌套 */ .content{ width: 80%; height: 200px; .center-show(); .item{ width: 20%; height: 200px; background: #876; margin:0 38px; float:left } } 媒体查询 /* 媒体查询 */ /*
less练习
leechoy
07-22 428
html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="t
less 数组循环
A_one2010的博客
05-26 673
less 数组循环
考研英语复习
12-27
原句：*With modern offices becoming more mechanized, designers are attempting to personalize them with warmer, less severe interiors.* - **结构分析**：这是一个含有伴随状语的简单句。“with modern ...
英语期末A完形填空复习资料1
08-08
【英语期末A完形填空复习资料1】 这篇文章是一篇关于感冒防治和健康的科普短文。作者提到在冬季，人们经常收到关于感冒久治不愈的抱怨。文章首先指出，虽然感冒本身通常并不危险，但对于身体虚弱的人群，如老年人和...
Hadoop认证复习
11-14
10. 文件查看和帮助：使用`vi`、`cat`、`more`、`less`、`tail`命令查看文件内容，使用`man`、`info`、`--help`获取命令帮助信息。 11. 权限和组：Linux文件权限分为四段，第三段表示文件所有者所在组的权限，文件...
嵌入式操作系统复习资料（下）
07-08
嵌入式操作系统复习资料（下） 本文档为嵌入式操作系统考试的资料，涵盖了 Linux 文件系统、常用命令、网络服务及功能、名词解释等内容。 一、Linux 文件系统 Linux 文件系统中有四种类型的文件：普通文件、目录...
Linux复习.rar
11-14
Linux复习文档旨在帮助初学者掌握Linux操作系统的基础知识和核心概念。Linux是一种自由开源的操作系统，其内核由林纳斯·托瓦兹开发，现在由全球众多开发者共同维护。Linux系统的广泛应用包括服务器、嵌入式设备以及...
less
qq_43697072的博客
01-16 460
我们在项目中使用less时，可以分开创建各个类型，创建一个专门保存变量的less 文件，一个混入方法的文件等，有利于以后的维护 声明编码类型防止乱码 @charset "utf-8"; 变量 /*必须@前缀,;结尾,:为等于。变量名不能以数字开头，不能包含特殊字符，区分大小写 */ @textColor:#333; a{ color: @textColor; } /* 也可以用来...
less如何循环数组
最新发布
m0_61355338的博客
06-06 1343
在网上寻找了一圈发现太多语法但是大部分都不能使用 可能是我less版本的问题。在这里我记录一下目前我的less版本可以使用的方法。
less使用数组遍历（递归）动态生成class
codecat_yi的博客
03-21 2381
@colors : red blue; @colorsName : red , blue; @len : length(@colors); // wen条件判断 .each-color(@index) when (@index <= @len) { // 获取名称 @name : extract(@colorsName , @index); // 拼接.color-名称 .color-@{name}{ // extract从数组从取值
Less的遍历循环写法
woyaoshengzhang的博客
11-19 8298
1.html <ul> <li>第一条数据</li> <li>第二条数据</li> <li>第三条数据</li> <li>第四条数据</li> </ul> 2.less // 定义颜色数组 @colorArr: #37a2da, #32c5e9, #67e0e3, #9fe6b8; // 定义循环最大值，此处使用颜色数组的长度 @len: len
less定义数组，获取长度
MagicWing的博客
10-14 3662
//数组 wadapterDeviceList: 750px,720px,640px,540px,480px,424px,414px,400px,384px,375px,360px,320px; //数组长度 @len:length(@adapterDeviceList);
Less循环遍历方法
邪小新的博客
04-07 4508
循环遍历列表调用函数 //var.less @charset "UTF-8"; //变量 //rem的适配方案不好维护 //设备会更新 设计稿尺寸 预计基准值 @adapterDeviceList: 750px, 720px, 640px, 540px, 480px, 424px, 414px, 400px, 384px, 375px, 360px, 320px; //设计稿基础值 @psdWi...
less中的loop循环
Dove_summer的博客
08-22 4845
在项目中管理css一般都会使用预编译语言，其中less算是比较好用的一种。 但是官方给的介绍中关于循环生成变量名的方法比较简单，没有针对一串数组值来编译变量名的方法。 总结很多文档之后，总结了下面方法用于快速生成css的方法，虽然直接用手写的方式也能使用，但是感觉那样很low。 //下面是使用函数生成margin类名的方式 //定义margin数组 @0px:0px;//使用px单位时有个坑...
less中的循环
seiEight的博客
07-07 5955
在less中使用媒体查询做rem布局，刚开始是这样写的 .Mixin(){ @media(min-width: 720px){ html{ font-size: 720px/750px*100px; } } @media(min-width: 750px){ html{ font-size: 750px/750px*100px; ...
LESS详解之函数(一)
热门推荐
梦龙小站
11-11 1万+
LESS详解之函数是为大家介绍LESS中自带的一些函数。用小例子来帮助大家更好的理解使用LESS中的函数。
嵌入式操作系统复习：命令详解与Linux设备管理
嵌入式操作系统复习资料深入探讨了Linux环境下的核心概念和常用命令，这对于准备考试或进行系统管理具有重要价值。本文将重点介绍以下几个关键知识点： 1. **Linux文件类型**： - 普通文件：基础文件类型，没有...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值