Less语法详述

Less语法:

1、 Less是一个CSS预处理器, Less文件后缀是.less
2、扩充了CSS 语言, 使CSS 具备一定的逻辑性、计算能力
3、 注意:浏览器不识别Less代码,目前阶段,网页要引入对应的CSS文件。

Easy Less(vscode插件) 

作用:less文件保存自动生成css文件

Less语法注释 

注释:
 单行注释:
语法:// 注释内容
快捷键:ctrl + /


块注释:
语法:/* 注释内容*/
快捷键: shift + alt + A

Less运算语法

运算:
加、减、乘直接书写计算表达式
除法需要添加小括号或.(英文的“.”)


注意:
Ø 表达式存在多个单位以第一个单位为准

div {
  width: 100px + 200px;
  width: 200px - 100px;
  width: 50 * 4px;
  width: (200px / 100);
  width: 400px + 100deg + 20%;
  height: 100px+200px;
  width: (70 / 37.5rem);
}

Less嵌套语法:

// 1.生成后代选择器
// 2.生成子代选择器 >
// 3.交集选择器
// 4.并集选择器
// 5.伪类选择器  :hover
// 6.添加伪元素
// 7.结构伪类选择器
.father {
  color: #333;
  
  // 生成后代选择器
  .son {
    width: 200px;
    height: 200px;
  }
}

// 生成子代选择器 >
.box1 {
  >.box2 {
    color: orange;
  }
}

// &:当前选择器,表示的就是直接上级
.head {
  span {
    &.text {
      font-size: 20px;
    }
  }
}

// 并集选择器
.father {
  .son1,.son2 {
    color: tomato;
  }
}

// 交集选择
.father {
  .free.active {
    color: tomato;
  }
}

// 伪类选择器  :hover
.box {
  li {
    a{
      &:hover {
        color: #333;
      }
    }
  }
}

// 添加伪元素
.father {
  a::before {
    content: "";
  }
}
.father {
  a {
    &::before {
      content: "";
    }
  }
}

// 结构伪类选择器
.box {
  ul {
    li:nth-child(2) {
      font-size: 30px;
    }
  }
}
.box {
  ul{
    li {
      &:nth-child(2) {
        font-size: 50px;
      }
    }
  }
}

Less变量设置属性值

// 变量  @变量名: 值;
@ThemeColor:#6cf;
@fontSize:14px;
body {
  background-color: #f3f4f3;
}

p {
  color: @ThemeColor;
  font-size: @fontSize;
}

a {
  background-color: @ThemeColor;
}

div {
  box-shadow: @ThemeColor;
}

 Less导入写法引用其他Less文件

导入: @import “文件路径”;

// @import "你要导入的文件路径";
@import "./03-计算.less";

使用Less语法导出CSS文件 

方法一:
配置EasyLess插件, 实现所有Less有相同的导出路径
l 配置插件: 设置→ 搜索EasyLess → 在setting.json中编辑→ 添加代码(注意,必须是双引号) 

方法二:控制当前Less文件导出路径
Less文件第一行添加如下代码, 注意文件夹名称后面添加/ 

// out: ../css/

 Less禁止导出

在less文件第一行添加: // out: false

// out: false

Less压缩导出

// compress: true ,out: ../css/
.box {
  width: 200px;
  height: 200px;
  background-color: skyblue;
  text-align: center;
  font-size: 60px;
  line-height: 60px;
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值