less学习语法

1.CSS函数的补充

1.rgb/rgba/translate/rotate/scale

2.非常好用的css函数:

  • var:使用css定义的变量
  • calc:计算css值,通常用于计算元素的大小或位置
  • blur:毛玻璃(高斯模糊)效果
  • gradient:颜色渐变函数

var:定义变量

css中可以自定义属性:

  • 属性名需要两个减号(--)开始
  • 属性值则可以是任何有效的CSS值

2.Less语法一:Less兼容CSS

  • 所以我们可以在less文件中编写所有的CSS代码
  • 知识将css的扩展名改成了.less结尾而已

3.Less语法二:变量(variables)

在一个大型的网页项目中,我们css使用到的某几种属性值往往是特定的

  • 比如我们使用到的主题颜色值,那么每次编写类似于#f3c258格式的语法;
  • 一方面是记忆不太方便,需要重新编写或者拷贝样式;
  • 另一方面如果有一天颜色改变,我们需要修改大量的代码;
  • 所以,我们可以将常见的颜色或者字体等定义为变量来使用;
复制代码
@mainColor:red;
.box{
    width: 250px;
    height: 100px;
    background-color:@mainColor;
}

4.Less语法三:嵌套

选择器的嵌套:

&:表示父级

可以用于伪类、伪元素:

5.Less语法四:运算

在Less中,算术运算符+-*/可以对任何数字、颜色或变量进行运算。

  • 算数运算符在加、减或比较之前会进行单位换算,计算的结果以最左侧操作数的单位类型为准;
  • 如果单位换算无效或失去意义,则忽略单位;

6. Less语法五:混合

在原来的CSS编写过程中,多个选择器中可能有大量相同的代码

  • 我们希望可以将这些代码进行抽取到一个独立的地方,任何选择器都可以进行复用;
  • 在less中提供了混入来帮助我们完成这样的操作。
复制代码
.cloor{
    color: red;
}
.box1{
    .cloor()
}
.box2{
    .cloor()

}

混合是一种将一组属性从一个规则集(或混入)到另一个规则集的方法。

注意:混入在没有参数的情况下,小括号可以省略,但是不建议这样使用。

6.1混入是可以传递参数(定义变量)的。

定义:

调用:

6.2混合和映射结合使用

作用:弥补less中不能自定义函数的缺陷

7.less其它语法补充

7.1less语法七:extend继承

  • 和mixins作用类似,用于复用代码
  • 和mixins相比,继承代码最终会转化成并集选择器

7.2Less语法八:Less内置函数

7.3Less语法九;作用域(Scopr)

  • 在查找一个变量时,首先在本地查找变量和混合
  • 如果找不到,则从"父"级作用域继承

7.4Less语法十:注释

  • 在Less中,块注释和行注释都可以使用;

7.5Less语法十一:导入

  • 导入的方式和CSS的用法是一致的;
  • 导入一个.less文件,此文件中的所有变量就可以全部使用了;
  • 如果导入的文件是.less扩展名,则可以将扩展名省略掉
相关推荐
剑亦未配妥14 小时前
移动端触摸事件与鼠标事件的触发机制详解
前端·javascript
Hello_Embed20 小时前
STM32HAL 快速入门(二十):UART 中断改进 —— 环形缓冲区解决数据丢失
笔记·stm32·单片机·学习·嵌入式软件
咸甜适中20 小时前
rust语言 (1.88) 学习笔记:客户端和服务器端同在一个项目中
笔记·学习·rust
人工智能训练师20 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny0720 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
Magnetic_h21 小时前
【iOS】设计模式复习
笔记·学习·ios·设计模式·objective-c·cocoa
yddddddy21 小时前
css的基本知识
前端·css
昔人'21 小时前
css `lh`单位
前端·css
研梦非凡1 天前
ICCV 2025|从粗到细:用于高效3D高斯溅射的可学习离散小波变换
人工智能·深度学习·学习·3d
limengshi1383921 天前
机器学习面试:请介绍几种常用的学习率衰减方式
人工智能·学习·机器学习