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; }}

未完待续


展开阅读全文

没有更多推荐了,返回首页