十分钟掌握LESS

简介

CSS使用中有时可能令人沮丧,尤其是当项目包含几千行代码的时候。仅仅改变一个颜色,也可能需要你反复进行搜索,复制粘贴,维护CSS变得枯燥。幸运的是Less Sass Stylus等CSS预处理工具的出现,使这些问题得到解决。

  • 变量,可轻松定义或改变数值(CSS将会添加这一功能)
  • 动态计算值(CSS中虽然新添了calc,但是只能用于计算长度)
  • Mixin,合并再利用已有风格
  • 函数,可以计算颜色,转换图片为数据

这种方式虽然解决了CSS诸多不如意的地方,但仍需要使用之前将样式转为CSS格式。

起步

Less是用Js实现,需要Node.js或者浏览器环境去运行。

  1. 你可以在代码中包含less.js,.less的样式会自动运行,加载到网页上,但是这种方式加载速度比较缓慢,不推荐
  2. 推荐的方式是提前将.less文件转换为css,有很多方式可以实现这种转换,文中采用的是node.js的方式。

如果你已经安装了node,打开终端,运行如下代码安装less

npm install -g less

这种方式可以让你使用lessc命令,将less文件转化为css

lessc styles.less > styles.css

上述命令将style.less 文件转换为css文件-styles.css

变量

Less的一大特性就是类似其他编程语言一样,你可以创建不同的变量。你可以将任何类型的常用数据保存为变量,例如:color,dimensions,selectors,URL等
这里的栗子将颜色定义为变量。

Less代码

@background-color: #ffffff;
@text-color: #1A237E;

p{
  background-color: @background-color;
  color: @text-color;
  padding: 15px;
}

ul{
  background-color: @background-color;
}

li{
  color: @text-color;
}

CSS代码

p{
  background-color: #ffffff;
  color: #1A237E;
  padding: 15px;
}

ul{
  background-color: #ffffff;
}

li{
  color: #1A237E;
}

Less更多的变量请参考Less变量

Mixins

Less是我们可以使用已存在的class或者ids并将它们的样式赋给其他选择器。

Less代码

#circle{
  background-color: #4CAF50;
  border-radius: 100%;
}

#small-circle{
  width: 50px;
  height: 50px;
  #circle
}

#big-circle{
  width: 100px;
  height: 100px;
  #circle
}

CSS代码

#circle {
  background-color: #4CAF50;
  border-radius: 100%;
}
#small-circle {
  width: 50px;
  height: 50px;
  background-color: #4CAF50;
  border-radius: 100%;
}
#big-circle {
  width: 100px;
  height: 100px;
  background-color: #4CAF50;
  border-radius: 100%;
}

如果你不想让mixin以规则的形式在CSS中出现,可以使用如下方式替代
Less代码

#circle(){
  background-color: #4CAF50;
  border-radius: 100%;
}

#small-circle{
  width: 50px;
  height: 50px;
  #circle
}

#big-circle{
  width: 100px;
  height: 100px;
  #circle
}

CSS代码

#small-circle {
  width: 50px;
  height: 50px;
  background-color: #4CAF50;
  border-radius: 100%;
}
#big-circle {
  width: 100px;
  height: 100px;
  background-color: #4CAF50;
  border-radius: 100%;
}

Mixin也可以接受参数,下面这个例子我们定义circle宽度和长度为25px。small circle的大小为25×25,big circle 为100×100
Less代码

#circle(@size: 25px){
  background-color: #4CAF50;
  border-radius: 100%;

  width: @size;
  height: @size;
}

#small-circle{
  #circle
}

#big-circle{
  #circle(100px)
}

CSS代码

#small-circle {
  background-color: #4CAF50;
  border-radius: 100%;
  width: 25px;
  height: 25px;
}
#big-circle {
  background-color: #4CAF50;
  border-radius: 100%;
  width: 100px;
  height: 100px;
}

嵌套

嵌套可以结构化样式表,减少冲突的可能性。举个例子

Less代码

ul{
  background-color: #03A9F4;
  padding: 10px;
  list-style: none;

  li{
    background-color: #fff;
    border-radius: 3px;
    margin: 10px 0;
  }
}

CSS代码

ul {
  background-color: #03A9F4;
  padding: 10px;
  list-style: none;
}
ul li {
  background-color: #fff;
  border-radius: 3px;
  margin: 10px 0;
}

类似其他编程语言,Less变量根据范围接收变量,如果数值在范围内没有找到,Less会向父级去寻找,直到找到最近的声明。

CSS中,li将会白色的文字,因为我们已经在ul声明了text-color规则

Less代码

@text-color: #000000;

ul{
  @text-color: #fff;
  background-color: #03A9F4;
  padding: 10px;
  list-style: none;

  li{
    color: @text-color;
    border-radius: 3px;
    margin: 10px 0;
  }
}

CSS代码

ul {
  background-color: #03A9F4;
  padding: 10px;
  list-style: none;
}
ul li {
  color: #ffffff;
  border-radius: 3px;
  margin: 10px 0;
}

更多有关定义域信息,请参考Less定义域

运算

Less支持任何数值或颜色的数学计算。例如我们有两个相邻的div,我们希望后者是前者宽度的二倍并有不用的背景颜色。

Less代码

@div-width: 100px;
@color: #03A9F4;

div{
  height: 50px;
  display: inline-block;
}

#left{
  width: @div-width;
  background-color: @color - 100;
}

#right{
  width: @div-width * 2;
  background-color: @color;
}

CSS代码

div {
  height: 50px;
  display: inline-block;
}
#left {
  width: 100px;
  background-color: #004590;
}
#right {
  width: 200px;
  background-color: #03a9f4;
}

函数

Less支持函数,更加接近一门编程语言了,不是吗?
例如fadeout,一个降低颜色透明度的函数

Less代码

@var: #004590;

div{
  height: 50px;
  width: 50px;
  background-color: @var;

  &:hover{
    background-color: fadeout(@var, 50%)
  }
}

CSS代码

div {
  height: 50px;
  width: 50px;
  background-color: #004590;
}
div:hover {
  background-color: rgba(0, 69, 144, 0.5);
}

以上代码使div得倒焦点以后,获取半透明的动画效果。这比自己手动设置要简单。还有其他可以操作颜色,检测图片大小,甚至将资源当作data-uri的方式引入样式表中。更多操作请参考Less更多函数

更多的阅读资料

Less所有语言特性
Less 函数
浏览器编辑与运行

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值