使用CSS预处理器Less

前天写了一篇文章，关于如何使用Harp来加快人的开发效率，在Mac系统和Linux系统上测试是没有问题的，但没有在Windows上测试，使用Windows的刚入门的前端工程师，安装Harp失败后，不知道怎么解决问题。不管学习什么，解决问题的能力是最重要的，学会自己动手。

简介

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。

注意： harp现在在windows不好用

附录

再谈CSS预处理器
Less中文文档
天猫前端

使用CSS预处理器Less相关推荐

前端CSS预处理器Sass
前面的话 "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...
您详细比较三个 CSS 预处理器（框架）：Sass、LESS 和 Stylus
2019独角兽企业重金招聘Python工程师标准>>> CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS ...
初识css预处理器：Sass、LESS
这篇文章是初步介绍css预处理的,详细学习请移步官网~ sass中文文档:https://www.sass.hk/docs less中文文档:http://lesscss.cn/ 什么是css预处理器 ...
再谈 CSS 预处理器
CSS 预处理器是什么?一般来说,它们基于 CSS 扩展了一套属于自己的 DSL,来解决我们书写 CSS 时难以解决的问题: 语法不够强大,比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器: ...
css预处理器sass使用教程(多图预警)
css预处理器赋予了css动态语言的特性,如变量.函数.运算.继承.嵌套等,有助于更好地组织管理样式文件,以及更高效地开发项目.css预处理器可以更方便的维护和管理css代码,让整个网页变得更加灵活可 ...
Sass：一种CSS预处理器语言
http://sass-lang.com/ Sass是一种CSS预处理器语言,通过编程方式生成CSS代码.因为可编程,所以操控灵活性自由度高,方便实现一些直接编写CSS代码较困难的代码. 同时,因为S ...
[css] 你有用过CSS预处理器吗？喜欢用哪个？原理是什么？
[css] 你有用过CSS预处理器吗?喜欢用哪个?原理是什么? 它能让你的CSS具备更加简洁.适应性更强.可读性更强.层级关系更加明显.更易于代码的维护等诸多好处. CSS预处理器种类繁多,目前Sas ...
009 - CSS预处理器less sass SAML SSO 单点登录 websocket socket.io
009_css预处理器less sass saml sso 单点登录 websocket## less 安装: npm install -g less 命令: lessc style.less sty ...
LESS是一个CSS预处理器，跨浏览器友好，提供诸如变量，函数， mixins 和操作等功能，可以构建动态CSS...
什么是LESS? LESS是一个CSS预处理器,可以为网站启用可自定义,可管理和可重用的样式表. LESS是一种动态样式表语言,扩展了CSS的功能. LESS也是跨浏览器友好. CSS预处理器是一种脚 ...

使用CSS预处理器Less

简介

使用Less

总结

附录

使用CSS预处理器Less相关推荐

最新文章

热门文章