LESS 语法完全解读

举报
阿童木 发表于 2021/08/23 15:10:51 2021/08/23
【摘要】 LESS通过编写less文件来快速生成css文件,对css的语法进行了扩展 Less语法注释单行注释不会被编译,多行才会被编译变量less:定义变量用@scss:定义变量用$@num: 100px;@color: red;@mar: margin;.box { width: @num; height: @num; background-color: @color; ...

LESS

通过编写less文件来快速生成css文件,对css的语法进行了扩展

Less语法

  1. 注释

单行注释不会被编译,多行才会被编译

  1. 变量

less:定义变量用@

scss:定义变量用$

@num: 100px;
@color: red;
@mar: margin;
.box {
    width: @num;
    height: @num;
    background-color: @color;
    @{mar}: 100px auto;
}

// 代码解析后
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 100px auto;
}

less会有变量提升,sass没有

  1. 选择器支持嵌套
  • 伪类,嵌套在里面写
&:hover {
        background-color: skyblue;
}
  1. 运算
@num: 100px;
.box {
    width: @num + 10px;
    height: @num + 100px;
    background-color: skyblue;
}

如果单位不一样时,则以前面的单位来计算

在sass中变量单位不一致时,不能计算

  1. 函数
.box {
    background-color: skyblue;
    width: round(3.6px);//四舍五入
    height: percentage(0.2);//20%
    padding: sqrt(25px);//5px
}
  1. 混入

相当于复制temp里的内容到box里

.temp {  /*.temp() {}这样不会被单独解析 */
    width: 200px;
    height: 200px;
    background-color: skyblue;
}
.box {
    .temp;
}

带括号被混入的部分不会被单独解析,像上面这种情况temp就会被单独解析

  1. 命名空间
#space() {
    .test {
        background-color: skyblue;
        color: red;
    }
}
.box {
    #space.test;
}
  1. 继承
.line {
    font-size: 30px;
    color: 20px;
}
.box {
    &:extend(.line);//继承line的属性
    background-color: skyblue;
}
  1. 条件判断,循环
.getname(@cn) when(@cn > 4) {
    width: 100px + @cn;
}//如果cn>4执行
.getname(@cn) when(@cn < 4) {
    width: 10px + @cn;
}
.box {
    .getname(3);
}
  1. 导入
@import 'test.less';
滚动吸附

父盒子添加

scroll-snap-type: x mandatory;

子盒子添加

scroll-snap-align: start;//start center end

滚动时会自动吸附

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。