在vue中应用less, less常用语法 柔光的暖阳◎ 2021-09-17 08:04 522阅读 0赞 **安装**: cnpm install less less-loader --save **配置loader**: 找到配置文件:build/webpack.base.conf.js 在rules里加一条: { test: /\.less$/, loader: "style-loader!css-loader!less-loader", }, **使用:** 在vue文件里面新建: <style lang="less" scoped> </style> 注意:lang一定要为less,scpoed是作用域,一般都用;接下里就可以在stylel里面使用less语法了; **less常用语法浅析:** 1,变量: 用@开头可定义一个变量,规则对照js变量,常用来放通用颜色,主题等等 @border:1px solid #ccc; @bottom:20px; 2,函数: .foo()\{\},即可声明一个函数,返回一段css样式; 常用来做一个css功能;比喻省略号等等 用法:执行函数即可 .div{ .foo() } 3,嵌套: 这是less最方便的一点用法,可多存嵌套 .box3 { div { background: red; } } 4,less文件的引用: @import + 文件路径 @import "./../assets/test.less"; 5,&符号 代表他的父元素,常与伪元素一起用 **使用实例:** test.less @border:1px solid #ccc; @bottom:20px; .ellipsis(){ overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } .ellipsis_clamp2() { text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } test.vue /* eslint-disable */ <template> <div> <div class="box"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse vitae aliquam nihil nemo! Fugit harum, nisi provident temporibus, saepe, assumenda sequi esse ut reprehenderit sit repellendus at? Excepturi, aspernatur sed. </div> <div class="box1"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse vitae aliquam nihil nemo! Fugit harum, nisi provident temporibus, saepe, assumenda sequi esse ut reprehenderit sit repellendus at? Excepturi, aspernatur sed. </div> <div class="box3"> <div>hhahah</div> </div> </div> </template> <script> export default { methods: { test () { } } } </script> <style lang="less" scoped> @import "./../assets/test.less"; .box { width: 300px; border: @border; margin-bottom: @bottom; .ellipsis(); } .box1 { width: 300px; border: @border; .ellipsis_clamp2(); } .box3 { div { background: red; } &:after { content: "after添加"; color: blue; } } </style> 效果图: ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70] [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70]: /images/20210813/ae6ec4f37f4e4535bc77141675bf28df.png
还没有评论,来说两句吧...