三十分钟学会 Less

每一门技术的出现都是为了解决现存的问题，同样的，Less 的出现是为了解决 CSS 中过于呆板的写法。Less 官方文档中对 Less 的使用有详细的介绍，总结一下为：Less = 变量 + 混合 + 函数。如果你对 js 和 css 有所了解，那么就可以很快的掌握并在你的项目中使用 Less。

一、Less 使用初体验

1. 使用 Less 写样式

使用 Npm 全局安装 Less

$ npm install less -g

创建一个空文件夹，这里命名为：learn-less

在根目录下创建 index.html 文件，复制内容如下：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>初识 Less</title>

    <link href="./main.css" rel="stylesheet">

</head>

<body>

    <div class="container">1</div>

    <div class="container2">2</div>

    <div class="container3">3</div>

</body>

</html>

在根目录下创建 main.less 文件，复制内容如下：

// main.less

@width: 100%;

@height: 100px;

@color: red;

.container{

   width: @width;

   height: @height;

   background-color: @color;

   margin-bottom: 5px;

 }

.container2{

  width: @width;

  height: @height;

  background-color: @color;

  margin-bottom: 5px;

}

.container3{

  width: @width;

  height: @height;

  background-color: @color;

  margin-bottom: 5px;

}

现在打开浏览器看一下，会发现并没有加载样式。这是因为 index.html 中引入的样式文件是 main.css 而不是 main.less。所以接下来，我们需要将 main.less 转换为 main.css，不用担心，这一步骤并不需要你手动操作，仅仅是运行一条命令就会自动完成转换。

$ lessc main.less

操作完以上步骤就会发现在根目录下生成了一个 main.css 文件，此时再打开浏览器看看，样式已经出现了。

main.css 转义内容为：

.container {

  width: 100%;

  height: 100px;

  background-color: red;

  margin-bottom: 5px;

}

.container2 {

  width: 100%;

  height: 100px;

  background-color: red;

  margin-bottom: 5px;

}

.container3 {

  width: 100%;

  height: 100px;

  background-color: red;

  margin-bottom: 5px;

}

如果你使用了 Webstorm 作为开发工具，那么连手动输入命令行这一步都可以跳过，因为 Webstorm 会在你的 .less 文件被修改后自动生成对应的 .css 文件，具体配置跳转：Webstorm 配置 Less 自动转译成 css

2. 感受 Less 的便利

现在有一个新的需求，需要将三个 div 的背景颜色改成蓝色（blue），如果是之前 css 的写法需要依次找到 container、container2、container3，对应修改里面的 background-color 属性，但是使用 less 我们仅仅修改前面定义过的变量值即可。

// main.less

@width: 100%;

@height: 100px;

@color: blue;

...

使用 lessc main.less 进行转译后打开浏览器可以看到三个 div 的背景颜色已经被改变了。

二、变量

在前面介绍的案例中已经使用了“变量”的概念，是不是感觉和 js 很像，事实上 less 就是用 js 的写法来写 css。

官网在介绍变量的时候会给出很多应用场景，总结一下就是使用 @ 符号定义变量，使用 @ 符号获取变量，仅仅将 @变量名 看成是一个字符串。

@classname: main;

@color: red;

.@classname{

    background-color: @color;

}

从上面例子中可以看到，变量不仅仅可以作为样式属性值：background-color: @color;，还可以作为类名：.@classname 表示的就是 .main。这也就是为什么说仅仅将 @变量名看成是一个字符串。

三、混合

先看一个 example.css 文件：

#menu a {

    color: #111;

    border-top: dotted 1px black;

    border-bottom: solid 2px black;

}

#menu span {

    height: 16px;

    border-top: dotted 1px black;

    border-bottom: solid 2px black;

}

#menu p {

    color: red;

    border-top: dotted 1px black;

    border-bottom: solid 2px black;

}

可以看到上面三个样式中都有 border-top 和 border-bottom 两个属性，并且内容完全相同；在传统 CSS 写法中只能这样一遍有一遍的去书写重复的内容，在 Less 中通过将公共属性抽取出来作为一个公共类的方式规避这一点。

// example2.less

.bordered {

    border-top: dotted 1px black;

    border-bottom: solid 2px black;

}

#menu a {

    color: #111;

    .bordered;

}

#menu span {

    height: 16px;

    .bordered;

}

#menu p {

    color: red;

    .bordered();

}

将以上 example2.less 进行转译成 example2.css 文件为：

.bordered {

  border-top: dotted 1px black;

  border-bottom: solid 2px black;

}

#menu a {

  color: #111;

  border-top: dotted 1px black;

  border-bottom: solid 2px black;

}

#menu span {

  height: 16px;

  border-top: dotted 1px black;

  border-bottom: solid 2px black;

}

#menu p {

  color: red;

  border-top: dotted 1px black;

  border-bottom: solid 2px black;

}

可以看到 examle2.css 与 example.css 很相似，只是多了一个 .bordered 样式。

修改 example2.less，将 .bordered 写成 .bordered()，此时在进行转译之后会看到 example2.css 和 example.css 文件就完全一样了，使用 less 书写更加简单。

