less的使用总结

 简单执行less

一、使用npm全局安装less：

npm install -g less

二、创建less文件

 

 

三、执行命令将less文件转换成css文件

lessc less/style.less css/style.css

 less语法概括

参考文档：http://www.1024i.com/demo/less/document.html

1、变量

    变量是按需加载的，不必在使用前申明

// 变量
@f9color: #f938ab;
.container {
    width: 100%;
    height: 100%;
    border: 1px solid @f9color;
}

 

2、混合

// 混合
.clearBox {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body,html {
    width: 100%;
    height: 100%;
    .clearBox; // 调用
}

div {
    .clearBox; // 调用
}

3、嵌套

.clearfix {
  display: block;
  zoom: 1;

  &:after { // &表示当前选择器的父代
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

4、嵌套指令并且冒泡

.container {
    width: 100%;
    height: 100%;
    border: 1px solid @f9color;

    .screen-color {
        width: 100px;
        height: 100px;
        @media screen {
            background: @f9color;
            @media (min-width: 768px) {
                background: red;
            }
        }
    }

}

 5、import导入

// 放置位置无要求
// 通过Less依赖文件扩展名的方式区别对待不同的文件，.css文件直接按css导入不编译，其他类型文件包括没有扩展名的文件均按.less文件导入并编译

// 不带导入类型的：
@import "common.less";
// 带导入类型的：（只导入一次）
// 导入类型有：
// reference：使用Less文件但不输出
// inline：在输出中包含源文件但不加工它
// less：将文件作为Less文件对象，无论是什么文件扩展名
// css：将文件作为CSS文件对象，无论是什么文件扩展名
// once：只包含文件一次（默认行为）
// multiple：包含文件多次
@import (once) "common.less";

6、选择器、属性名、urls使用变量

// 选择器使用变量
@bg: bg;
.@{bg} {
    background: @fff;
}

// 编译后：
.bg {
  background: #fff;
}

// 属性使用变量
.position_info (@position: fixed; @propertyOne: top; @propertyOneVal: 0; @propertyTwo: left; @propertyTwoVal: 0) {
    position: @position;
    @{propertyOne}: @propertyOneVal;
    @{propertyTwo}: @propertyTwoVal;
}
// 不传参数调用
.header {
    .position_info; // 不传参数
}
// 编译后
.header {
    position: fixed;
    top: 0;
    left: 0; 
}
// 传参数调用
.header {
    .position_info(absolute, bottom, 0, left, 20px); // 传参数
}
// 编译后
.header {
    position: absolute;
    bottom: 0;
    left: 20px; 
}

// urls使用变量
@imageUrl: '../image';
.wrap {
    background: url('@{imageUrl}/center.png') no-repeat center;
}
// 编译后
.wrap {
    background: url('../image/center.png') no-repeat center;
}

7、避免编译符~

// 使用
@screen330: ~'(max-width: 330px)';
@screen380: ~'(max-width: 380px) and (min-width: 331px)';
.div {
     width: 300px;
     @media screen and  @screen330 {
         width: 100px;
    }
    @media screen and  @screen380 {
         width: 200px;
    }
}
// 编译后
.div {
  width: 300px;
}
@media screen and (max-width: 330px) {
  .div {
    width: 100px;
  }
}
@media screen and (max-width: 380px) and (min-width: 331px) {
  .div {
    width: 200px;
  }
}

8、带参数的属性，参数太多时使用@arguments

// box-shadow阴影设置，依次为水平阴影的位置、垂直阴影的位置，...表示除了前两个参数外后面可接收参数不限制个数
// 此属性接收0-N个参数，因为前两个参数已有默认值
// @arguments:传入参数太多时，可使用@arguments将全部参数都进行赋值
.box_shadow(@x: 0; @y: 0;...){
    box-shadow: @arguments;
    -webkit-box-shadow: @arguments;
    -moz-box-shadow: @arguments;
    -o-box-shadow: @arguments;
}

9、extend扩展

@bg: bg;
.@{bg} {
    &:extend(.app); // &表示当前父选择器
    background: @fff;
}
.app {
    background: #fff;
}
// 编译后
.bg {
  background: #fff;
}
.app,
.bg {
  background: #fff;
}

简单如上，以后有新的体会再进行添加