day7 less
less
CSS预处理语言。希望css可以实现代码复用。但浏览器不支持less,需要把less编译成css文件。
- 安装
cnpm install less
可以把颜色定义成变量
@main-color: #ff6700
现在只需改一个地方,下面的main-color都会改。
- 导入
<link rel="stylesheet/less" type="text/css" href="css/style.less"/>
<script src="js/less.min.js" ></script>
- 但上面方法浪费性能。首先得自己把less文件转成css文件。
- 直接继承其他的样式。
- 可以设置样式的函数。.lgButton是一个函数,而不是样式。可以传颜色。在别的样式里可以调用这个函数。就会把里面的内容添加到样式里。
- 带默认参数的函数。
- 追加。不论调用哪个都会追加width0,height0,overflow hidden。
- 层级。就不用每次 .todo h1了。
效果如下(ps调整图片打小再最后加 =400X200)
- 自动把参数拼接起来。
效果如下。
- 其他细节。
Vue中使用less
- 创建vue项目的时候,选css,less系。app里面的style都变成less的了。