标签：变量 less 基础 教学 嵌套 使用 div css
less 是一门css扩展语言，里面提供的功能更方便我们开发。 less是利用javascript将less文件转换为css文件。
①变量
在javascript中变量与less中的变量及其类似，不同点在于javascript中使用var 等关系词来声明，
less中使用@符来作为声明符
例子
@n:15px; // 声明一个n变量，属性值15px
基本使用:
div { width:@n }
变量可以是 属性值 、属性名(background等)、路径。
当变量是属性名或则路径时 , 需要将变量名用花括号包含在里面
例如
@a:background;
div {
@{a}:blue
}
常用的技巧
在我们的开发过程中，会经常使用路径来获取图片 我们可以定义一个路径的变量
例如
@picture:'../src/images'; // 直接定义在当前图片文件夹
div { background:'@{picture}/图片名.png'} // 使用起来就会相当简洁。
变量不需要提前声明也可以使用, 但 我们在开发过程中，建议将变量放在文件开头，这样方便观看。
②混合mixin
作定义一个类名或则id名。作用:可以重复使用里面的属性值。
定义混合
.bor {border:1px solid red;}
body {
.border(); // 使用混合
}
结果
body {border:1px solid red};
注意点:使用混合时加上括号;
在这里会不会有小伙伴会发现，如果我们在元素上面直接加上类名不是一样可以使用.bor里面的属性吗？
从结果上面来看最大的区别 属性值在放在body里面的,这样我们只需要在less文件中操作样式属性了
③嵌套
less从的嵌套比较类似与html中的嵌套
例如:div { button { color:blue} } 翻译成css就是 div button {color:blue}
结构会更加清晰
如果在嵌套中想要使用伪元素选择器等等。 less提供了一个特殊符 & 代表父元素 , 注意只代表父元素
div { &::before{....}} 翻译成css就是 div::before {}
在嵌套这一节中只记住注意 &是代表父元素。使用起来就没有太大的问题了。
④运算
1. 算数运算符+、-、*、/ 可以对任何数字、颜色或变量进行运算
2. 算数运算符 在加减或比较之前会进行单位换算,计算结果以最左侧操作数的单位为准。
3.calc() 特例 不运算最终结果，只计算嵌套函数中的变量和数学公式值
例如
@var:50px / 2;
div {width:calc(100px - @var)}
结果就是
div {width:calc(100px - 25px);// 在css执行时会自动计算的}
⑤函数
1.percentage（）将一个小数，转换为 百分比。
2.saturate(颜色值,需要提高的百分比)
3.命名空间 将混合只作为变量使用，
.bor() {border:1px solid red;} // 将类名后面加上括号，就不会翻译在css中了，只会在使用的地方进行翻译
body {
.border(); // 使用混合
}
4. 映射
映射与命名空间比较类似，也可以说与混合比较类似
#bor(){
pr:'bule'; // 使用自定义的名字 pr
}
使用
div {color:#bor[pr]} // 使用时使用方括号
5. 作用域
less中的作用域与css作用域类似
首先从自己的作用域查找，如果没有则会向上一层查找。
⑥导入
导入的工作方式和你预期的一样，可以导入.less文件,此文件中的所有变量就可以全部使用了。
如果导入的文件是 .less 扩展名，则可以将扩展名省略掉;
@import "library"; // library.less
@import "typo.css";
标签：变量,less,基础,教学,嵌套,使用,div,css 来源： https://blog.csdn.net/m0_59795537/article/details/122408308
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。