HTML-Less和CSS

来源：互联网发布：大数据技术指哪些内容编辑：程序博客网时间：2024/06/05 16:48

HTML-Less和CSS

分类：HTML

（321）（0）举报收藏

LESS 是动态的样式表语言，通过简洁明了的语法定义，使编写 CSS 的工作变得非常简单。

本质上，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。

Less的优势：

1.结构清晰，便于扩展。对于模块很多的应用特别是单页 app，经常需要用 selector 来划分不同模块的 CSS 的 scope。如果满眼望去全是 .module .action .list a, .module .action .list a:hover 很难直观地理解样式应用的范围，举个例子：如果要改变样式的应用范围，增加一个适用的 action，只需把 .action 改成 .action, .action2 即可，而纯 CSS 就悲剧了，要修改每个相关 rule set 的 selector。

2.可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无意义的机械劳动。

可以轻松实现多重继承。这样无论父类有什么改动子类都会同步更新。有人说这个在 HTML 中把 class 写成 "notice box thick-bordered" 就好了，但是这样增加了HTML 与样式的耦合，如果模板中有多个 .notice 在修改时就难免做重复劳动，同时除了修改过的 CSS 文件外，客户端缓存的 HTML 模板也需要重新下载。在 LESS 中，如果利用 mixin 来作继承在编译后都无需生成无用的父类样式代码。

3.完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。

变量
变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。

// LESS

@color: #4D926F;

#header {
color: @color;
}
h2 {
color: @color;
}
/* 生成的 CSS */

#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}

混合
混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。

// LESS

.rounded-corners (@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}

#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}
/* 生成的 CSS */

#header {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
#footer {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

嵌套规则
我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。

// LESS

#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}

/* 生成的 CSS */

#header h1 {
font-size: 26px;
font-weight: bold;
}
#header p {
font-size: 12px;
}
#header p a {
text-decoration: none;
}
#header p a:hover {
border-width: 1px;
}

函数 & 运算

运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。LESS中的函数一一映射了JavaScript代码，如果你愿意的话可以操作属性值。

// LESS

@the-border: 1px;
@base-color: #111;
@red: #842210;

#header {
color: @base-color * 3;
border-left: @the-border;
border-right: @the-border * 2;
}
#footer {
color: @base-color + #003300;
border-color: desaturate(@red, 10%);
}

/* 生成的 CSS */

#header {
color: #333;
border-left: 1px;
border-right: 2px;
}
#footer {
color: #114411;
border-color: #7d2717;
}

在客户端使用

引入你的 .less 样式文件的时候要设置 rel 属性值为 “stylesheet/less”:
<link rel="stylesheet/less" type="text/css" href="styles.less">
然后点击页面顶部download按钮下载 less.js, 在<head> 中引入:
<script src="less.js" type="text/javascript"></script>
注意你的less样式文件一定要在引入less.js前先引入。
备注：请在服务器环境下使用！本地直接打开可能会报错！

监视模式

监视模式是客户端的一个功能，这个功能允许你当你改变样式的时候，客户端将自动刷新。
要使用它，只要在URL后面加上'#!watch'，然后刷新页面就可以了。另外，你也可以通过在终端运行less.watch()来启动监视模式。
在服务器端使用

安装

在服务器端安装 LESS 的最简单方式就是通过 npm(node 的包管理器), 像这样:
$ npm install less
如果你想下载最新稳定版本的 LESS，可以尝试像下面这样操作:
$ npm install less@latest
使用
只要安装了 LESS，就可以在Node中像这样调用编译器:
var less = require('less');
less.render('.class { width: 1 + 1 }', function (e, css) {
console.log(css);
});
上面会输出
.class {
width: 2;
}
你也可以手动调用解析器和编译器:
var parser = new(less.Parser);
parser.parse('.class { width: 1 + 1 }', function (err, tree) {
if (err) { return console.error(err) }
console.log(tree.toCSS());
});

配置

你可以向解析器传递参数:
var parser = new(less.Parser)({
paths: ['.', './lib'], // Specify search paths for @import directives
filename: 'style.less' // Specify a filename, for better error messages
});
parser.parse('.class { width: 1 + 1 }', function (e, tree) {
tree.toCSS({ compress: true }); // Minify CSS output
});
在命令行下使用
你可以在终端调用 LESS 解析器:
$ lessc styles.less
上面的命令会将编译后的 CSS 传递给 stdout, 你可以将它保存到一个文件中:
$ lessc styles.less > styles.css
如何你想将编译后的 CSS 压缩掉，那么加一个 -x 参数就可以了.

阅读全文

0 0