css预处理器怎么用？

css预处理器的用法：

首先我们需要安装css预处理器，这里以less为例，讲解css预处理器的安装以及简单使用。

1、使用npm命令安装less css预处理器

npm install -g less

推荐学习：Node.js教程

2、less简单语法了解：

（1）变量

@变量名: 变量值;    //格式
@bgColor: #f5f5f5;  //格式举例

（2）嵌套

div{
    width: 100px;
    background: red;
    p{
        color: #fff;
        background: skyblue;
    }
}

（3）Mixin

/* 定义一个类 */
.roundedCorners(@radius: 5px) {
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
  border-radius: @radius;
}

/* 引用类 */
#header {
  .roundedCorners;
}
#footer {
  .roundedCorners(10px);
}

3、创建一个main.less文件，进行测试

/* 定义一个类 */
.roundedCorners(@radius: 5px) {
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
  border-radius: @radius;
}


div{
    width: 100px;
    background: red;
    .roundedCorners(10px);
    p{
        color: #fff;
        background: skyblue;
    }
}

4、使用lessc命令进行编译

lessc main.css > main.css

5、编译后的文件

/* 定义一个类 */
div {
  width: 100px;
  background: red;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
div p {
  color: #fff;
  background: skyblue;
}

以上就是css预处理器 less的简单使用。

本文来自css3答疑栏目，欢迎学习！

以上就是css预处理器怎么用？的详细内容，更多请关注易知道|edz.cc其它相关文章！