css进阶 less的使用

less 官网http://lesscss.org/

less.png

npm install -g less
# 查看版本
lessc -v

编写less文件

• 声明字符集

@charset "UTF-8";

• 定义less变量@mainColor

@color: #61A34F;

a {
    background-color: @color;
}
div p {
    background-color: @color;
}

• less注释格式(两种)

/* 这种类型的格式会被转换到生成的css文件 */

// 这种类型的格式不会被转换到生成的css文件

• 拼接使用less变量

@pageClass: blackPage

.@{pageClass}{
    background-color: #444444;
}

• mixin(混入), 分为类混入和函数混入

/* 类混入 */
.w50-h50{
  widht: 50px;
  height: 50px;
}

.main-color{
  color: #62868D;
}
/* 定义宽50高50的方块样式 */
.atom-frame{
  .w50-50;
  .main-color;
}

/* 函数混入 */
// 定义函数(默认值为left)
.f(@direction:left){
    float: @direction;
}
// 调用函数
.atom{
  font-size: 50px;
  .f(right);
}

• 嵌套

/* 为 div 的子标签 p 添加color样式 */
div {
  p{
  color: #62868D;
  }
}

// 当需要与父级连接的时候,如`div:hover`,使用`&`代替父元素
.atom {
  background-color: #62868D
  &:hover{
    background-color: #81D453
  }
}

• 数值运算

bootstrap默认的12栅格

动态计算, 子元素宽度

    @cell-color: #413F43;
    @cell-number: 5;
    .container{
        margin-top: 50px;
        border: 3px  solid #413F43;
        overflow: hidden;
        .cell {
            width: 100%/@cell-number;
            height: 100px;
            float: left;
            padding: 5px;
            border: 2px solid #9C5E56;
            box-sizing: border-box;
            background-color: @cell-color;
            &:nth-child(2n){

                background-color: lighten(@cell-color, 10%);

            }
            &:hover {
                background-color: lighten(@cell-color, 50%);
            }

        }

    }

/* 当浮动到 */
/*使用内置函数进行运算, 例如, 当鼠标浮动到某方块时, 颜色亮度提升30% 参考: http://lesscss.org/functions/ */
@cell-color: #62868D;
.cell {
    width: 100px;
    height: 100px;
    background-color: @cell-color;
    &:hover {
        background-color: lighten(@cell-color, 20%);
    }
}

• 导入其它文件的less规则

/* 以导入同级目录下 mystyle.less为例 */
@import "mystyle"

less编译

# 使用node全局安装lessc后, 对文件`base.less`进行编译(类似javac)
lessc base.less base.css