最近发现好多小伙伴在面试的过程中会问到 vue 如何使用 Less 和 SCSS, 所以我绝对更新, 复习一下 Less; 废话不多说直接进主题;
依赖下载
1, 首先使用 NPM 下载依赖;
NPM install --save Less Less-loader
2, 安装完成后检查是否安装成功;
lessc -v
3, 如果安装成功后, 会显示安装成功后的版本;
引用方法
1, 在 main.JS
- import Less from 'less'
- Vue.use(Less)
2, 然后创建一个. vue 文件我们开始玩耍了;
注意: 独立的 vue 文件需要引入 Less
<style lang="less"></style>
开始使用
1,Less 中变量的使用;
在 Less, 允许我们使用以变量的形式来定义, 定义方式:@k:v; 使用方式:@k;
- <div class="box">
- </div>
- <style lang="less">
- @color:red; @k:100px; .box{ width:@k; height:@k; background: @color; }
- </style>
此时就会有一个宽 100px, 高 100px, 背景红色的正方形显示在页面上了;
2, 字符串拼接变量使用方式;
- <div class="box1"></div>
- <style lang="less" scoped>
- @img:'./img/';
- @k:100px;
- .box1{
- width:@k;
- height:@k;
- background:url("@{img}1.png")
- }
- </style>
注意: 路径需要用 "" 包裹,@{img} 这种凡是把变量引进来才能生效;
3, 多层嵌套 + 变量计算;
- <div class="box1">
- <div class="box2">
- <div class="box3"></div>
- </div>
- </div>
- <style lang="less">
- @k:100px;
- .box1{
- width: @k;
- height:@k;
- background: red;
- .box2{
- width: @k/2;
- height:@k/2;
- background: green;
- .box3{
- width: @k/3;
- height:@k/3;
- background: blue;
- }
- }
- }
- </style>
可以看到, Less 可以嵌套使用, 让我们一次就可以看清楚 CSS 结构; 除了嵌套使用, 有没有发现他的计算才是真正强大的地方呢?
4, 混合 = 函数
- <div class="box1"> 我是 box1</div>
- <div class="box2"> 我是 box2</div>
- <style lang="less">
- // 定义一个函数;
- .test(@color:red,@size:14px){
- background: @color;
- font-size:@size;
- }
- .box1{
- // 不传参, 使用默认的;
- .test()
- }
- .box2{
- // 给函数传参;
- .test(@color:green,@size:30px)
- }
- </style>
5, 匹配模式
- <div class="box"></div>
- // 定义的 CSS
- <style lang="less">
- .sjx(@_,@color,@size){
- width: 0;
- height:0;
- border:@size solid @color;
- border-color:transparent;
- }
- // 左边三角形
- .sjx(l,@color,@size){
- border-left-color:@color;
- }
- // 上边三角形
- .sjx(t,@color,@size){
- border-top-color:@color;
- }
- // 右边三角形
- .sjx(r,@color,@size){
- border-right-color:@color;
- }
- // 左边三角形
- .sjx(b,@color,@size){
- border-bottom-color:@color;
- }
- // 这里匹配调用
- .box{
- .sjx(r,red,20px)
- }
- </style>
box 匹配的是 t(top), 也就是上
box 匹配 b(buttom), 就是下;
总结一下匹配模式就好比是 JS 中的 switch 语句, 输入的是什么就显示什么; 不过感觉么啥用;
7, 颜色函数
- <p > 默认红色 </p>
- <p > 默认绿色 </p>
- <ul>
- <li <li v-for="i in 6"> 测试 </li>
- </ul>
- <span > 混合 </span>
- <style lang="less" scoped>
- *{
- padding: 0;
- margin: 0;
- }
- @color:red;
- @color1:green;
- p:nth-child(1){
- background: @color;
- };
- p:nth-child(2){
- background: @color1;
- };
- ul{
- list-style: none;
- li:nth-child(1){
- background:lighten(@color,50%);
- }
- li:nth-child(2){
- background:darken(@color,50%);
- }
- li:nth-child(3){
- background:saturate(@color,50%);
- }
- li:nth-child(4){
- background:desaturate(@color,50%);
- }
- li:nth-child(5){
- background:spin(@color,50%);
- }
- li:nth-child(6){
- background:spin(@color,50%);
- }
- }
- span{
- background: mix(@color,@color1);
- }
- </style>
8, 运算符
可以对高度, 宽度, 角度进行计算;
- <ul>
- <li v-for="item in 4">{{item}}</li>
- </ul>
- <style lang="less" scoped>
- @k:10px;
- ul{
- list-style: none;
- li{
- border:1px solid ;
- margin:10px 0 ;
- }
- li:nth-child(1){
- width: @k + @k;
- height:@k;
- }
- li:nth-child(2){
- width: @k -5px;
- height:@k;
- }
- li:nth-child(3){
- width: @k * @k;
- height:@k;
- }
- li:nth-child(4){
- width: @k / 2;;
- height:@k;
- }
- }
- </style>
如果觉得不错请点点手指, 关注下我们公众号, 我将会长期为您分享前端基础知识点;
来源: https://www.cnblogs.com/webfy/p/11516181.html