vux中如何使用less

一、语言特性：http://lesscss.cn/features/

在vux模板中的应用

@import '~vux/src/styles/reset.less';

//作用就是可以定位到node_modules包里面的文件

1、Variables变量

@nice-blue:#5B83AD;可以这样申明变量，@light-blue:@nice-blue + #111;颜色甚至可以相加————#header { color:@light-blue;}输出的是这样的————#header { color:#6c94be;}（双击666啊）注意：Note that variables are actually "constants" in that they can only be defined once！

2、Mixins混入

.bordered { border-top: dotted 1px black; border-bottom: solid 2px black;}像这样的类class选择器声明的样式可以直接在其他规则集中使用这些属性如：#menua { color:#111;.bordered;}.posta { color: red; .bordered;}

3、Nested Rules嵌套规则

像这样的#header { color: black;}#header.navigation { font-size:12px;}#header.logo { width:300px;}，可以这样写：

#header { color: black; .navigation { font-size:12px; }.logo { width:300px; }}

特别注意：&号代表父选择器！！！

4、嵌套指令和冒泡

.screen-color { @media screen { color: green; @media (min-width: 768px) { color: red; } }@media tv { color: black; }}

到

@media screen { .screen-color { color: green; }}@media screen and (min-width: 768px) { .screen-color { color: red; }}@media tv { .screen-color { color: black; }}

未完待续