当前位置: 首页 > Web前端 > CSS

less

时间:2023-03-31 12:44:24 CSS

1、使用方法1.1直接导入less.js好处:可以获取客户端数据,进一步计算。缺点:客户端解析少造成性能浪费,不利于维护。1.2考拉编译器每次都需要打开软件。1.3在服务器环境下编译nodenpm初学者可能比较陌生。在vue项目中使用less时,风格写成:1.4在编译器中实时编译配置有点麻烦。2.什么是少??官方:一种动态样式语言:变量、继承、操作、函数我的理解:一个写css的工具,更灵活的统筹,更方便的计算。3.Nesting嵌套:我们可以在一个选择器中嵌套一个选择器来实现继承,这样可以大大减少代码量,代码看起来更清晰。

.out{width:500px;高度:500px;背景:#ccc;.inner{宽度:500px;高度:500px;背景:#ff0000;}}4.Variables变量:变量可以让我们单独定义一系列常用的样式,然后在需要的时候调用它们,这样我们在做全局样式调整的时候可能只需要修改几行代码。变量作用域:一个或括号是一个作用域。@宽度:200;@高度:200;@背景:#ff0000;
.out{width:500px;高度:500px;背景:#ccc;.inner{宽度:@width*1px;高度:@height*1px;背景:@背景;}}5.混合5.1混合:将一个定义好的类A引入到另一个类B中,从而简单的实现类B继承了类A的所有属性。.clearFix{*缩放:1;&:之后{内容:'';显示:块;清除:两者;}}.classa{border:1pxsolid#ff0000;}.classb{.classa;.clearFix;}5.2withParametermix.classa(@color){border:1pxsolid@color;}.classb{.classa(#ff0000);}5.3默认参数混合.classa(@width:1px,@style:solid){border:@width@style#ff0000;}.classb{.classa(1px,dotted);}6.arguments变量arguments变量代表所有的参数(不关心参数顺序时使用)。classa(@width:1px,@style:solid){border:@arguments#ff0000;}.classb{.classa(1px,dotted);}七、模式匹配.border(left,@width:1px){border-left:@widthsolid#333;}border(right,@width:1px){border-right:@widthsolid#333;}.border(@_,@width:1px){width:100px;}.box1{.border(left,5px)}.box2{.border(right,5px)}8.数学函数round(5.5)四舍五入6ceil(2.4)向上舍入3floor(2.6)向下舍入29.命名空间.red{.button{background:red;}}.blue{.button{background:red;}}.box{.red>.button;}10.Comments//这个注释方法不会被编译到css文件中往里走(一般用于生产环境)/*这种注释会被解析到css文件中*/十一、关联@import"global.less"十二、避免编译.box{width:@rem;font:(12/@rem)~'/'(20/@rem)'宋体')}参考链接http://www.bootcss.com/p/less...