less的使用方法

LESS学习

1.变量

我们可以把一个css样式的值赋给一个参数，然后再设置样式的时候只需要设置这个参数名，如果要修改，就改参数的值就可以了。
demo.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet/less" type="text/css" href="styles.less">
    <script src="less.js" type="text/javascript"></script>
    <style>

    </style>
</head>

<body>
<h1>我是标题1</h1>

<h2 id="h2">我是标题2</h2>

<h3 class="h3">我是标题3</h3>
</body>
</html>

styles.less

@light_green: #009933;
h1 {
  color: @light_green;
}

h2 {
  background-color: @light_green;
}

2.Mixin

Mixin可以让类实现继承，而且允许传入参数

.font_class(@font-size:14px){
  font-size: @font-size;
  color:@light_green
}
#h2{
  .font_class
}
h3{
  .font_class(20px)
}

这里定义一个font_class类，可以传入参数font-size，参数的默认值是14px。

3.嵌套

经常会用到#name1 .class1这样的方式来选择id=name1里面的所有的含有类class1的标签。
在less中，可以用嵌套：
html

<div id="name1">
    <h3 class="class1">hello h3</h3>
    <h4 class="class2">hell h4</h4>
</div>

styles.less

@light_green: #009933;
@dark_green: #009999;
#name1 {
  .class1 {
    color: @light_green;
    &:hover {
      color: @dark_green
    }
  }
  .class2 {
    color: @dark_green;
  }

}

4.函数运算

在less中可以实现加减乘除的运算

@base_font_size: 10px;
h1 {
  font-size: @base_font_size;
}

h2 {
  font-size: @base_font_size*2;
}

h3 {
  font-size: @base_font_size+4;
}

5.转换成CSS文件

在命令行中执行

lessc styles.less

就可以把less文件转换成css文件

posted @ 2015-10-22 19:11  Xjng  阅读(1108)  评论(0)    收藏  举报