css是不能够定义变量的,也不能嵌套。它没有编程语言的特性。在项目开发中,常常发现有很多css代码是相同的,但我们通常都是复制然后粘贴。

举个例子:假设h5应用里主题色是#FF3A6D,可能用于文字或者背景色。通常开发中,哪里需要这个颜色,我们就复制这个颜色并粘贴。下次要修改就得全部查找批量替换,其实不是很方便。

本文即将介绍的less将让我们更快更方便的编写css代码。

Less是什么

Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。

less使用.less作为文件后缀。通过第三方工具,可以一键或者实时编译成对应的css文件。

示例:
demo.less

 @base: #f938ab;/*定义变量*/
.box {
color: @base;
border-color: lighten(@base, 30%); /*使用函数*/
/*嵌套*/
&-content{
width:100%;
}
.title{
color:#ccc;
}
}

通过第三方工具,编译后生成:
demo.css

.box {
color: #f938ab;
border-color: #fdcdea;
}
.box-content {
width: 100%;
}
.box .title {
color: #ccc;
}

实际项目中,我们编辑的是.less文件,但引用时依旧像往常一样引用.css文件。通过第三方工具(例如Koala),可以实现.less文件一发生改变,就生成同名的.css文件。后文有介绍,等不及的同学可以先去看看怎么编译成css文件,再返回来看less相关特性和例子。

语言特性

由于less文件本身就是文本,所以不用特别安装什么编辑器,通常的代码编辑器都能进行编辑。推荐使用sublime text(建议安装插件Less,以支持less语法高亮)。

变量

使用@符号定义。例如:

@base: #f938ab;
.box {
color: @base; /*变量引用*/
}

变量的作用就是把值定义在一个地方(或一个文件里,通过@import导入),然后在各处使用,这样能让代码更易维护。

变量也支持URLs:

// Variables
@images: "../img"; // 用法
body {
color: #444;
background: url("@{images}/white-sand.png");
}

属性也支持变量的形式:

@property: color;

.widget {
@{property}: #0ee;
background-@{property}: #999;
}

混合(Mixin)

混合就是前面定义的一个样式,后文可以直接引用。示例:

@base: #f938ab;
.ellipsis_txt {
display: -webkit-box;
-webkit-line-clamp: 2;
overflow: hidden;
word-break: break-all;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
} .box {
color: @base;
.ellipsis_txt;
/*或者
.ellipsis_txt();
*/
}

括号是可选的。

嵌套

可以在一个css里有多个css块,以方便我们更好的组织代码,编写css模板。

#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}

生成:

#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}

还支持&符号:

#header {
color: black;
&-navigation {
font-size: 12px;
}
&-logo {
width: 300px;
}
&:hover{
color:#ccc;
}
}

生成:

#header {
color: black;
}
#header-navigation {
font-size: 12px;
}
#header-logo {
width: 300px;
}
#header:hover {
color: #ccc;
}

运算

任何数字、颜色或者变量都可以参与运算。下面是一组案例:

@base: 5%;
@filler: @base * 2;
@other: @base + @filler; color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;

示例:

@var: 1px + 5;
div{
width:@var;
}

输出:

div {
width: 6px;
}

函数

Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。这些函数在函数手册中有详细介绍。

函数的用法非常简单。下面这个例子将介绍如何将 0.5 转换为 50%,将颜色饱和度增加 5%,以及颜色亮度降低 25% 并且色相值增加 8 等用法:

@base: #f04615;
@width: 0.5; .class {
width: percentage(@width); // returns `50%`
color: saturate(@base, 5%);
background-color: spin(lighten(@base, 25%), 8);
}

编译生成:

.class {
width: 50%;
color: #f6430f;
background-color: #f8b38d;
}

命名空间

有时候,你可能为了更好组织 CSS 或者单纯是为了更好的封装,将一些变量或者混合模块打包起来,一些属性集之后可以重复使用。
示例:

