首页 > web前端 > js教程 > Less安装与使用步骤详解

Less安装与使用步骤详解

php中世界最好的语言
发布: 2018-05-12 13:55:32
原创
2646 人浏览过

这次给大家带来Less安装与使用步骤详解,Less安装与使用的注意事项有哪些,下面就是实战案例,一起来看一下。

node.js 的安装

官网:http://nodejs.cn/

在命令行检验是否安装成功

切换到项目目录,初始化了一个package.json文件

安装与卸载jQuery包(例子)  安装

  卸载

安装淘宝镜像

2. 安装less

试一试:

test.html

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <link rel="stylesheet" href="style.css" rel="external nofollow" />

</head>

<body>

<p id="box">

  <ul>

    <li>你好</li>

    <li>hello</li>

  </ul>

</p>

</body>

</html>

登录后复制

style.less

1

2

3

4

5

6

7

8

9

10

11

#box{

 width:200px;

 height:200px;

 background-color:blue;

 ul{

  color:white;

  li{

   line-height:50px;

  }

 }

}

登录后复制

在命令行中输入lessc xxx.less xxx.css,

如下:

用浏览器打开test.html 看一下效果吧3. less 的基本用法

https://less.bootcss.com/

变量

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

@red:red;

@w:200px;

#big{

  width:@w;

  height:@w;

  background-color:@red;

  #small{

    width:@w;

    height:@w;

    background-color:@red;

  }

}

p{

  color:@red;

}

登录后复制

混合

1

2

3

4

5

6

7

8

9

10

11

12

.bt{

  width:200px;

  height:200px;

  border-top:2px solid red;

  background-color:red;

}

#big{

  .bt;

  #small{

    .bt;

  }

}

登录后复制

•嵌套

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

#box{

  width:100%;

  height:60px;

  background-color:#ccc;

  h3{

    width:100%;

    height:20px;

    background-color:yellow;

  }

  ul{

    list-style:none;   

    li{

      height:40px;

      line-height:40px;

      float:left;

      padding:0 10px;

    }

  }

}

登录后复制

•运算

1

2

3

4

5

6

7

8

9

10

11

@color:#333;

#box{

  width:100%;

  height:60px;

  background-color:@color+#111;

}

•calc()

@var:50vh/2;

#box{

  width:calc(50% + (@var - 20px));

}

登录后复制

•固定函数

1

2

3

4

5

6

7

@base:#f04615;

@width:0.5;

#box{

  width:percentage(@width);

  color:saturate(@base,5%);

  background-color:spin(lighten(@base,25%),8);

}

登录后复制

•注释

1

2

3

4

5

//单行注释//

/*多行

 注释*/

•引入其他less文件

@import "other.less";

登录后复制

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

JS中常出现哪些BUG和错误

vue个人信息查看与密码修改如何实现

以上是Less安装与使用步骤详解的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
apache - less中import的文件不更新
来自于 1970-01-01 08:00:00
0
0
0
node.js - less-loader 使用Mixins出错
来自于 1970-01-01 08:00:00
0
0
0
javascript - webpack less文件单独打包出错
来自于 1970-01-01 08:00:00
0
0
0
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板