css3 快速维护

1.Sass
sass基于ruby,这样的开发模式有点不习惯,需要下次补习。
2.Less
less可以给予node,本次主要介绍内容。

  • 安装
npm install -g less
  • 编译
lessc style.less style.css
  • 压缩
    需要先安装 less-plugin-clean-css
npm install -g less-plugin-clean-css

然后压缩

lessc --clean-css style.less style.css

书写例子:


@color:#f9f9f9;
@width:100%;
@height:100%;
@baseFontsize:12px;
@headHeight:20px;

.container{
    width:@width;
    height:@height;
    color:@color;
    font-size:@baseFontsize;

}
.main{
    color:@color + #111;
    .head{
        width:@width;
        height:@headHeight;
    .h1{s
        color:@color;
    }
    }
    .content{a
        width:@width;
        height:@height;
    }
    .foot{
        widht:@width;
        height:@headHeight*1.5;
    }

}

压缩例子:

.container{width:100%;height:100%;color:#f9f9f9;font-size:12px}.main{color:#fff}.main .head{width:100%;height:20px}.main .head .h1{color:#f9f9f9}.main .content{width:100%;height:100%}.main .foot{widht:100%;height:30px}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值