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
    评论
LESS和SCSS都是一种基于CSS之上的高级语言,它们都提供了更多的功能和特性,可以大大提高代码编写的效率。LESS语法相对来说更加清晰明了,容易上手。而SCSS在功能上更加强大,支持条件语句等高级特性。 LESS语法示例: 1. 变量声明:使用@符号来声明变量,例如:@color: #333; 2. 混合器:使用.mixin来定义和使用代码块的片段,可以实现代码的复用,例如:.mixin { font-size: 14px; color: #333; } 3. 嵌套规则:可以在父选择器内嵌套子选择器,简化了选择器的书写,例如:.parent { .child { color: red; } } 4. 运算:可以对数值进行加减乘除等运算,例如:@width: 100px + 50px; 5. 导入文件:可以使用@import语句导入其他LESS文件,例如:@import "variables.less"; SCSS语法示例: 1. 变量声明:使用$符号来声明变量,例如:$color: #333; 2. 混合器:使用@mixin来定义和使用代码块的片段,可以实现代码的复用,例如:@mixin mixin { font-size: 14px; color: #333; } 3. 嵌套规则:可以在父选择器内嵌套子选择器,简化了选择器的书写,例如:.parent { .child { color: red; } } 4. 运算:可以对数值进行加减乘除等运算,例如:$width: 100px + 50px; 5. 导入文件:可以使用@import语句导入其他SCSS文件,例如:@import "variables.scss"; 总结来说,LESS和SCSS在语法上有一些细微的差异,但整体上非常相似,都提供了类似的功能和特性,具体使用哪一种语法主要取决于个人喜好和项目需求。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [less和scss的区别](https://blog.csdn.net/Jadon_z/article/details/126750935)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [LESS 和 SCSS 的区别](https://blog.csdn.net/sky89299/article/details/124484021)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值