CSS之less的超详细教程

官网(中文的):http://lesscss.cn/

Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。

Less 可以运行在 Node 或浏览器端。

看下官方的例子

@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
-webkit-box-shadow: @style @c;
box-shadow: @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
.box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
color: saturate(@base, 5%);
border-color: lighten(@base, 30%);
div { .box-shadow(0 0 5px, 30%) }
}

输出:

.box {
color: #fe33ac;
border-color: #fdcdea;
}
.box div {
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

在代码中调用 Less

可以像下面这样在代码中调用 Less 编译器(Node 平台)。

var less = require('less');

less.render('.class { width: (1 + 1) }', function (e, css) {
console.log(css);
});

输出

.class {
width: 2;
}

你还可以手动调用分析器(paser)和编译器:

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({
    // Minify CSS output
    compress: true
  });
});

客户端用法

在浏览器上跑 less.js 非常方便开发,但是不推荐用于生产环境。

在客户端使用 Less.js 是最容易的方式,并且在开发阶段很方便,但是,在生产环境中,性能和可靠性非常重要,我们建议最好使用 node.js 或其它第三方工具进行预编译

那就开始吧,在页面中加入 .less 样式表的链接,并将 rel 属性设置为 “stylesheet/less“:

<link rel="stylesheet/less" type="text/css" href="styles.less" />

接下来,下载 less.js 并通过 <script></script> 标签将其引入,放置于页面的 <head> 元素内:

<script src="less.js" type="text/javascript"></script>
提示
  • 务必确保在 less.js 之前加载你的样式表。
  • 如果加载多个 .less 样式表文件,每个文件都会被单独编译。因此,一个文件中所定义的任何变量、mixin 或命名空间都无法在其它文件中访问。

浏览器端设置参数

<script src="less.js"></script> 之前 定义全局的 less 对象就可以为 Less.js 设置参数:

<!-- set options before less.js script -->
<script>
less = {
env: "development",
async: false,
fileAsync: false,
poll: 1000,
functions: {},
dumpLineNumbers: "comments",
relativeUrls: false,
rootpath: ":/a.com/"
};
</script>
<script src="less.js"></script>

~~~~

less #

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

客户端使用 #

下载地址

外联样式 #

引入你的 .less 样式文件的时候要设置 rel 属性值为 “stylesheet/less”:

<link rel="stylesheet/less" type="text/css" href="styles.less">

内联样式如下: #

<style type="text/less">
  // less 代码
</style>

接下来 下载 less.js 并通过 标签将其引入,放置于页面的 元素内:

<script src="less.js" type="text/javascript"></script>

注意:你的less样式文件一定要在引入less.js前先引入。

变量 #

Less中的变量允许你在样式中的某个地方对常用值进行定义,然后应用到样式中,这样只要改变你定义的变量参数值就可以达到改变全局的效果

@base:red;
body{color:@base}

混合 #

在LESS中我们可以定义一些通用的属性集为一个class,然后在另一个class中去调用这些属性

.bordered {
  border-top: solid 1px red;
  border-bottom: solid 2px green;
}

.div1 {
  color: #111;
  .bordered;
}

.div2 {
  color: red;
  .bordered;
}

带参数混合 #

在LESS中,你还可以像函数一样定义一个带参数的属性集合

.border-radius (@radius: 5px) {
     border:1px solid red;
     border-radius: @radius;
     width:300px;
}
.div1 {
    .border-radius(0px);
}
.div3 {
    .border-radius;
}
.div2 {
    .border-radius(20px);
}

arguments #

@arguments在Mixins中具是一个很特别的参数,当Mixins引用这个参数时,他将表示所有的变量

.pad(@top,@right,@bottom,@left) {
  padding:@arguments;
}
div{
  width:400px;
  border:1px solid red;
  .pad(10px,50px,100px,40px)
}
p
{
  background-color: green;
}

模式匹配 #

有些情况下,我们想根据传入的参数来改变混合的默认呈现

.mixin (red, @color) {
    color: red;
}
.mixin (green, @color) {
    color: green;
}
.mixin (@_, @color) {
    display: block;
}
@switch: red;
.div1 {
    .mixin(@switch, #888);
}

导引表达式 #

当我们想根据表达式进行匹配,而非根据值和参数匹配时,导引就显得非常有用

.mixin (@a) when (@a =red) {
  background-color: red;
}
.mixin (@a) when (@a =green) {
  background-color: green;
}
.mixin (@a) {
  color: @a;
}
.red { .mixin(red) }
.green { .mixin(green) }

嵌套规则 #

LESS 可以让我们以嵌套的方式编写层叠样式

#dvi1 {
  color: red;

  p {
    font-size: 12px;
  }

  .logo {
    width: 300px;
    &:hover {
      text-decoration: none
    }
  }
}

注意 & 符号的使用—如果你想写串联选择器,而不是写后代选择器,就可以用到&了. 这点对伪类尤其有用如 :hover 和 :focus,&表示上一级元素

未经允许不得转载:WEB前端开发 » CSS之less的超详细教程

赞 (0)