前端入门 | css预处理器less
2017-08-28 本文已影响0人
Glimin
前言
css预处理器是一种用来写css的更加高效且便于管理的方式。目前最流行的css预处理器有：sass、less、stylus。目前先学习less。
简介
css有以下特点：
-
语法不够强大，比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器；选择父级元素，对子元素选择的时候还要再写一次。
-
没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。页面中的主色调就几个而已，如果使用CSS，假如主色调改变了，那么要改变css的很多样式，维护起来非常麻烦。
然而css的预处理器刚好给我们提供了一些便利。这里我们主要说明Less。它提供了以下功能。这些用法这里不会完全涉及，可以参考官方文档。
- 基本语法
- 嵌套语法
- 变量
- @import
- 混入
- 继承
- 函数
- 逻辑控制
使用Less
这里主要说的是在客户端使用less
1、新建html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello Less</title>
<link rel="stylesheet/less" type="text/css" href="css/my.less">
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
</head>
<body>
<div>
<p>你好啊</p>
<h1>
我正在使用<span>Less</span>
</h1>
</div>
</body>
</html>
注意里面要先引入自己写的less文件。
<link rel="stylesheet/less" type="text/css" href="css/my.less" />
再引入less的js文件，可以使用CDN，也可以下载到本地引入
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
2、less文件的内容
@base: #f938ab;
div{
background: red;
h1{
background: yellow;
span{
background: blue;
}
}
p{
background: @base;
}
}
可以这些基本的less写法，已经比css简单很多了，这里主要涉及到嵌套选择器，定义颜色变量
3、直接在浏览器打开HTML页面即可
效果图
总结
这篇文章主要介绍了css的劣势，以及简单说了css预处理器的一些特点。最后使用一个案例来说明less的使用。
在生产环境尽量使用css，可以直接使用命令将less编译为css文件，再在html页面里面引入css即可。平时开发可直接使用less。
