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

未完待续


评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值