如何使用less

转载于 2017-10-29 21:45:34 发布 · 846 阅读

文章标签：

#less

less 专栏收录该内容

0 篇文章

订阅专栏

1.首先安装node.js

方法：查看我的博客

2.在npm节点上安装less，命令行为

npm -install -g less

3.创建一个.less文件和.hrml文件

.less

.container{
  h1{
    font-size: 25px;
    color: darkorange;
  }
  p{
    font-size: 25px;
    color: cadetblue;
  }

  .myclass{
    h1{
      font-size: 25px;
      color: cornflowerblue;
    }
    p{
      font-size: 25px;
      color: aquamarine;
    }
  }
}

.class1{

  font-size: 30px;
  color: cornflowerblue;
}


.class2{

  font-size: 100px;
  color: aqua;

}

.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body class="container">
    <h1>113144444443</h1>
    <p class="myclass">Less 文件学习</p>
    <div class="class1 class2">test</div>
</body>
</html>

4.运行命令行