2017-3-24 less

CSS Guards（CSS保护）

LESS:

& when (@my-option = true) {
  button {
    color: white;
  }
  a {
    color: blue;
  }
}

Import Directives （导入准则）

LESS:

.a {
  color: green;
}
@import (multiple) "style.less";
@import (multiple) "style.less";

CSS:

.a {
  color: green;
}
.a {
  color: green;

Misc Functions （杂项函数）

LESS:

.mixin(1)                   {x: 11}
.mixin(2)                   {y: 22}
.mixin(@x) when (default()) {z: @x}

div {
  .mixin(3);
}

div.special {
  .mixin(1);
}

CSS：

div {
  z: 3;
}
div.special {
  x: 11;
}

LESS:

.mixin(@value) when (ispixel(@value)) {width: @value}
.mixin(@value) when not(default())    {padding: (@value / 5)}
div-1 {
  .mixin(100px);
}
div-2 {
  .mixin(300px);
}

CSS:

div-1 {
  width: 100px;
  padding: 20px;
}
div-2 {
  width: 300px;
  padding: 60px;
}

String Functions （字符串函数）

replace （替换）

• string: 搜索和替换用的字符串.
• pattern:一个字符串或者能搜索的正则表达式.
• replacement: 匹配模式成功的替换字符串.
• flags: (可选的) 正则表达式匹配标识（全匹配还是…）.
  LESS:

replace("Hello, Mars?", "Mars\?", "Earth!");
replace("One + one = 4", "one", "2", "gi");
replace('This is a string.', "(string)\.$", "new $1.");
replace(~"bar-1", '1', '2');

Color Definition Functions （颜色定义函数）

1、通过十进制红色，绿色，蓝色，以及 alpha 四种值 (RGBA) 创建带alpha透明的颜色对象。

@red: 整数 0-255 或百分比 0-100%.
@green: 整数 0-255 或百分比 0-100%.
@blue: 整数 0-255 或百分比 0-100%.
@alpha: 数字 0-1 或百分比 0-100%.

2、通过色相 (hue)，饱和度 (saturation)，亮度 (lightness) 三种值 (HSL) 创建不透明的颜色对象。

@hue: 整数 0-360 表示度数
@saturation: 整数 0-100% 或是数字 0-1
@lightness: 整数 0-100% 或是数字 0-1

练习
less：

@import "state.less"; 
@import "layout.less"; 
@import "base.less"; 
.f-l {
    float: left;
}

.f-r {
    float: right;
}

#box-wrap {
    .banner {
        padding-top: 70px;
        margin-bottom: 80px;
        .container {
            width: 970px;
            .navbar {
                margin: 0 15px;
                .col-nav-l {
                    width: 25%;
                    .f-l;
                    a {
                        width: 52px;
                        height: 30px;
                        padding: 0;
                        font-size: 18px;
                        display: block;
                    }
                }
                .col-nav-c {
                    width: 75%;
                    .f-l;
                    ul {
                        display: table;
                        margin-bottom: 0;
                        padding-left: 0;
                        text-align: center;
                        li {
                            font-size: 20px;
                            display: inline-block;
                            position: relative;
                            margin-left: 50px;
                            .f-l;
                        &:first-child {
                            a {
                                    border-bottom: 2px solid #52d3aa;
                            }
                        }
                            a {
                                color: #000;
                                font-weight: 400;
                                &:hover {
                                    color: #989898;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .intro {
        width: 970px;
        padding-bottom: 5em;
        .intro-txt {
            width: 60%;
            margin: 0 auto;
            h2 {
                font-size: 30px;
                line-height: 1.5em;
                margin-bottom: 30px;
                text-align: center;
            }
        }
    }
}

CSS:

#header {
  width: 100%;
  height: 90px;
  margin: 0 auto;
  background-color: #eeeff0;
  margin: 0;
  padding: 0;
}
#box-wrap {
  background-color: #fff;
  max-width: 1000px;
  margin: 0 auto;
}
.fix {
  margin: 0;
  padding: 0;
}
ul li {
  list-style-type: none;
}
a {
  text-decoration: none;
}
.f-l {
  float: left;
}
.f-r {
  float: right;
}
#box-wrap .banner {
  padding-top: 70px;
  margin-bottom: 80px;
}
#box-wrap .banner .container {
  width: 970px;
}
#box-wrap .banner .container .navbar {
  margin: 0 15px;
}
#box-wrap .banner .container .navbar .col-nav-l {
  width: 25%;
  float: left;
}
#box-wrap .banner .container .navbar .col-nav-l a {
  width: 52px;
  height: 30px;
  padding: 0;
  font-size: 18px;
  display: block;
}
#box-wrap .banner .container .navbar .col-nav-c {
  width: 75%;
  float: left;
}
#box-wrap .banner .container .navbar .col-nav-c ul {
  display: table;
  margin-bottom: 0;
  padding-left: 0;
  text-align: center;
}
#box-wrap .banner .container .navbar .col-nav-c ul li {
  font-size: 20px;
  display: inline-block;
  position: relative;
  margin-left: 50px;
  float: left;
}
#box-wrap .banner .container .navbar .col-nav-c ul li:first-child a {
  border-bottom: 2px solid #52d3aa;
}
#box-wrap .banner .container .navbar .col-nav-c ul li a {
  color: #000;
  font-weight: 400;
}
#box-wrap .banner .container .navbar .col-nav-c ul li a:hover {
  color: #989898;
}
#box-wrap .intro {
  width: 970px;
  padding-bottom: 5em;
}
#box-wrap .intro .intro-txt {
  width: 60%;
  margin: 0 auto;
}
#box-wrap .intro .intro-txt h2 {
  font-size: 30px;
  line-height: 1.5em;
  margin-bottom: 30px;
  text-align: center;
}