• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

Less学习

开发技术 开发技术 2周前 (04-30) 14次浏览

0 准备

node查看版本:cmd界面:node -v

安装less:npm install -g less

less查看版本:lessc -v

vscode插件:Easy Less

1 使用

1.0 创建文件

  • 新建后缀为.less的文件

1.1 变量

  • 必须有@为前缀
  • 不能包含特殊字符
  • 不能以数字开头
  • 大小写敏感
@变量名:值
//定义颜色变量
@color: aquamarine;
//定义字体变量
@font14: 20px;
//使用变量
.test{
    background-color: @color;
    font-size: @font14;
}

1.2 less嵌套

1. 子元素样式直接写到父元素中
父元素{
    子元素{ 
    }
}
.test{
    width: 400px;
    height: 400px;
    //1.子元素样式直接写到父元素中
    a{
        color: red;
    }
}
2.伪类、伪元素、交集选择器 在内层选择器前加上&
a{
     color: red;
     //2.伪类、伪元素、交集选择器 在内层选择器前加上&
     &:hover{
         color: black;
     }
}

实际使用:第二种会将父子类样式名连在一起

1.3 less运算

加减乘除及复杂运算

  • 运算符号与前后都有空格或者都没有空格,建议都有空格
  • 除法应使用./ 或整体加小括号来书写,推荐小括号
  • 两个数参与运算,如果只有一个数有单位,则最后的结果就以这个单位为准
  • 两个数参与运算,如果两个数都有单位,而且单位不同,则最后的结果以第一个数的单位为准
  • 颜色也可以运算
@length: 10px;
.test{
    width: 200px + 200;
    //除法应使用./ 或整体加小括号来书写,推荐小括号
    //less4.0以后不支持/
    //EasyLess随less变化也无法编译/
    height: 600px ./ 2;
    border: (@length/2) solid red;
    font-size: @length*2;
}
.test2{
    width: (@length+10)*10;
    height: @length*10*5;
    border: (@length/2)+3 solid solid #666666 - 666666;//结果#000000
}

程序员灯塔
转载请注明原文链接:Less学习
喜欢 (0)