Less的基本用法

一、Less简介

	less是一门CSS的预处理语言
    less是一个css的增强版,通过less可以编写更少的代码
    实现更强大的样式
      在less中添加了许多新特性,像对变量的支持、对mixin的支持....
      less的语法大体上和css语法一直,但less中增加了许多对css扩展
          浏览器无法直接执行less代码,要执行必须先将less转换为css再由
          浏览器执行
   	Less也是一种动态样式语言. 对CSS赋予了动态语言的特性,
    如变量,继承,运算, 函数. Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox),
    也可在服务端运行 (借助 Node.js)。

二、Less的基本用法

1、变量

body{
background-color: #bbffaa;
.box2{
    background-color: red;
    .box4{
        background-color: blue;
    }
    }
    .box3{
        background-color: orange;
    }
    
}
// 变量:在变量中可以存储一个任意的值
// 并且可以在需要时,任意改变变量的值
//变量的语法:@变量名
@a:100px;
@b:#bfa;
@c:box6;
.box5{
    // 使用变量时如果是直接使用则以@变量名的形式使用即可
    width: @a;
    color: @b;
}

// 作为类名或者一部分值使用时必须以@{变量名}的形式使用
.@{c}{
    width: &#
  • 3
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值