less学习笔记

最新推荐文章于 2022-07-07 11:42:43 发布

Jsonkim

最新推荐文章于 2022-07-07 11:42:43 发布

阅读量288

点赞数

分类专栏： /root/WEB前端文章标签： node.js less 扩展

本文链接：https://blog.csdn.net/u013987661/article/details/53155711

版权

/root/WEB前端专栏收录该内容

24 篇文章 0 订阅

订阅专栏

1.环境配置

1-1.下载node.js并安装

下载地址

1-2.安装lessc扩展（需要进入nodejs目录）

这里写图片描述

1-3.添加.bin到环境变量

这里写图片描述

1-4.查看lessc是否安装成功

这里写图片描述

2.语法

2-1.变量

@color: #4d926f; 
#header { color: @color; }
#header { color: #4d926f; }

@color: #253636; 
@color: #ff3636;     //覆盖第一次的定义
#header {color: @color;}        //多次反复解析
#header {color: #ff3636;}

[*].和以前学得编程语言不同，变量和mixins的作用域是全局的（当前文件），并且后面的会覆盖前面的

2-2.mixins

.borderRadius(@radius:3px){ 
    -moz-border-radius: @radius; 
    -webkit-border-radius: @radius; 
    border-radius: @radius; 
} 
#header { .borderRadius(10px); } 
.btn { .borderRadius}

[*].写成类似函数的那种形式，可以作为一个样式模版，当然也有默认值。
[*].这种表达式形式的返回值就是一个元素的css。

2-3.嵌套

#header { 
  &.fl{ float: left; }
   .mln { margin-left: 0; } 
 } 

#header.fl{float: left;} 
#header .mln {margin-left: 0;}

[*].less可以对html选择器进行嵌套使用，这样，具有继承关系的元素就可以写在一起

2-4.运算

@init: #111111; 
@transition: @init*2; 
 .switchColor { 
     color: @transition;     
 }
 .switchColor { 
   color: #222222; 
 }

[*].在less中，变量是可以进行运算的.

2-5.继承

.animal {  background-color: black;  color: white;}
.bear {  &:extend(.animal);  background-color: brown;}

[*].出了把一个样式定义为一个模版之外，还可以继承另一个元素的样式

2-6.注释

单行注释方式： //单行注释 (不会出现在编译好的css中)
单行、多行注释： /* 注释多行注释 */ (会出现在编译好的css中)