day7 less

day7 less

less

CSS预处理语言。希望css可以实现代码复用。但浏览器不支持less，需要把less编译成css文件。

1. 安装

cnpm install less

可以把颜色定义成变量

@main-color: #ff6700

现在只需改一个地方，下面的main-color都会改。

2. 导入

<link rel="stylesheet/less" type="text/css" href="css/style.less"/>
<script src="js/less.min.js" ></script> 

3. 但上面方法浪费性能。首先得自己把less文件转成css文件。
   
4. 直接继承其他的样式。
   
5. 可以设置样式的函数。.lgButton是一个函数，而不是样式。可以传颜色。在别的样式里可以调用这个函数。就会把里面的内容添加到样式里。
   
6. 带默认参数的函数。
   
7. 追加。不论调用哪个都会追加width0,height0,overflow hidden。
   
8. 层级。就不用每次 .todo h1了。
   
   效果如下(ps调整图片打小再最后加 =400X200)
   
9. 自动把参数拼接起来。
   
   效果如下。
   
10. 其他细节。
    

Vue中使用less

1. 创建vue项目的时候，选css,less系。app里面的style都变成less的了。
   

一个弹框项目