【Less】加点CSS素材博客说明，文章中涉及的信息来自网络整理和个人总结，意在总结个人的学习和经验。如有侵权，请联系我删除。谢谢！说明与Sass的高调声明相比，Less相对低调。下面看官网的介绍。官网地址：WhatisLess?，它也是CSS的利器，让CSS更加强大。（最近感觉说话有点平淡）官方回答：Less（LeanerStyleSheets的缩写）是一种向后兼容的CSS扩展语言。总结：既然官网这么简洁低调，就没有必要花太多的功夫了。你可以使用npm安装Less。npminstall-gless也可以在浏览器中使用少变量当然是首先要讲的。较少的变量使用@符号。语法@变量名：值；示例@base-font：Helvetica，无衬线字体；@我的颜色：红色；@我的字体大小：18px；body{字体系列：@base-font；字体大小：@我的颜色；color:@y-font-size;}转换为CSS代码body{font-family:Helvetica,sans-serif;字体大小：18px；color:red;}其实就是把变量的使用直接放到对应的值里面。变量作用域Sass变量实际上是有作用域的。Sass变量的作用域只能在当前级别有效。如果当前找不到，就像在父节点上寻找@myColor：red;h1{@myColor:green;//仅在h1中有用，局部范围color:@myColor;//绿色}p{颜色：@myColor；//red}Less的嵌套规则是我们写的好东西，最方便的Obvious加法。嵌套嵌套还是很享受的，直接看代码Lesscodenav{ul{margin:0;填充：20px；}li{颜色：#FFFFFF；}}CSS代码navul{margin:0;padding:20px;}navli{color:#FFFFFF;}有点像HTML。@rule嵌套和冒泡@rules（例如@media或@supports）可以像选择器一样嵌套。@规则放在最前面，同一规则集中其他元素的相对顺序保持不变。这称为冒泡。//less.component{width:300px;@media(最小宽度:768px){宽度:600px;@media(min-resolution:192dpi){背景图片:url(/img/retina2x.png);}}@media(最小宽度:1280px){宽度:800px;}}//css.component{width:300px;}@media(min-width:768px){.component{width:600px;}}@media(min-width:768px)and(min-resolution:192dpi){.component{background-image:url(/img/retina2x.png);}}@media(min-width:1280px){.component{宽度:800px;}}importfile@import"import"可以正常工作。可以导入一个.less文件，这个文件中的所有变量都可以完整使用。如果导入的文件有.less扩展名，则扩展名可以省略。别问为什么现在要用导入文件的方式，问方便！真香！泡面：真香？？？语法@import文件名；//less可以省略@import"filename.css";混合混合(Mixin)是一种将一组属性从一个规则集中包含（或混合）到另一个规则集中的方法。重要-text{color:red;字体大小：24px；font-weight:bold;}乍一看，这不就是普通的类样式吗？使用mixed.text{.important-text();}少用mixed，这很随机，而且效果很好！映射Maps从Less3.5开始，您还可以使用mixin和规则集作为一组值的映射。比如在做主题色的时候，可以很好的选择Lessmapping。示例//less#colors(){primary:blue;二级：绿色；}.button{颜色：#colors[primary]；border:1pxsolid#colors[secondary];}//css.button{color:blue;border:1pxsolidgreen;}上篇写了Sass之后写的少了，发现有很多共同点，也有很多不同点。感觉又把知识浏览一遍了。UsingLess，如果你的应用需要使用多个主题，可以考虑使用less。感谢无所不能的网络和努力的自己，个人博客，GitHub测试，GitHub公众号-桂子墨，小程序-小桂博客