// example2.less

.bordered() {

    border-top: dotted 1px black;

    border-bottom: solid 2px black;

}

...

总结：

混合也是减少代码书写量的一个方法；
混合的类名在定义的时候加上小括弧 ()，那么在转译成 css 文件时就不会出现；
混合的类名在被调用的时候加上小括弧 ()和不加上小括弧 ()是一样的效果，看个人习惯，如：第三行和第八行转译成 css 是一样的。
```
1 #menu span {

2     height: 16px;

3     .bordered;

4 }

5

6 #menu p {

7     color: red;

8     .bordered();

9 }
```

四、函数

曾几何时，在书写呆板的 css 时有没有想过让类名动态化，根据不同的参数生成不同的样式。看下面的示例：

// func.less

.border-radius(@radius) {

  -webkit-border-radius: @radius;

     -moz-border-radius: @radius;

          border-radius: @radius;

}

#header {

  .border-radius(4px);

}

.button {

  .border-radius(6px);

}

使用 $ lessc func.less 进行转译 func.css 文件内容如下：

#header {

  -webkit-border-radius: 4px;

  -moz-border-radius: 4px;

  border-radius: 4px;

}

.button {

  -webkit-border-radius: 6px;

  -moz-border-radius: 6px;

  border-radius: 6px;

}

可以看到，这里就用到了函数的概念，在 #header 和 .button 中分别传入不同的参数，结果也就生成不同的代码。

关于 less 中函数的写法还有以下几种：

// 函数的参数设置默认值：

.border-radius(@radius: 5px) {

  -webkit-border-radius: @radius;

  -moz-border-radius: @radius;

  border-radius: @radius;

}

// 函数有多个参数时用分号隔开

.mixin(@color; @padding:2) {

  color-2: @color;

  padding-2: @padding;

}

// 函数如果没有参数，在转译成 css 时就不会被打印出来，详见上面混合中的示例

.wrap() {

  text-wrap: wrap;

}

// 函数参数如果有默认，调用时就是通过变量名称，而不是位置

.mixin(@color: black; @margin: 10px; @padding: 20px) {

  color: @color;

  margin: @margin;

  padding: @padding;

}