/*模块*/
#bundle {
.button {
display: block;
border: 1px solid black;
background-color: grey;
&:hover {
background-color: white
}
}
.tab { /**/ }
.citation { /**/ }
} /*下面复用上面的一部分代码*/
#header a {
color: orange;
#bundle > .button;
}

编译生成:

#bundle .button {
display: block;
border: 1px solid black;
background-color: grey;
}
#bundle .button:hover {
background-color: white;
}
#bundle .tab {
/**/
}
#bundle .citation {
/**/
} /*下面复用上面的一部分代码*/
#header a {
color: orange;
display: block;
border: 1px solid black;
background-color: grey;
}
#header a:hover {
background-color: white;
}

LESS中的命名空间,属于高级语法,在日常项目中应用比较广泛。我们可以用LESS中的命名空间为自己封装一些日常比较常用的类名,以便以后做项目的时候更有效率。

作用域

子类里面的优先,找不到才往父类里找。

示例:

@var: red;

#page {
@var: white;
#header {
color: @var; // 这里值是white
}
}

也不会因为变量后面定义而影响作用域:

@var: red;

#page {
#header {
color: @var; // white
}
@var: white;
}

和上面的例子是一样的。

注释

css仅支持块注释。less里块注释和行注释都可以使用:

/* 一个注释块
style comment! */
@var: red; // 这一行被注释掉了!
@var: white;

导入

和css一样,你可以导入一个 .less 文件,此文件中的所有变量就可以全部使用了。如果导入的文件是 .less扩展名,则可以将扩展名省略掉:

@import "library"; // library.less
@import "typo.css";

函数参考

这些平常应该用的不多吧。

color(string) 解析颜色,将代表颜色的字符串转换为颜色值
convert(value,unit) 将数字从一种单位转换到另一种单位.第一个参数为带单位的数值,第二个参数为单位.
ceil(number)向上取整
floor(number)向下取整
percentage(number)将浮点数转换为百分比字符串
round(number)四舍五入取整
sqrt(number)计算一个数的平方根,并原样保持单位
pow(number,number)设第一个参数为A,第二个参数为B,返回A的B次方.
mod(number,number)返回第一个参数对第二参数取余的结果.
min(value1, ..., valueN)返回一系列值中最小的那个.
max(value1, ..., valueN)返回一系列值中最大的那个.
abs(number)计算数字的绝对值,并原样保持单位
sin(number)正弦函数
cos(number)余弦函数
asin(number)反正弦函数.返回以弧度为单位的角度,区间在 -PI/2 到 PI/2之间.
acos(number)反余弦函数.区间在 0 到 PI之间.
tan(number)正切函数
atan(number)反正切函数
pi()返回圆周率 π (pi)
isnumber(value)如果待验证的值为数字则返回 true,否则返回 false
isstring(value)如果待验证的值是字符串则返回 true,否则返回 false
iscolor(value)如果待验证的值为颜色则返回 true,否则返回 false

更多:http://less.bootcss.com/functions/

如何编译

第三方的编译工具有很多,下面列举常用的。

命令行lessc

官网:http://lesscss.org
github:http://github.com/less/less.js

需要先安装node.js

安装好nodejs后,在命令行输入:

npm install -g less

以安装lessc。

安装 Less 后,就可以在命令行上调用 Less 编译器了,如下:

lessc styles.less

这将输出编译之后的 CSS 代码到stdout,你可以将输出重定向到一个文件:

lessc styles.less > styles.css

若要输出压缩过的 CSS,只需添加 -x 选项:

lessc styles.less > styles.css -x

如果希望获得更好的压缩效果,还可以通过 --clean-css 选项启用 Clean CSS 进行压缩,需要先安装好插件:

npm install -g less-plugin-clean-css

执行 lessc 且不带任何参数,就会在命令行上输出所有可用选项的列表。

lessc暂不支持实时编译。

Koala

官网:http://koala-app.com/index-zh.html
下载:https://pan.baidu.com/s/1o7wLvPg

