Less简介及安装
CSS的短板
作为前端学习者的我们 或多或少都要学些 CSS ,它作为前端开发的三大基石之一,时刻引领着 Web 的发展潮向。 而 CSS 作为一门标记性语言,可能 给初学者第一印象 就是简单易懂,毫无逻辑,不像编程该有的样子。在语法更新时,每当新属性提出,浏览器的兼容又会马上变成绊脚石,可以说 CSS 短板不容忽视。
问题的诞生往往伴随着技术的兴起, 在 Web 发展的这几年, 为了让 CSS 富有逻辑性,短板不那么严重,涌现出了 一些神奇的预处理语言。 它们让 CSS 彻底变成一门 可以使用 变量 、循环 、继承 、自定义方法等多种特性的标记语言,逻辑性得以大大增强。
预处理语言的诞生
其中 就我所知的有三门语言:Sass、Less 、Stylus 。
- Sass 诞生于 2007 年,Ruby 编写,其语法功能都十分全面,可以说 它完全把 CSS 变成了一门编程语言。另外 在国内外都很受欢迎,并且它的项目团队很是强大 ,是一款十分优秀的预处理语言。
- Stylus 诞生于 2010 年,来自 Node.js 社区,语法功能也和 Sass 不相伯仲,是一门十分独特的创新型语言。
- Less 诞生于 2009 年,受Sass的影响创建的一个开源项目。 它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充(引用于官网)。
选择预处理语言
这是一个十分纠结的问题。
在我看来,这就好比 找女朋友,有人喜欢 贤惠安静的,就有人喜欢 活泼爱闹的,各有各的爱好,可晚上闭灯后 其实都差不多,所以你不用太过纠结。当然了 ,首先 你要有女朋友。
在网上讨论看来,Sass 与 Stylus 相比于 Less 功能更为丰富,但对于学习成本以及适应时间 ,Less 稍胜一筹,这也是我选择 Less 的原因。
Less 没有去掉任何 CSS 的功能,而是在现有的语法上,增添了许多额外的功能特性,所以学习 Less 是一件非常舒服的事情。
如果你之前没有接触过预处理语言,纠结应该学哪一个,不如先看看 下面 Less 的介绍,我相信你会爱上它的。
使用 Less 的前奏
使用 Less 有两种方式
- 在页面中 引入 Less.js
可在官网下载
或使用CDN
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
需要注意的是,link 标签一定要在 Less.js 之前引入,并且 link 标签的 rel 属性要设置为stylesheet/less。
<link rel="stylesheet/less" href="style.less">
<script src="less.min.js"></script>
- 在命令行 使用npm安装
npm install -g less
具体使用命令
$ lessc styles.less > styles.css
假如还有问题,官网已经有了明确的步骤。
如果你也是 Webpack 的使用者,还需要配合 less-loader 进行处理,具体可见我的这篇文章:Webpack飞行手册,里面详细说明了 less 的处理方式。
如果你在本地环境,可以使用第一种方式,非常简单;但在生产环境中,性能非常重要,最好使用第二种方式。
使用:
(1)Node.js 环境中使用 Less :
npm install -g less
> lessc styles.less styles.css
(2)在浏览器环境中使用 Less :
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.8.1/less.min.js" ></script>
.
Less简介及安装的更多相关文章
- Node.js 教程 01 - 简介、安装及配置
系列目录: Node.js 教程 01 - 简介.安装及配置 Node.js 教程 02 - 经典的Hello World Node.js 教程 03 - 创建HTTP服务器 Node.js 教程 0 ...
- Java Gradle入门指南之简介、安装与任务管理
这是一篇Java Gradle入门级的随笔,主要介绍Gradle的安装与基本语法,这些内容是理解和创建build.gradle的基础,关于Gradle各种插件的使用将会在其他随笔中介绍. ...
- 细细品味Storm_Storm简介及安装
Storm是由专业数据分析公司BackType开发的一个分布式实时数据处理软件,可以简单.高效.可靠地处理大量的数据流.Twitter在2011年7月收购该公司,并于2011年9月底正式将Storm项 ...
- VMware vSphere 5.1 简介与安装
虚拟化系列-VMware vSphere 5.1 简介与安装 标签: 虚拟化 esxi5.1 VMware vSphere 5.1 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 . ...
- Nutch搜索引擎(第2期)_ Solr简介及安装
1.Solr简介 Solr是一个高性能,采用Java5开发,基于Lucene的全文搜索服务器.同时对其进行了扩展,提供了比Lucene更为丰富的查询语言,同时实现了可配置.可扩展并对查询性能进行了优化 ...
- Node.js的简介和安装
一.Node.js的简介和安装 a) 什么是Node.js? Node.js是一个开发平台 让JavaScript运行在服务器端的开发平台 ---简单点说就是用JavaScript写服务器 ...
- Nutch之简介与安装
初学Nutch之简介与安装 初学Nutch之简介与安装 1.Nutch简介 Nutch是一个由Java实 现的,开放源代码(open-source)的web搜索引擎.主要用于收集网页数据,然后对其 ...
- Nutch搜索引擎Solr简介及安装
Nutch搜索引擎(第2期)_ Solr简介及安装 1.Solr简介 Solr是一个高性能,采用Java5开发,基于Lucene的全文搜索服务器.同时对其进行了扩展,提供了比Lucene更为丰富的 ...
- DNN简介以及安装
开源框架DNN简介以及安装 donetnuke 是一款免费的开源cms框架,目前也有收费版,不过免费版也可以适应大家大部分的需求.我前些阵子是老板让我在20天内,做好一个官网并且发布,并且指定使用dn ...
- Grant简介以及安装
Grant简介以及安装 1. 安装Grunt-cli需要使用npm,全局安装 命令:npm install –g grunt-cli(可能会涉及权限问题) 注意,安装grunt-cli并不等于安 ...
随机推荐
- lucene DocValues——本质是为通过docID查找某field的值 看图
Why DocValues? The standard way that Solr builds the index is with an inverted index. This style bui ...
- java的内部类解析
内部类分为四种: 成员内部类.类方法与普通方法同级: 局部内部类.类方法内部,局部内部类有构造器,通过构造器把外部的变量传入局部内部类再使用是完全可以的 匿名内部类.匿名内部类是唯一没有构造器的类,和 ...
- BZOJ4814,几何
对每个关键点i,将每个三角形缩成一个线段(因为三角形不相交),然后把线段两端点 和其他关键点一起 以i为中心点 极角排序. 扫一圈.扫到一个关键点j时, 判断当前最靠近i的线段是否遮盖i到j的路径, ...
- hdu5475(线段树单点修改,统计区间乘积)
题目意思: 给定a*b*c*d*e*f*....,可以在某一步去掉前面的一个因子,每次回答乘积. #include <cstdio> #include <cstring> #i ...
- Linux 系统管理命令 - iostat - I/O 信息统计
命令详解 重要星级: ★★★★☆ 功能说明: iostat 是 I/O statistics ( 输入/输出统计 ) 的缩写,其主要功能是对系统的磁盘 I/O 操作进行监视.它的输出主要是显示磁盘读写 ...
- 【UVA - 101】The Blocks Problem(vector+模拟)
The Blocks Problem Descriptions:(英语就不说了,直接上翻译吧) 初始时从左到右有n个木块,编号为0~n-1,要求实现下列四种操作: move a onto b: 把a和 ...
- c语言中的rand()函数用法
rand() rand()函数作用:用来产生随机数,但是,rand()的内部实现是用线性同余法实现的,是伪随机数,由于周期较长,因此在一定范围内可以看成是随机的. rand()函数返回:返回一个范围在 ...
- idea 启动时报 error:java 无效的源发行版11
编译的版本不符合,需要修改统一
- Spring + MyBaits 日志初始化两遍的问题
偶然发现一个问题,记录一下以备查询. 问题:系统启动时发现日志初始化了两次 14:28:04.798 [main] DEBUG org.apache.ibatis.logging.LogFactory ...
- hasLayout原理【转】
项目中经常用到:*html .clearfix{ height:1%;} //IE6能识别*+html .clearfix{height:1%;} //IE7能识别1,有很多方式能触发hasLayo ...