Less-CSS预处理语言快速入门

Less css预处理语言

特性：变量、继承、运算、函数

http://lesscss.cn/

编译器

1、koala

http://koala-app.com/index-zh.html https://github.com/oklai/koala

2、sublime插件

less       # 语法高亮
less2css   # 保存自动生成同名的css文件      

需要安装node环境+node插件

npm install -g less
npm install -g less-plugin-clean-css       

报错：

less2css error: `lessc` is not available      

重启sublime

配置保存时不进行压缩

{
  "minify": false
}      

语法

1、注释

/**/  # css中的注释
//    # 编译时会被自动过滤      

2、变量

以@开头，例如：

@变量:值;

@text_with: 200px;

.box{
    width: @text_with;
    heigth: @text_with;
    background-color: yellow;
}      

编译结果

.box {
  width: 200px;
  height: 200px;
  background-color: yellow;
}      

3、混合

类似其他语言中的函数

.border{
    border: solid 5px pink;
}

.box-border{
    .border;
    width: 200px;
    height: 200px;
    background-color: green;
}      

.border {
  border: solid 5px pink;
}

.box-border {
  border: solid 5px pink;
  width: 200px;
  height: 200px;
  background-color: green;
}      

4、混合带参数

.box{
    width: 200px;
    height: 200px;
    background-color: yellow;
    .border(green);   // 混合
}

.border(@color){
    border: solid 5px @color;
}      

.box {
  width: 200px;
  height: 200px;
  background-color: yellow;
  border: solid 5px green;
}      

5、混合默认参数

.box{
    width: 200px;
    height: 200px;
    background-color: yellow;
    .border();   
}

.border(@color: 10px){
    border: solid 5px @color;
}      

.box {
  width: 200px;
  height: 200px;
  background-color: yellow;
  border: solid 5px 10px;
}      

6、混合示例

.box{
    width: 200px;
    height: 200px;
    background-color: green;
    .border-radius()
}

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

.box {
  width: 200px;
  height: 200px;
  background-color: green;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
      

7、匹配模式

类似其他语言中的if语句

@charset "utf-8";

.box-line(top, @boder-width:5px){
    border-top: solid @boder-width red;
}

.box-line(bottom, @boder-width:5px){
    border-bottom: solid @boder-width red;
}

.box-line(left, @boder-width:5px){
    border-left: solid @boder-width red;
}

.box-line(right, @boder-width:5px){
    border-right: solid @boder-width red;
}

// 不管匹配到谁，以下样式都会被输出
.box-line(@_, @boder-width:5px){
    background-color: green;
    width: 200px;
    height: 200px;
}

.box{
    .box-line(right)
}
      

@charset "utf-8";

.box {
  border-right: solid 5px red;
  background-color: green;
  width: 200px;
  height: 200px;
}
      

8、运算

支持 + - * /

@default-width: 20px;

.box{
    width: @default-width + 20;
}      

.box {
  width: 40px;
}
      

9、嵌套

.list{
    list-style: none;
    width: 500px;
    margin: 30px auto;

    li{
        height: 20px;

    }

    a{
        float: left;

        // & 表示上一层选择器
        &:hover{
            color: red;
        }

    }

}      

编译效果

.list {
  list-style: none;
  width: 500px;
  margin: 30px auto;
}

.list li {
  height: 20px;
}

.list a {
  float: left;
}

.list a:hover {
  color: red;
}
      

10、@arguments

获取所有参数

.box{
    .border-color();
}

.border-color(@width: 30px, @color: red){
    border: solid @arguments;
}      

.box {
  border: solid 30px red;
}
      

11、避免编译

.box{
    height: calc(20px + 10px);
    // 避免编译
    width: ~'calc(20px + 10px)';
}      

.box {
  height: calc(20px + 10px);
  width: calc(20px + 10px);
}
      

12、!important

.box{
    height: 20px !important;
}      

.box {
  height: 20px !important;
}      

12、文件导入

hi.css

.hi{
    height: 20px;
}      

hello.less

.hello{
    width: 20px
}      

main.less

// 引入less文件
@import "hello";

// 引入 css文件
@import "hi.css";

// 引入 css文件 转为 less
@import (less) "hi.css";

      

main.css

@import "hi.css";
.hello {
  width: 20px;
}
.hi {
  height: 20px;
}