使用Koala是因为它是个客户端,更简单。更重要的,还能实时编译,这对于实际开发很有帮助。

koala是一个前端预处理器语言图形编译工具,支持Less、Sass、Compass、CoffeeScript,帮助web开发者更高效地使用它们进行开发。跨平台运行,完美兼容windows、linux、mac。

使用起来很简单,只需要将less文件所在的目录拖到软件工作窗口,选择需要编译的less文件就行了。只要你改动less文件里的代码,就会自动生成同名的css文件。速度非常快。感兴趣的可以下载试试。

Sublime Text 2 & 3

Less-sublime:less语法高亮
lessc:Less 即时保存编译 CSS 插件

HBuilder

官网:http://www.dcloud.io/

一款国人开发的很不错的代码编辑器,基于eclipse,前端的同学建议下载。
号称:飞速编码的极客工具,手指爽,眼睛爽。支持php、jsp、ruby、python、nodejs等web语言,less、coffee等编译型语言。代码提示功能真的很强大。

该软件默认安装了less4j,支持实时将less文件编译成同名的css文件。对less的代码提示是我见过最强大的,变量什么的都会提示。

Notepad++

仅支持语法高亮。
Less.js 语法高亮,by azrafe7
Less.js 语法高亮, by Raúl Salitrero

gulp

同样需要先安装node.js

然后安装:

npm install --save-dev gulp

接着安装less插件:

npm install gulp-less --save-dev

开始任务配置:
gulpfile.js

var gulp = require('gulp');
var less = require('gulp-less'); gulp.task('doless', function () {
return gulp.src('css/*.less')
.pipe(less())
.pipe(gulp.dest('build'));
}); gulp.task('watch', function () {
gulp.watch('css/*.less', ['doless']);
});

在命令行执行:

gulp watch

我们现在去编辑css/demo.less文件,会自动在build目录生成demo.css文件。

更多less编译工具查看:http://less.bootcss.com/usage/#guis-for-less

参考

1、快速入门 | Less.js 中文文档
http://less.bootcss.com/#
2、Less 中文网
http://lesscss.cn/
3、less/less-docs: Documentation for Less.
https://github.com/less/less-docs

作者:飞鸿影~

出处:http://52fhy.cnblogs.com/

如果您觉得本文对您的学习有所帮助,可通过“微信”或“支付宝”打赏博主,或者点击页面下方推荐以支持博主。

             

版权申明:没有标明转载或特殊申明均为作者原创。本文采用以下协议进行授权,自由转载 - 非商用 - 非衍生 - 保持署名 | Creative Commons BY-NC-ND 3.0,转载请注明作者及出处。

Less:优雅的写CSS代码的更多相关文章

  1. 如何优雅的写C++代码(一)

    // get the greatest power of two that is a divisor of n: return n&-n; // swap two integers a and ...

  2. CSS代码重构与优化之路

    作者:@狼狼的蓝胖子 网址:http://www.cnblogs.com/lrzw32/p/5100745.html 写CSS的同学们往往会体会到,随着项目规模的增加,项目中的CSS代码也会越来越多, ...

  3. CSS代码重构

    CSS代码重构的目的 我们写CSS代码时,不仅仅只是完成页面设计的效果,还应该让CSS代码易于管理,维护.我们对CSS代码重构主要有两个目的:1.提高代码性能2.提高代码的可维护性 提高代码性能 提高 ...

  4. 高效的CSS代码(2)

    ——阅读笔记,欢迎纠错^_^ 内容比较零散..... 1.让浮动元素的父容器根据元素的高度而自适应高度的方法: <div class="clearfix"><di ...

  5. 既然写CSS很容易,那为什么大家还是把CSS写的那么烂呢?

    在众成翻译上看到一篇不错的css文章,所以就给转过来. 在你开始阅读这篇文章之前,一定要做好心理准备.因为我写的 90% 都是在发牢骚,只有最后大概 10% 介绍 CSS 技巧之最佳实践.提前给你们打 ...

  6. CSS代码重构与优化

    CSS代码重构的基本方法 前面说到了CSS代码重构的目的,现在我们来说说一些如何达到这些目的的一些基本方法,这些方法都是易于理解,容易实施的一些手段,大家平时可能也不知不觉地在使用它. 提高CSS性能 ...

  7. CSS代码重构与优化之路(转)

    CSS代码重构与优化之路   阅读目录 CSS代码重构的目的 CSS代码重构的基本方法 CSS方法论 我自己总结的方法 写CSS的同学们往往会体会到,随着项目规模的增加,项目中的CSS代码也会越来越多 ...

  8. 如何写出优雅的CSS代码 ?(转)

    对于同样的项目或者是一个网页,尽管最终每个前端开发工程师都可以实现相同的效果,但是他们所写的代码一定是不同的.有的优雅,看起来清晰易懂,代码具有可拓展性,这样的代码有利于团队合作和后期的维护:而有的混 ...

  9. 如何写出优雅的css代码 ?

    如何写出优雅的css代码 ? 对于同样的项目或者是一个网页,尽管最终每个前端开发工程师都可以实现相同的效果,但是他们所写的代码一定是不同的.有的优雅,看起来清晰易懂,代码具有可拓展性,这样的代码有利于 ...

