Less学习

Less

1 安装

npm install -g less

2 使用

//命令行编译
$ lessc styles.less styles.css

//压缩
//需要安装插件 clean-css plugin
$ lessc --clean-css styles.less styles.min.css

如果迫不及待想直接开始用

//引用你的less
<link rel="stylesheet/less" type="text/css" href="styles.less" />

//下载less.js进行编译
<script>
  //配置选项
  less = {
    env: "development",
    async: false,
    fileAsync: false,
    poll: 1000,
    functions: {},
    dumpLineNumbers: "comments",
    relativeUrls: false,
    rootpath: ":/a.com/"
  };
</script>
<script src="less.js" type="text/javascript"></script>

语言

1 变量

以 @ 开头 定义变量

属性变量

/* Less */
@color: #999;
@bgColor: skyblue;//不要添加引号

#wrap {
   color: @color;
}

@borderStyle: border-style;
@Soild:solid;
#wrap{
    @{borderStyle}: @Soild;//变量名 必须使用大括号包裹
}

选择器变量名 必须使用大括号包裹

/* Less */
@mySelector: #wrap;
@Wrap: wrap;
@{mySelector}{ //
    color: #999;
    width: 50%;
}
.@{Wrap}{
    color:#ccc;
}

url 变量 - 必须使用大括号包裹

@images: "../img";//需要加引号
body {
    background: url("@{images}/dog.png");//变量名 必须使用大括号包裹
}

声明变量

- 结构: @name: { 属性: 值 ;};
- 使用：@name();

@background: {background:red;};
#main{
    @background();
}

变量运算

• 加减法时 以第一个数据的单位为基准
• 乘除法时 注意单位一定要统一

@width:300px;
@color:#222;
#wrap{
    width:@width-20;
    height:@width-20*5;
    margin:(@width-20)*5;
    color:@color*2;
    background-color:@color + #111;
}

变量作用域

就近原则

/* Less */
@var: @a;
@a: 100%;
#wrap {
    width: @var;
    @a: 9%;
}

/* 生成的 CSS */
#wrap {
    width: 9%;
}

双@@

/* Less */
@fnord:  "I am fnord.";
@var:    "fnord";
#wrap::after{
content: @@var; //将@var替换为其值 content:@fnord;
}
/* 生成的 CSS */
#wrap::after{
    content: "I am fnord.";
}

嵌套

& 父级选择器的名字

/* Less */
#header{
    &:after{
        content:"Less is more!";
    }
    .title{
        font-weight:bold;
    }
    &_content{//理解方式：直接把 & 替换成 #header
        margin:20px;
    }
}
/* 生成的 CSS */
#header::after{
    content:"Less is more!";
}
#header .title{ //嵌套了
    font-weight:bold;
}
#header_content{//没有嵌套！
    margin:20px;
}

媒体查询

/* Less */
#main{
    @media screen{
        @media (max-width:768px){
            width:100px;
        }
    }
    @media tv {
        width:2000px;
    }
}
/* 生成的 CSS */
@media screen and (maxwidth:768px){
    #main{
        width:100px; 
    }
}
@media tv{
    #main{
        width:2000px;
    }
}

混合方法

/* Less */
.card() { // 等价于 .card
    background: #f6f6f6;
    -webkit-box-shadow: 0 1px 2px rgba(151, 151, 151, .58);
    box-shadow: 0 1px 2px rgba(151, 151, 151, .58);
}
#wrap{
.card();//等价于.card;
}

默认参数方法

适用于样式继承

/* Less */
.border(@a:10px,@b:50px,@c:30px,@color:#000){
    border:solid 1px @color;
    box-shadow: @arguments;//指代的是 全部参数
}
#main{
    .border(0px,5px,30px,red);//必须带着单位
}
#wrap{
    .border(0px);
}
#content{
    .border();
}

/* 生成的 CSS */
#main{
    border:solid 1px red;
    box-shadow:0px,5px,30px,red;
}
#wrap{
    border:solid 1px #000;
    box-shadow: 0px 50px 30px #000;
}
#content{
    border:solid 1px #000;
    box-shadow: 10px 50px 30px #000;
}

多态

• 第一个参数 left 要会找到方法中匹配程度最高的，如果匹配程度相同，将全部选择，并存在着样式覆盖替换。
• 如果匹配的参数 是变量，则将会匹配，如 @_ 。

      /* Less */
      .triangle(top,@width:20px,@color:#000){
          border-color:transparent  transparent @color transparent ;
      }
      .triangle(right,@width:20px,@color:#000){
          border-color:transparent @color transparent  transparent ;
      }

      .triangle(bottom,@width:20px,@color:#000){
          border-color:@color transparent  transparent  transparent ;
      }
      .triangle(left,@width:20px,@color:#000){
          border-color:transparent  transparent  transparent @color;
      }
      .triangle(@_,@width:20px,@color:#000){
          border-style: solid;
          border-width: @width;
      }
      #main{
          .triangle(left, 50px, #999)
      }
      /* 生成的 CSS */
      #main{
        border-color:transparent  transparent  transparent #999;
        border-style: solid;
        border-width: 50px;
      }

Link