[TOC]
## **scss**
> 只列出常用的幾個用法，深入學習 [傳送門](https://www.sass.hk/guide/)
* 嵌套規則
```css
#app{
.nav-view{
float: left;
width: 200px;
}
p{
font-size: 16px;
}
a{
color: blue;
&:hover{ // & 表示父級選擇器
color: red;
}
}
}
```
* 變量
```css
$c-theme: blue; // 定義
p{
background-color: $c-theme; // 引用
}
```
* 混合器
```css
@mixin radius-large {
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
@mixin whh($w: 100px, $h: 100px){
width: $w;
height: $h;
line-height: $h;
}
// 引用
.content-view{
@include whh(200px, 300px);
@include radius-large;
}
```
* 繼承
```css
.border-error{
border: 1px solid red;
}
.border-success{
@extend .border-error;
border-color: green;
}
```
## **less**
> 只列出常用的幾個用法，深入學習 [傳送門](https://less.bootcss.com/)
* 嵌套規則（和 scss 差不多）
* 變量
```css
@c-theme: blue;
p{
background-color: @c-theme;
}
```
* 混合器
```css
.radius-large {
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
.whh(@w: 100px, @h: 100px){
width: @w;
height: @h;
line-height: @h;
}
// 引用
.content-view{
.whh(200px, 300px);
.radius-large()；
}
```