随机推荐

  1. DM9000驱动移植在mini2440(linux2.6.29)和FS4412(linux3.14.78)上的实现(deep dive)篇一

    关于dm9000的驱动移植分为两篇,第一篇在mini2440上实现,基于linux2.6.29,也成功在在6410上移植了一遍,和2440非常类似,第二篇在fs4412(Cortex A9)上实现,基 ...

  2. SQL Tuning 基础概述01 - Autotrace的设定

    1.autotrace的设定 SQL> set autotrace Usage: SET AUTOT[RACE] {OFF | ON | TRACE[ONLY]} [EXP[LAIN]] [ST ...

  3. Vertica 安装,建库,新建测试用户并授予权限,建表,入库

    测试环境:RHEL 6.4 + Vertica 6.1.3-7 需求:搭建Vertica数据库3节点的测试环境,建立测试用户,建表,测试数据入库. 1.各节点关闭防火墙和SELinux,配置主机名,I ...

  4. 利用Python进行数据分析(7) pandas基础: Series和DataFrame的简单介绍

    一.pandas 是什么 pandas 是基于 NumPy 的一个 Python 数据分析包,主要目的是为了数据分析.它提供了大量高级的数据结构和对数据处理的方法. pandas 有两个主要的数据结构 ...

  5. 理解CSS前景色和透明度

    前面的话 颜色的出现让网页不再只是黑白,运用好颜色设计,能让网页增色不少.一个网页给人们留下的第一印象实际上就是它的整体颜色.关于如何设置颜色,请移步CSS的6种颜色模式.实际上,颜色的应用主要分为前 ...

  6. MVC5发送邮件注册

    #region 发送邮件 //填写电子邮件地址,和显示名称 System.Net.Mail.MailAddress from = new System.Net.Mail.MailAddress(&qu ...

  7. Yii2.X 多语言-类图

  8. 怎么解决tomcat占用8080端口问题

        怎么解决tomcat占用8080端口问题 相信很多朋友都遇到过这样的问题吧,tomcat死机了,重启eclipse之后,发现 Several ports (8080, 8009) requir ...

  9. CentOS6.7搭建LNMP环境

    1:查看环境: [root@localhost ~]# cat /etc/redhat-release 2:关掉防火墙 #重启后生效开启 [root@localhost ~]# chkconfig i ...

  10. Hibernnate延迟加载策略(这么详细你还看不懂)

    好久没有认真写过博客了,今天就好好的写一篇吧!!!!!!!!! 当Hibernate 从数据库中加载某个对象(例如:Dept对象)时,如果同时自动加载所有的关联的某个对象(例如:Emp对象),而程序实 ...