Less:优雅的写CSS代码

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

时间： 2024-11-01 22:44:21

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

高效编写CSS代码:WEBJX分享15个CSS开发工具

文章简介:对于Web开发人员来说,好用的CSS工具可以让那些枯燥的工作变得有趣,并且还可以帮你更高效的编写CSS代码,在这里向大家推荐15个必不可少的CSS开发工具和应用. 对于Web开发人员来说,好用的CSS工具可以让那些枯燥的工作变得有趣,并且还可以帮你更高效的编写CSS代码,在这里向大家推荐15个必不可少的CSS开发工具和应用. 1. CSS Desk : An online CSS Sandbox 这是一个支持即时预览的在线CSS编辑工具,无需安装任何形式的插件或是软件,就能在线编辑CS

【译】使用 currentColor 属性写出更好的 CSS 代码

本文讲的是[译]使用 currentColor 属性写出更好的 CSS 代码, 总有一些极其强大的 CSS 属性在目前已经有了很好的浏览器支持,但却很少被开发者使用. currentColor 就是这样的属性之一. MDN 把 currentColor 定义为: currentColor 代表了当前元素被应用上的 color 颜色值.它允许让继承自属性或子元素属性的 color 属性为默认值而不再继承. 在本文中,我们将通过一些有趣的方式来概述如何使用 CSS currentColor 这一关键

有一个问题我一直很疑惑，一个软件系统是先有文档呢还是先有代码呢，一个UI前台界面是先写js呢还是先写css呢？

问题描述 有一个问题我一直很疑惑,一个软件系统是先有文档呢还是先有代码呢,一个UI前台界面是先写js呢还是先写css呢? 解决方案 一个软件系统是先有文档呢还是先有代码呢?应该是现有文档.这里文档的概念太宽泛,应该说明的是什么文档,细化到什么程度的文档.我们再撸起袖子准备开发一个软件系统的时候,首先得知道的是要开发什么(需求文档),怎么开发(设计文档).注意的是,这里并一定非得把需求文档写的多么细致,考虑每个业务分支逻辑,也不需要将设计文档细化到某个模块的时序图是怎么样的,逻辑判断是怎么样的.因

写CSS文件的流程和CSS代码顺序

文章简介:css制作流程及标准. css制作流程及标准 (一)制作流程:1,创建文件(文件管理及命名)2,与html文档建立关系 注意点:    1)不建议使用:内联样式和内嵌样式         原因:结构(html)和表现(css样式)没有分离    2)区别:外链样式与导入样式(http://zhidao.baidu.com/question/198616109.html)    3)网站常用:外链样式 3,制作页面样式 注意点: 同html框架一致从上到下 从整体到局部 共用样式到个别样

CSS技巧：五个方面促进你写出更加专业的CSS代码

核心提示:每个人都可以编写CSS代码,甚至你现在已经让它为你的项目工作了.但是CSS还可以更好吗?用这五个方面改进你的CSS,会让你显得更加专业,也能使代码有好! 每个人都可以编写CSS代码,甚至你现在已经让它为你的项目工作了.但是CSS还可以更好吗?用这五个方面改进你的CSS,会让你显得更加专业,也能使代码有好! 一.重置 首先,很认真的告诉你,总是要重置某些分类.无论你是使用 Eric Meyer Reset.YUI Reset,或者你自己编写的重置代码,只要使用就对了. 它能很简单的移除所

5种方法立刻写出更好的CSS代码

无论你决定使用什么方式去编写代码,保持一致.我已经对全部放在1行VS多行的CSS编写编写方式的争论感到乏味和疲倦.这是不需要争辩的.每个人都有自己的观点,所以选择一种你喜欢的工作方式,并在所有的样式表中保持一致. 简介当然,每个人都可以编写CSS代码,甚至你现在已经让它为你的项目工作了.但是CSS还可以更好吗?开始用这5个Tips改进你的CSS吧!1.重置 首先,很认真的告诉你,总是要重置某些分类.无论你是使用 Eric Meyer Reset.YUI Reset 或者你自己编写的重置代码,只要

input标签写CSS时需要注意的几点

飞鱼的声纳顶部的搜索框让我头疼了很长时间,原因是总不能获得跨浏览器的统一样式.主要的问题有这么两个:一是input标签的高度不能统一,Firefox和IE中的高度始终不能一致;二是在IE浏览器中属性为text的input标签中的输入文字不像标准浏览器中的那样垂直居中显示,而是靠输入框的左上角显示. 为了彻底解决搜索框的这些问题,我以GreenGaint主题搜索框的样式为准,重写了一遍代码并且以像素为单位测量了一下在没有任何样式表的情况下<input>标签在默认浏览器中的实际差别. 结果发现:i

高效整洁CSS代码原则

核心提示:CSS学起来并不难,但在大型项目中,就变得难以管理,特别是不同的人在CSS书写风格上稍有不同,团队上就更加难以沟通,为此总结了一些如何实现高效整洁的CSS代码原则 CSS学起来并不难,但在大型项目中,就变得难以管理,特别是不同的人在CSS书写风格上稍有不同,团队上就更加难以沟通,为此总结了一些如何实现高效整洁的CSS代码原则: 1. 使用Reset但并非全局Reset 不同浏览器元素的默认属性有所不同,使用Reset可重置浏览器元素的一些默认属性,以达到浏览器的兼容.但需要注意的是,请

CSS代码布局八条最常见的错误

很多人对于CSS都是边干边学习,因为它不像C#之类的语言那么复杂,看起来似乎挺简单,然而正是这种对CSS的不完整的理解,导致了许多的CSS代码破坏了布局,或者带来了无休止的调试,以下总结了八条最常见的错误,以及它们的解决之道:1.不阅读或者没有读过W3C标准的文档.上图是W3C CSS 2.1 规范截图,这是当前唯一的官方详细描述CSS2功能的文件,大部分都是干巴巴的条文,不过幸好有许多简短有用的部分,当你不清楚某些CSS性能的时候可以去查阅这个文档,下面列出一下比较常用的部分:1.盒模型(Th