less详细讲解

115 阅读1分钟
1 在Node.js 环境中使用 Less :

npm install -g less
lessc styles.less styles.css

2 在浏览器环境中使用 Less :

<link rel="stylesheet/less" type="text/css" href="styles.less" /> <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" >\

在vscode 中安装插件把less转成 css
.b(@wd, @style, @color) {
   border: @arguments;
}

.c(@wd:100, @a:left,@color: pink) {
    width: @wd * 2px;
    height: @wd * 2px;
    line-height: @wd * 2px;
    border-radius: 50%;
    background-color: @color;
    text-align: @a;
}
.c1 {
    .c(@a:center,@color: black);
      .b(1px, solid, red);
}
.c2 {
    .c(@a: center, @color:white);
    border: 2px solid pink;
}