devStandard/docs/learning/2-css/4-less sass.md

# less sass

==scss和less有很多相似之处,最大的区别就在于声明变量的方式,less采用的是`@变量名`, 而scss采用的`$变量名`==

## less

> css 预处理器, 有嵌套, 变量, 混入, 运算, 函数等功能

http://lesscss.cn/

### vscode 插件

`easy less`

### 变量

* 必须有@为前缀
* 不能包含特殊字符
* 不能以数字开头
* 大小写敏感

```less
/* 定义变量 */
@color: pink;
@font14: 14px;
/*变量的使用*/
body {
  background-color: @color;
}


// 不会编译注释
/** 会保留注释 */ 

// 不想编译某些子段, ~'' 包裹住
height: ~'calc(300px - 30px)';
// 让浏览器计算，不是让less计算
```

### 嵌套

```less
// 将css改为less
#header .logo {
  width: 300px;
}

#header {
    .logo {
       width: 300px;
    }
}
```

### & 连接符号

如果遇见 （交集|伪类|伪元素选择器） ，利用&进行连接

```less
a:hover{
    color:red;
}
a{
  &:hover{
      color:red;
  } 
}
```

### 运算

* `+ - * /`, 左右两边要有空格
* 数字, 颜色, 变量
* 两个不同单位的值运算, 结果取第一个值的单位; 一个单位, 则用它

```less
/*Less 里面写*/
@witdh: 10px + 5;
div {
    border: @witdh solid red;
}
/*生成的css*/
div {
  border: 15px solid red;
}
/*Less 甚至还可以这样 */
width: (@width + 5) * 2;
```

### 导入 @import

```less
//在index.less中导入common.less文件
@import "common";
```

### unit

重置单位

```css
@num: 10px;

div {
  height: unit(@num, rem);
}

/** height用了unit，把设置好的变量@num的10px，变成10rem */
```

### 循环

https://zhuanlan.zhihu.com/p/192364861

````less
例如循环输出四个 padding 属性：

.loop(@i) when (@i > 0) {
   .loop((@i - 1));    // 递归调用自身
   padding: (10px + 5 * @i); 
 }
 
.call{
   .loop(4); // 调用循环
}
编译成 CSS 代码：

.call {
  padding: 15px;
  padding: 20px;
  padding: 25px;
  padding: 30px;
}
````

````less
.generate-space(32);
.generate-space(@n, @i: 4) when(@i =< @n) {
  .generate-space(@n, @i + 4);
  .f-@{i} {
    font-size: unit(@i,px);
  }
  .m-@{i} {
    margin: unit(@i,px);
  }
  .m-h-@{i} {
    margin-left: unit(@i,px);
    margin-right: unit(@i,px);
  }
  .m-v-@{i} {
    margin-top: unit(@i,px);
    margin-bottom: unit(@i,px);
  }
  .m-t-@{i} {
    margin-top: unit(@i,px);
  }
  .m-b-@{i} {
    margin-bottom: unit(@i,px);
  }
  .m-r-@{i} {
    margin-right: unit(@i,px);
  }
  .m-l-@{i} {
    margin-left: unit(@i,px);
  }
  .p-@{i} {
    padding: unit(@i,px);
  }
  .p-h-@{i} {
    padding-left: unit(@i,px);
    padding-right: unit(@i,px);
  }
  .p-v-@{i} {
    padding-top: unit(@i,px);
    padding-bottom: unit(@i,px);
  }
  .p-r-@{i} {
    padding-right: unit(@i,px);
  }
  .p-l-@{i} {
    padding-left: unit(@i,px);
  }
  .p-t-@{i} {
    padding-top: unit(@i,px);
  }
  .p-b-@{i} {
    padding-bottom: unit(@i,px);
  }
  .f-s-@{i} {
    font-size:  @i*1px;
  }
}
````

### 递归

生成原子样式

```less	
generate-space(32); //调用函数
// 变量说明 @n：循环次数、@i：Class名称后缀&开始数字
.generate-space(@n, @i: 4) when(@i =< @n) {
  .generate-space(@n, @i + 4);
  .f-@{i} {
    font-size: unit(@i,px);
  }
  .m-@{i} {
    margin: unit(@i,px);
  }
  .m-h-@{i} {
    margin-left: unit(@i,px);
    margin-right: unit(@i,px);
  }
  .m-v-@{i} {
    margin-top: unit(@i,px);
    margin-bottom: unit(@i,px);
  }
  .m-t-@{i} {
    margin-top: unit(@i,px);
  }
  .m-b-@{i} {
    margin-bottom: unit(@i,px);
  }
  .m-r-@{i} {
    margin-right: unit(@i,px);
  }
  .m-l-@{i} {
    margin-left: unit(@i,px);
  }
  .p-@{i} {
    padding: unit(@i,px);
  }
  .p-h-@{i} {
    padding-left: unit(@i,px);
    padding-right: unit(@i,px);
  }
  .p-v-@{i} {
    padding-top: unit(@i,px);
    padding-bottom: unit(@i,px);
  }
  .p-r-@{i} {
    padding-right: unit(@i,px);
  }
  .p-l-@{i} {
    padding-left: unit(@i,px);
  }
  .p-t-@{i} {
    padding-top: unit(@i,px);
  }
  .p-b-@{i} {
    padding-bottom: unit(@i,px);
  }
  .f-s-@{i} {
    font-size:  @i*1px;
  }
}
```

## scss

> Scss 是 Sass 3 引入新的语法，是Sassy CSS的简写，是CSS3语法的超集.
>
> Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 Scss 的语法书写和我们的CSS 语法书写方式非常类似

### 变量

`sass`使用`$`符号来标识变量

```bash
$highlight-color: #f90     
```

上面我们声明了一个 名为`$highlight-color`的变量, 我们可以把该变量用在任何位置

```bash
#app {尊敬
    background-color:  $highlight-color;
}     
```

### 变量范围

与`CSS`属性不同，变量可以在`css`规则块定义之外存在。当变量定义在`css`规则块内，那么该变量只能在此规则块内使用。如果它们出现在任何形式的`{...}`块中（如`@media`或者`@font-face`块），情况也是如此：

```bash
$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
  background-color: black
}

# 编译后 

nav {
  width: 100px;
  color: #F90;
  background-color: black;
}
```

在这段代码中，`$nav-color`这个变量定义在了规则块外边，所以在这个样式表中都可以像 `nav`规则块那样引用它。`$width`这个变量定义在了`nav`的`{ }`规则块内，所以它只能在`nav`规则块 内使用。这意味着是你可以在样式表的其他地方定义和使用`$width`变量，不会对这里造成影响。

### 嵌套语法

和less一样,scss同样支持**`嵌套型`**的语法

```scss
#content {
    article {
      h1 { color: #1dc08a }
      p {  font-style: italic; }
    }
    aside { background-color: #f90 }
  }
```

### &父选择器

假如你想针对某个特定子元素 进行设置

比如

```scss
  #content {
    article {
      h1 { color: #1dc08a }
      p {  font-style: italic; }
      a {
        color: blue;
        &:hover { color: red }
      }
    }
    aside { background-color: #f90 }
  }
```

### 导入

```scss
@import './variables.scss';
```