.class1 {

  .mixin(@margin: 20px; @color: #33acfe);

}

// 函数参数有个内置变量 @arguments，相当于 js 中的 arguments

.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {

  -webkit-box-shadow: @arguments;

     -moz-box-shadow: @arguments;

          box-shadow: @arguments;

}

// 函数名允许相同，但参数不同，类似于 java 中多态的概念

.mixin(@color: black) {

.mixin(@color: black; @margin: 10px) {

当然，上面是开发人员自定义的函数，Less 也为我们定义了很多好用的内置函数。关于内置函数，如果掌握，可以在开发过程中节约很多时间，由于内置函数数量很多，这里就不一一介绍，传送门：Less 内置函数官方文档。

五、父子元素的写法

在 css 中父子元素的写法通常如下：

.container {

    padding: 0;

}

.container .article {

    background-color: red;

}

在 Less 写法如下，父子嵌套关系一目了然。

.container {

    padding: 0;

    .article {

        background-color: red;

    }

}

当然，父子元素还要一种是伪类的写法，在 css 中写法如下：

#header :after {

  content: " ";

  display: block;

  font-size: 0;

  height: 0;

  clear: both;

  visibility: hidden;

}

在 less 中写法如下，可以看到引入了新的符号 &，以 & 来代替主类 #header。

#header {

  &:after {

    content: " ";

    display: block;

    font-size: 0;

    height: 0;

    clear: both;

    visibility: hidden;

  }

}

六、神奇 @import

在传统 css 文件中，每个文件都是独立的。在 less 中可以像 js 的模块那样在一个 less 文件中引入另一个 less 文件。

创建 one.less 文件：

.container {

  width: 100px;

  height: 200px;

}

创建 two.less 文件：

@import "one";

使用 $ lessc two.less 转译成 two.css 文件，可以看到内容如下：

.container {

  width: 100px;

  height: 200px;

}

@import 的作用可以看成是将 one.less 的内容复制一份到当前 .less 文件中。

那么如果 two.less 中也有一个类名叫 container 的，使用 @import 之后会变成什么样子呢？这个留给自行测试好啦。

a{color:#c8c8c8}.note .post #note-book-info{padding:20px;background-color:hsla(0,0%,71%,.1);border:1px solid #e1e1e1;border-radius:4px;font-size:12px;position:relative;height:147px}body.reader-night-mode .note .post #note-book-info{border-color:#2f2f2f}.note .post #note-book-info .btn{position:absolute;right:20px;top:20px}.note .post #note-book-info .banner{position:absolute;left:20px;top:20px;z-index:1;width:80px;height:107px;border-radius:4px;overflow:hidden}.note .post #note-book-info .banner img{width:100%;height:100%}.note .post #note-book-info .info{width:100%;height:100%;box-sizing:border-box;padding-left:100px}.note .post #note-book-info .info .title{color:#333;font-size:17px;line-height:1.8;margin:3px 0 5px;display:block}body.reader-night-mode .note .post #note-book-info .info .title{color:#c8c8c8}.note .post #note-book-info .info .meta{color:#969696;font-size:12px;margin-bottom:10px}.note .post #note-book-info .info .summary{color:#969696;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.note .post .follow-detail{padding:20px;background-color:hsla(0,0%,71%,.1);border:1px solid #e1e1e1;border-radius:4px;font-size:12px}.note .post .follow-detail li{line-height:20px}.note .post .follow-detail .avatar{float:left;margin-right:10px;width:48px;height:48px}.note .post .follow-detail .info{min-height:47px}.note .post .follow-detail .info img.badge-icon{margin-right:3px;width:20px;height:20px;vertical-align:middle}.note .post .follow-detail .info .title{margin-right:3px;font-size:17px;line-height:1.8;vertical-align:middle}.note .post .follow-detail .ic-man,.note .post .follow-detail .ic-woman{font-size:15px;vertical-align:middle}.note .post .follow-detail .tag{padding:1px 2px;font-size:12px;color:#ea6f5a;border:1px solid #ea6f5a;border-radius:3px}.note .post .follow-detail .info p{margin-bottom:0;color:#969696}.note .post .follow-detail .btn,.note .post .follow-detail .user-follow-button-footer{float:right;margin-top:4px;padding:8px 0;width:100px;font-size:16px}.note .post .follow-detail .signature{margin-top:20px;padding-top:20px;border-top:1px solid #e1e1e1;color:#969696;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.note .post .dividing-line{border-bottom:1px solid #f0f0f0}.note .post .support-author{min-height:144px;padding:20px 0;text-align:center;clear:both}.note .post .support-author p{padding:0 30px;margin-bottom:20px;min-height:24px;font-size:17px;font-weight:700;color:#969696}.note .post .support-author .btn-pay{margin-bottom:20px;padding:8px 25px;font-size:16px;color:#fff;background-color:#ea6f5a;border-radius:20px}.note .post .support-author .btn-pay:hover{background-color:#ec6149}.note .post .support-author .supporter{height:50px}.note .post .support-author .supporter .support-list{list-style:none;display:inline-block}.note .post .support-author .supporter .support-list li{margin:0 -5px;display:inline-block}.note .post .support-author .supporter .support-list .avatar{width:40px;height:40px}.note .post .support-author .supporter .support-list .avatar img{border:3px solid #fff}.note .post .support-author .supporter .modal-wrap{margin-left:5px;font-size:14px;color:#646464;vertical-align:-2px;cursor:pointer;display:inline-block}.note .post .support-author .supporter span{cursor:pointer;padding-left:5px;margin-right:-10px;font-size:13px}.note .post .meta-bottom{margin-top:40px;margin-bottom:80px}.note .post .meta-bottom .share-group{float:right;margin-top:6px}.note .post .meta-bottom .share-group .share-circle{width:50px;height:50px;margin-left:5px;text-align:center;border:1px solid #dcdcdc;border-radius:50%;vertical-align:middle;display:inline-block;position:relative}.note .post .meta-bottom .share-group .share-circle .qrcode{width:200px;height:220px;box-shadow:0 3px 10px rgba(0,0,0,.15);box-sizing:border-box;background-color:#fff;position:absolute;top:-230px;left:50%;margin-left:-100px;display:none;border-radius:6px;padding:15px;border:1px solid #ddd}.note .post .meta-bottom .share-group .share-circle .qrcode:after{border-top:20px solid #dcdcdc;z-index:1;bottom:-25px}.note .post .meta-bottom .share-group .share-circle .qrcode:after,.note .post .meta-bottom .share-group .share-circle .qrcode:before{width:25px;height:25px;content:"";border-left:15px solid transparent;border-right:15px solid transparent;position:absolute;left:50%;margin-left:-12px}.note .post .meta-bottom .share-group .share-circle .qrcode:before{border-top:20px solid #fff;z-index:2;bottom:-24px}.note .post .meta-bottom .share-group .share-circle .qrcode img{width:100%}.note .post .meta-bottom .share-group .share-circle .qrcode p{font-size:14px}.note .post .meta-bottom .share-group .share-circle i{margin-top:10px;font-size:24px;line-height:2}.note .post .meta-bottom .share-group .share-circle .ic-wechat{color:#00bb29}.note .post .meta-bottom .share-group .share-circle .ic-weibo{color:#e05244}.note .post .meta-bottom .share-group .share-circle .ic-picture{color:#9b9b9b}.note .post .meta-bottom .share-group .share-circle:hover{background-color:hsla(0,0%,71%,.1)}.note .post .meta-bottom .share-group .more-share{width:auto;padding:4px 18px;font-size:14px;color:#9b9b9b;line-height:40px;border-radius:50px}.note .post .meta-bottom .share-group .popover-content{padding:0}.note .post .meta-bottom .share-group .share-list{margin:0;list-style:none}.note .post .meta-bottom .share-group .share-list li{line-height:20px}.note .post .meta-bottom .share-group .share-list a{padding:5px 10px;display:block}.note .post .meta-bottom .share-group .share-list a:hover{background-color:#f0f0f0}.note .post .meta-bottom .share-group .share-list i{margin-right:10px}.note .post .meta-bottom .share-group .share-list span{vertical-align:middle}.note .post #web-note-ad-1{display:block;width:100%}.note .post #web-note-ad-1 img{width:100%}.note .post .comment-list{padding-top:20px}.note .post .comment-list .new-comment{position:relative;margin-left:48px}.note .post .comment-list .new-comment .avatar{position:absolute;left:-48px}.note .post .comment-list .new-comment .sign-container,.note .post .comment-list .new-comment textarea{padding:10px 15px;width:100%;height:80px;font-size:13px;border:1px solid #dcdcdc;border-radius:4px;background-color:hsla(0,0%,71%,.1);resize:none;display:inline-block;vertical-align:top;outline-style:none}.note .post .comment-list .new-comment .sign-container{text-align:center}.note .post .comment-list .new-comment .btn-sign{width:78px;margin:11px 10px 0 0;padding:7px 18px;font-size:16px;border:none;border-radius:20px;color:#fff!important;background-color:#3194d0;outline:none}.note .post .comment-list .new-comment .btn-sign:hover{background-color:#187cb7}.note .post .comment-list .new-comment .write-function-block{height:50px}.note .post .comment-list .new-comment .write-function-block .emoji-modal{left:-48px}.note .post .comment-list .new-comment .emoji{float:left;margin-top:14px}.note .post .comment-list .new-comment .emoji i{font-size:20px;color:#969696}.note .post .comment-list .new-comment .emoji i:hover{color:#2f2f2f}.note .post .comment-list .new-comment .emoji-modal:after,.note .post .comment-list .new-comment .emoji-modal:before{left:48px}.note .post .comment-list .new-comment .hint{float:left;margin:20px 0 0 20px;font-size:13px;color:#969696}.note .post .comment-list .new-comment .btn-send{float:right;width:78px;margin:10px 0;padding:8px 18px;font-size:16px;border:none;border-radius:20px;color:#fff!important;background-color:#42c02e;cursor:pointer;outline:none;display:block}.note .post .comment-list .new-comment .btn-send:hover{background-color:#3db922}.note .post .comment-list .new-comment .cancel{float:right;margin:18px 30px 0 0;font-size:16px;color:#969696}.note .post .comment-list .new-comment .cancel:hover{color:#2f2f2f}.note .post .comment-list .new-comment span{font-size:14px;vertical-align:-7px}.note .post .comment-list .top-title{padding-bottom:20px;font-size:17px;font-weight:700;border-bottom:1px solid #f0f0f0}.note .post .comment-list .top-title span{vertical-align:middle}.note .post .comment-list .comment{padding:20px 0 30px;border-bottom:1px solid #f0f0f0}.note .post .comment-list .comment:last-child{border-bottom:none}.note .post .comment-list .comment p{font-size:16px}.note .post .comment-list .author{margin-bottom:15px}.note .post .comment-list .avatar{margin-right:5px;width:38px;height:38px;vertical-align:middle;display:inline-block}.note .post .comment-list .comment-wrap .comment-delete,.note .post .comment-list .comment-wrap .report{float:right;margin:12px 0 0 10px;display:none}.note .post .comment-list .comment-wrap:hover .comment-delete,.note .post .comment-list .comment-wrap:hover .report{display:inherit}.note .post .comment-list p{margin:10px 0;line-height:1.5;font-size:16px;word-break:break-word!important;word-break:break-all}.note .post .comment-list p a,.note .post .comment-list p a:hover{color:#3194d0}.note .post .comment-list .info{display:inline-block;vertical-align:middle}.note .post .comment-list .name{font-size:15px;color:#333}.note .post .comment-list .name:hover{color:#2f2f2f}.note .post .comment-list .badge-icon{height:17px;width:17px}.note .post .comment-list .author-tag{margin-left:2px;padding:0 2px;font-size:12px;color:#ea6f5a;border:1px solid #ea6f5a;border-radius:3px;vertical-align:middle}.note .post .comment-list .meta{font-size:12px;color:#969696}.note .post .comment-list .meta span{margin-right:6px}.note .post .comment-list .tool-group a{margin-right:10px;font-size:0;color:#969696;display:inline-block}.note .post .comment-list .tool-group a:hover{color:#333}body.reader-night-mode .note .post .comment-list .tool-group a:hover{color:#c8c8c8}.note .post .comment-list .tool-group a i{margin-right:5px;font-size:18px;vertical-align:middle}.note .post .comment-list .tool-group a span{vertical-align:middle;font-size:14px}.note .post .comment-list .normal-comment-list{margin-top:30px}.note .post .comment-list .normal-comment-list .top-title .author-only{margin-left:10px;padding:4px 8px;font-size:12px;color:#969696;border:1px solid #e1e1e1;border-radius:12px}.note .post .comment-list .normal-comment-list .top-title .author-only.active{color:#fff;border:1px solid #ea6f5a;background-color:#ea6f5a}.note .post .comment-list .normal-comment-list .top-title .close-btn{margin-left:10px;font-size:12px;color:#969696}.note .post .comment-list .normal-comment-list .top-title .pull-right a{margin-left:10px;font-size:12px;font-weight:400;color:#969696;display:inline-block}.note .post .comment-list .normal-comment-list .top-title .pull-right .active,.note .post .comment-list .normal-comment-list .top-title .pull-right a:hover{color:#2f2f2f}.note .post .comment-list .normal-comment-list .close-comment,.note .post .comment-list .normal-comment-list .no-author-comment,.note .post .comment-list .normal-comment-list .no-comment{width:226px;height:92px;margin:30px auto 20px;background:url(//cdn2.jianshu.io/assets/web/icon_comment_no-1b12627d360515e52c3c4dfc2f6b0eb7.png) no-repeat;background-size:contain}.note .post .comment-list .normal-comment-list .close-comment{background:url(//cdn2.jianshu.io/assets/web/icon_comment_close-1977c458f0eb7900b53b422cac10c713.png) no-repeat;background-size:contain}.note .post .comment-list .normal-comment-list .no-author-comment{background:url(//cdn2.jianshu.io/assets/web/icon_comment_no_writer-511f994389aa2409f189d680b13ff5ed.png) no-repeat;background-size:contain}.note .post .comment-list .normal-comment-list .text{margin-bottom:50px;text-align:center;font-size:12px;color:#969696}.note .post .comment-list .normal-comment-list .text a,.note .post .comment-list .normal-comment-list .text a:hover{color:#3194d0}.note .post .comment-list .normal-comment-list .open-block{padding:30px 0 50px;text-align:center;border-top:1px solid #f0f0f0}.note .post .comment-list .normal-comment-list .open-block .open-btn{padding:10px 20px;font-size:16px;color:#969696;border:1px solid #dcdcdc;border-radius:20px}.note .post .comment-list .sub-comment-list{margin-top:20px;padding:5px 0 5px 20px;border-left:2px solid #d9d9d9}.note .post .comment-list .sub-comment-list p{margin:0 0 5px;font-size:14px;line-height:1.5}.note .post .comment-list .sub-comment-list a,.note .post .comment-list .sub-comment-list a:hover{color:#3194d0}.note .post .comment-list .sub-comment-list .new-comment{margin:0}.note .post .comment-list .sub-comment-list .new-comment .sign-container,.note .post .comment-list .sub-comment-list .new-comment textarea{width:100%}.note .post .comment-list .sub-comment-list .new-comment .emoji{margin:15px 0 0}.note .post .comment-list .sub-comment-list .emoji-modal-wrap .emoji-modal{left:-48px}.note .post .comment-list .sub-comment{margin-bottom:15px;padding-bottom:15px;border-bottom:1px dashed #f0f0f0}.note .post .comment-list .sub-comment:last-child{margin:0;padding:0;border:none}.note .post .comment-list .sub-comment .report,.note .post .comment-list .sub-comment .subcomment-delete{float:right;margin:1px 0 0 10px;display:none}.note .post .comment-list .sub-comment:hover .report,.note .post .comment-list .sub-comment:hover .subcomment-delete{display:inherit}.note .post .comment-list .sub-tool-group{font-size:12px;color:#969696}.note .post .comment-list .sub-tool-group a{margin-left:10px;color:#969696}.note .post .comment-list .sub-tool-group a:hover{color:#333}.note .post .comment-list .sub-tool-group a i{margin-right:5px;font-size:14px;vertical-align:middle}.note .post .comment-list .sub-tool-group a span{vertical-align:middle}.note .post .comment-list .more-comment{font-size:14px;color:#969696;border:none}.note .post .comment-list .sub-comment-list .add-comment-btn{color:#969696}.note .post .comment-list .sub-comment-list .add-comment-btn:hover{color:#333}.note .post .comment-list .sub-comment-list .add-comment-btn i{margin-right:5px}.note .post .comment-list .line-warp{margin-left:10px;padding-left:10px;border-left:1px solid #d9d9d9}.note .math-block{display:block;margin:0 auto}.note .math-inline{vertical-align:top}.like-user{text-align:left}.like-user .modal-dialog{width:620px}.like-user .modal-body{height:500px}.like-user .modal-body ul{margin:0;list-style:none}.like-user .modal-body li{padding:15px;border-bottom:1px solid #f0f0f0}.like-user .modal-body .avatar{margin-right:5px;width:32px;height:32px;vertical-align:middle;display:inline-block}.like-user .modal-body .name{font-size:15px;color:#333;vertical-align:middle;display:inline-block}.like-user .modal-body .name:hover{color:#2f2f2f}.like-user .modal-body .time{float:right;margin-top:7px;font-size:12px;color:#969696}.like-user .modal-footer{display:none}.reward-users-modal .v-modal{width:620px;height:567px}.reward-users-modal .v-modal main{padding:0}.reward-users-modal .v-modal ul{list-style-type:none}.reward-users-modal .v-modal li{padding:15px;border-bottom:1px solid #f0f0f0;text-align:left}body.reader-night-mode .reward-users-modal .v-modal li{border-color:#2f2f2f}.reward-users-modal .v-modal li .avatar{margin-right:5px;width:32px;height:32px;vertical-align:middle;display:inline-block}.reward-users-modal .v-modal li .name{font-size:15px;color:#333;vertical-align:middle;display:inline-block}body.reader-night-mode .reward-users-modal .v-modal li .name{color:#c8c8c8}.reward-users-modal .v-modal li .time{float:right;margin-top:7px;font-size:12px;color:#969696}.add-self .modal-dialog,.requests .modal-dialog{width:620px}.add-self .modal-body,.requests .modal-body{height:500px}.add-self .modal-body ul,.requests .modal-body ul{margin:0;list-style:none}.add-self .modal-body ul .default,.requests .modal-body ul .default{padding-top:200px;font-size:15px;color:#999;text-align:center}.add-self .modal-body ul .default a,.requests .modal-body ul .default a{color:#3194d0}.add-self .modal-body li,.requests .modal-body li{position:relative;padding:20px;border-bottom:1px solid #f0f0f0;line-height:normal}.add-self .modal-body .avatar-collection,.requests .modal-body .avatar-collection{margin-right:5px;vertical-align:middle;display:inline-block}.add-self .modal-body .collection-info,.requests .modal-body .collection-info{vertical-align:middle;display:inline-block}.add-self .modal-body .collection-name,.requests .modal-body .collection-name{font-size:15px;font-weight:700;color:#333;display:block}.add-self .modal-body .collection-name:hover,.requests .modal-body .collection-name:hover{color:#2f2f2f}.add-self .modal-body .meta,.requests .modal-body .meta{font-size:12px;color:#969696;display:inline-block}.add-self .modal-body .author-name,.add-self .modal-body .author-name:hover,.requests .modal-body .author-name,.requests .modal-body .author-name:hover{color:#3194d0}.add-self .modal-body .follow,.add-self .modal-body .follow-cancel,.add-self .modal-body .follow-each,.add-self .modal-body .following,.requests .modal-body .follow,.requests .modal-body .follow-cancel,.requests .modal-body .follow-each,.requests .modal-body .following{float:right;margin-top:12.5px;padding:5px 20px;width:100px;font-size:15px}.add-self .modal-body .search,.requests .modal-body .search{padding:20px 22px 0}.add-self .modal-body .search input,.requests .modal-body .search input{width:100%;padding:7px 18px;background-color:hsla(0,0%,71%,.25);border:none;border-radius:40px;font-size:15px}.add-self .modal-body .search a,.requests .modal-body .search a{position:absolute;top:25px;right:37px;color:#969696}.add-self .modal-body .status,.requests .modal-body .status{font-size:12px;vertical-align:middle}.add-self .modal-body span.has-add,.requests .modal-body span.has-add{color:#42c02e}.add-self .modal-body .action-btn,.requests .modal-body .action-btn{position:absolute;top:50%;right:20px;margin-top:-12px;padding:2px 8px;font-size:13px;border-radius:12px;line-height:normal}.add-self .modal-body .push,.add-self .modal-body .repush,.requests .modal-body .push,.requests .modal-body .repush{color:#42c02e;border:1px solid #42c02e}.add-self .modal-body .push:hover,.add-self .modal-body .repush:hover,.requests .modal-body .push:hover,.requests .modal-body .repush:hover{background-color:rgba(66,192,46,.05)}.add-self .modal-body .revoke,.requests .modal-body .revoke{color:#969696;border:1px solid #969696}.add-self .modal-body .revoke:hover,.requests .modal-body .revoke:hover{background-color:hsla(0,0%,71%,.05)}.add-self .modal-body .remove,.requests .modal-body .remove{color:#ea6f5a;border:1px solid #ea6f5a}.add-self .modal-body .remove:hover,.requests .modal-body .remove:hover{background-color:rgba(236,97,73,.05)}.add-self .modal-footer,.requests .modal-footer{display:none}.add-self .load-more,.requests .load-more{width:200px;margin-bottom:30px}.add-self .new-collection-btn,.requests .new-collection-btn{padding-left:10px;font-size:13px;font-weight:400;vertical-align:middle}.add-self .new-collection-btn a,.requests .new-collection-btn a{color:#42c02e}.requests .modal-header .modal-title{display:inline-block}.requests .modal-header .search{position:absolute;top:15px;right:80px}.requests .modal-header .search input{display:inline-block;width:240px;padding:7px 18px;background-color:hsla(0,0%,71%,.25);border:none;border-radius:40px;font-size:15px}.requests .modal-header .search a{position:absolute;top:6px;right:12px;color:#969696}.requests .modal-dialog{width:960px}.requests .modal-body{padding-bottom:30px}.requests .modal-body li{display:inline-block;padding:25px 20px;width:33.3333%;border-right:1px solid #f0f0f0}.requests .modal-body .collection-info{position:absolute;top:50%;transform:translateY(-50%);-webkit-transform:translateY(-50%);margin-left:5px;width:250px}.requests .modal-body .collection-info .collection-name{max-width:180px}.requests .modal-body .avatar-collection{width:40px;height:40px}.requests .modal-body .meta{display:block;padding-top:2px}.requests .new-collection-btn{padding-left:10px;font-size:13px;color:#42c02e}.requests .create-collection-btn{padding:20px;font-size:15px}.requests .create-collection-btn a{color:#42c02e}.requests .create-collection-btn i{padding-right:3px}.requests .title{padding:20px 0 10px 20px;font-size:15px;color:#333;background-color:#f4f4f4;border-bottom:1px solid #f0f0f0}.requests .show-more{padding:10px 0;text-align:center;font-size:13px}.requests .show-more a{color:#969696}.requests .show-more i{padding-left:5px;margin-right:-15px}.modal-requests-placeholder{display:inline-block;margin-right:-5px;padding-bottom:20px;width:33.3333%}.modal-requests-placeholder .avatar{position:absolute;cursor:default!important;margin:20px 0 0 20px;width:40px;height:40px;background-color:#eaeaea;border-radius:5px}.modal-requests-placeholder .wrap{padding:24px 20px 20px 70px!important;border-right:1px solid #f0f0f0;border-bottom:1px solid #f0f0f0}.modal-requests-placeholder .wrap .btn{cursor:default!important;margin-top:5px;float:right;width:38px;height:24px;background-color:#eaeaea;border-radius:4px}.modal-requests-placeholder .wrap .name{position:inherit!important;width:30px;height:15px;background-color:#eaeaea}.modal-requests-placeholder .wrap .text{margin:7px 0;width:40%;height:12px;background-color:#eaeaea;animation:shortLoading 1s ease-in-out -.5s infinite;-webkit-animation:shortLoading 1s ease-in-out -.5s infinite;-moz-animation:shortLoading 1s ease-in-out -.5s infinite;-o-animation:shortLoading 1s ease-in-out -.5s infinite;-ms-animation:shortLoading 1s ease-in-out -.5s infinite}.note-bottom{min-height:213px;background-color:#f5f5f5;padding-top:40px;padding-bottom:40px}.note-bottom .seo-recommended-notes{margin:0 auto 20px;width:620px}.note-bottom .seo-recommended-notes .note{display:block;margin-bottom:25px;padding:0 0 25px;border-bottom:1px solid #ddd}.note-bottom .seo-recommended-notes .note:last-child{margin-bottom:0;border:none}.note-bottom .seo-recommended-notes .note.have-img{min-height:136px}.note-bottom .seo-recommended-notes .note .cover img{float:right;margin:-5px 0 0 15px;width:150px;height:120px;background-position:50%;background-repeat:no-repeat;background-size:cover;border-radius:6px}.note-bottom .seo-recommended-notes .note .title{display:inherit;margin-bottom:4px;font-size:18px;line-height:27px;font-weight:700;color:#333;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.note-bottom .seo-recommended-notes .note .title:hover{text-decoration:underline}.note-bottom .seo-recommended-notes .note .title:visited{color:#999}.note-bottom .seo-recommended-notes .note .description{margin-bottom:12px;font-size:13px;line-height:23px;color:#333;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.note-bottom .seo-recommended-notes .note .author .avatar{display:inline-block;width:24px;height:24px;margin-right:3px;border-radius:50%;background-position:50%;background-repeat:no-repeat;background-size:cover;vertical-align:middle}.note-bottom .seo-recommended-notes .note .author .name{font-size:13px;color:#333;vertical-align:middle}.note .iradio-square-green{display:inline-block;*display:inline;vertical-align:middle;margin:0;padding:0;width:18px;height:18px;background:url(//cdn2.jianshu.io/assets/radio/radio-0d0c83844389bbb740ce7daedff7ad8f.png) no-repeat;border:none;cursor:pointer;background-position:0 0}.note .iradio-square-green.hover{background-position:-20px 0}.note .iradio-square-green.checked{background-position:-40px 0}.note .iradio-square-green.disabled{background-position:-60px 0;cursor:default}.note .iradio-square-green.checked.disabled{background-position:-80px 0}.note .social-icon-sprite{display:inline-block;*display:inline;vertical-align:middle;margin:0;padding:0;width:18px;height:18px;background:url(//cdn2.jianshu.io/assets/social_icons/social-e899099573ece117d8b1c274fd91563c.png) no-repeat}.note .shareqrcode{position:relative}.note .shareqrcode:after{border-left:15px solid #ddd;z-index:1;left:-25px}.note .shareqrcode:after,.note .shareqrcode:before{display:none;width:20px;height:20px;content:"";border-top:10px solid transparent;border-bottom:10px solid transparent;position:absolute;top:50%;margin-top:-12px}.note .shareqrcode:before{border-left:15px solid #fff;z-index:2;left:-26px}.note .shareqrcode:hover:after,.note .shareqrcode:hover:before{display:block}.note .qrcode{border-radius:6px}.note .social-icon-weibo{background-position:0 0}.note .social-icon-weixin{background-position:-20px 0}.note .social-icon-picture{background-position:-40px 0}.note .social-icon-zone{background-position:-60px 0}.note .social-icon-twitter{background-position:-80px 0}.note .social-icon-facebook{background-position:-100px 0}.note .social-icon-google{background-position:-120px 0}.note .social-icon-douban{background-position:-140px 0}.note .social-icon-weibov{background-position:-160px 0}.note .social-icon-qq{background-position:-180px 0}.note .social-icon-index{background-position:-200px 0}.note .social-icon-knight{background-position:-220px 0}@media (-webkit-min-device-pixel-ratio:1.25),(min-resolution:1.25dppx),(min-resolution:120dpi){.note .iradio-square-green{background-image:url(//cdn2.jianshu.io/assets/radio/radio@2x-20f910c36563a491780c7cc3ed7e13b3.png);background-size:100px 20px}.note .social-icon-sprite{background-image:url(//cdn2.jianshu.io/assets/social_icons/social@2x-4aa5a6de79e34c6a44ec157fd0a7b86b.png);background-size:240px 20px}}@media (max-width:1080px){.requests .modal-dialog{width:750px}.requests .modal-body .collection-info{width:304px}.requests .modal-body .collection-info .collection-name{max-width:230px}.modal-requests-placeholder .wrap,.requests .modal-body li{width:50%}}.comments-placeholder{padding:20px 0 30px}.comments-placeholder .author{margin-bottom:15px}.comments-placeholder .author .avatar{cursor:default!important;margin-right:5px;width:38px;height:38px;background-color:#eaeaea;border-radius:50%}.comments-placeholder .author .avatar,.comments-placeholder .author .info{vertical-align:middle;display:inline-block}.comments-placeholder .author .info .name{margin-bottom:6px;height:15px;width:60px;background-color:#eaeaea}.comments-placeholder .author .info .meta{height:12px;width:120px;background-color:#eaeaea}.comments-placeholder .text{width:100%;height:16px;margin:0 0 8px!important;background-color:#eaeaea;animation:loading 1s ease-in-out infinite;-webkit-animation:loading 1s ease-in-out infinite;-moz-animation:loading 1s ease-in-out infinite;-o-animation:loading 1s ease-in-out infinite;-ms-animation:loading 1s ease-in-out infinite}.comments-placeholder .animation-delay{animation:loading 1s ease-in-out -.5s infinite;-webkit-animation:loading 1s ease-in-out -.5s infinite;-moz-animation:loading 1s ease-in-out -.5s infinite;-o-animation:loading 1s ease-in-out -.5s infinite;-ms-animation:loading 1s ease-in-out -.5s infinite}.comments-placeholder .tool-group{margin:0;padding-top:6px;color:#eaeaea;font-size:15px}.comments-placeholder .tool-group div{display:inline-block;vertical-align:middle;background-color:#eaeaea}.comments-placeholder .tool-group i{margin-right:5px;vertical-align:middle}.comments-placeholder .tool-group .zan{height:14px;width:40px;margin-right:10px}.sub-comments-placeholder{padding-top:6px}.sub-comments-placeholder .text{width:100%;height:16px;margin:0 0 8px!important;background-color:#eaeaea;animation:loading 1s ease-in-out infinite;-webkit-animation:loading 1s ease-in-out infinite;-moz-animation:loading 1s ease-in-out infinite;-o-animation:loading 1s ease-in-out infinite;-ms-animation:loading 1s ease-in-out infinite}.sub-comments-placeholder .animation-delay{animation:loading 1s ease-in-out .5s infinite;-webkit-animation:loading 1s ease-in-out .5s infinite;-moz-animation:loading 1s ease-in-out .5s infinite;-o-animation:loading 1s ease-in-out .5s infinite;-ms-animation:loading 1s ease-in-out .5s infinite}.sub-comments-placeholder .tool-group{margin-top:-2px;color:#eaeaea}.sub-comments-placeholder .tool-group div{display:inline-block;vertical-align:middle;background-color:#eaeaea}.sub-comments-placeholder .tool-group i{font-size:13px;margin:0 5px 0 10px;vertical-align:middle}.sub-comments-placeholder .tool-group .time{width:96px;height:12px}.sub-comments-placeholder .tool-group .comment{padding:0!important;width:24px;height:12px}.tooltip-inner{max-width:none}.reader-night-mode .note #web-note-ad-fixed{opacity:.85}.reader-night-mode .note #web-note-ad-fixed .close:hover{color:#c8c8c8}.reader-night-mode .note .post #web-note-ad-1{opacity:.85}.reader-night-mode .note .math-block,.reader-night-mode .note .math-inline{-webkit-filter:invert(1);filter:invert(1)}.hljs{display:block;overflow-x:auto;padding:.5em;color:#abb2bf;background:#282c34}.hljs-comment,.hljs-quote{color:#929292;font-style:normal}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#c678dd}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e06c75}.hljs-literal{color:#56b6c2}.hljs-addition,.hljs-attribute,.hljs-meta-string,.hljs-regexp,.hljs-string{color:#98c379}.hljs-built_in,.hljs-class .hljs-title{color:#e6c07b}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#d19a66}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#61aeee}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}
/*# sourceMappingURL=entry-649d8b5ffe985fcfe898.css.map*/
-->