LESS的学习与 CSS中的伪类伪元素

less学习

变量作为类名

@my-selector: banner;

.@{my-selector} {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}
// 输出

.banner {……}
//   
@images: "../img";
body {
  color: #444;
  background: url("@{images}/white-sand.png");
}

& 符合代表本身

.link {
  & + & {
    color: red;
  }

  & & {
    color: green;
  }

  && {
    color: blue;
  }

  &, &ish {
    color: cyan;
  }
}

// 实际输出
.link + .link {
  color: red;
}
.link .link {
  color: green;
}
.link.link {
  color: blue;
}
.link, .linkish {
  color: cyan;
}

// 如果有两个父级，多个& 就依次代表 当前父级 和 父级的父级

.grand {
  .parent {
    & > & {
      color: red;
  }
}

// 输出
.grand .parent > .grand .parent {
  color: red;
}
    
// 还可以组合排列出所有可能
p, a, ul, li {
  border-top: 2px dotted #366;
  & + & {
    border-top: 0;
  }
}


p,
a,
ul,
li {
  border-top: 2px dotted #366;
}
p + p,
p + a,
p + ul,
p + li,
a + p,
a + a,
a + ul,
a + li,
ul + p,
ul + a,
ul + ul,
ul + li,
li + p,
li + a,
li + ul,
li + li {
  border-top: 0;
}

nth 计算
```
:nth-child(1n+3) 
```

混入（Mixins）

使用一款定义好的类型
.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

.menu a {
  color: #111;
  .bordered(); // 直接导入bordered的类
}

运算（Operations）
可以对数值、颜色进行运算，单位以左边为准

@conversion-1: 5cm + 10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm

@base: 5%;
@filler: @base * 2; // 结果是 10%

@var: 50vh/2;
width: calc(50% + (@var - 20px)); / 结果是 calc(50% + (25vh - 20px))

转义（Escaping）

~"anything" // 写法

@min768: ~"(min-width: 768px)";
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

// 编译成
@media (min-width: 768px) {
  .element {
    font-size: 1.2rem;
  }
}

命名空间与访问符

定义
.className(){
  a{……}
}

使用
.className1{
  .className.a()
}

映射（Maps）

#colors() {
  primary: blue;
  secondary: green;
}

.button {
  color: #colors[primary];
  border: 1px solid #colors[secondary];
}

作用域（scope）

// 与js相同，先找到最近的那个变量，找不到再往上找

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}

导入（importing）

如果导入的文件名为.less则可以省略拓展名
@import "library"; // library.less
@import "typo.css";

函数（function）

写法：
 if((2 > 1), 0, 3px);  // 0
 为真 输出0 为假 输出 3px

@some: foo;
if((iscolor(@some)), @some, black);

replace 替换与js 替换函数使用方法一致

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');