首页IT科技less变量使用(less变量)

less变量使用(less变量)

时间2025-05-05 03:18:12分类IT科技浏览4643
导读:一、Less简介...

一            、Less简介

1.Less是一门css的预处理语言            ,less是一个css的增强版                  ,通过less可以编写更少的代码实现更强大的样式            。

变量名以两条短横线命名

例如:

--color:red

2.Less特点:

less的语法大致和css语法一致      ,但是less中增添了许多对css的扩展            ,所以浏览器无法直接执行less代码                  ,要执行必须将less转换为css      ,然后再由浏览器执行                  。

3.Less转换为CSS方法

二                  、Less中的变量

1.在变量中可以存储一个任意的值,并且我们可以在需要时      ,任意的修改变量中的值      。

声明变量格式:

@变量名:变量值;

变量值可以为任意的值                  ,包括大小      、颜色等

2.使用变量时            ,如果是直接使用则以“@变量名            ”的形式使用

如果作为类名使用      ,则必须以“@{变量名}                  ”的形式使用

例如:

3.扩展 作用:对当前选择器扩展指定选择器的样式(选择器分组)

方法一:

:extend()

方法二:

直接对指定的样式进行引用                  ,这里就相当于将P1的样式进行了复制

例如:

.less代码: .p1{ width: 100px; height: 200px; } .p2:extend(.p1){ color: red; } .p3{ .p1(); }

转换为css代码:

.p1, .p2 { width: 100px; height: 200px; } .p2 { color: red; } .p3 { width: 100px; height: 200px; }

4.混合函数

在混合函数中可以直接设置变量

例如:

less代码:

.box(@a,@b){ width: @a; height: @b; border: 1px solid red; } div{ .box(100px,200px); }

转换为css代码:

div { width: 100px; height: 200px; border: 1px solid red; }

三            、less外部引入

使用import进行引入

例如:

style2.less代码: body{ padding: 0; margin: 0; } .box2{ width: 200px; height: 100px; background-color: aqua; }

style.less代码:

@import "style2.less"; .box1{ //在less中所有的数据都可以进行直接换算 height: 100px + 200px; width: 100px*2; background-color: #bfa; }

此时转换为style.css代码:

body { padding: 0; margin: 0; } .box2 { width: 200px; height: 100px; background-color: aqua; } .box1 { height: 300px; width: 200px; background-color: #bfa; }

注意:引入的style2.less代码也同时转换为css代码中

声明:本站所有文章            ,如无特殊说明或标注,均为本站原创发布            。任何个人或组织                  ,在未征得本站同意时                  ,禁止复制                  、盗用      、采集      、发布本站内容到任何网站                  、书籍等各类媒体平台                  。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理      。

创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!

展开全文READ MORE
没工作在家怎么赚钱(在家没工作可以做什么赚钱-我,退休后在家躺平,收入15000,从来不做家务,老伴却夸我贤惠)