> For the complete documentation index, see [llms.txt](https://tobyisme.gitbook.io/sass/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tobyisme.gitbook.io/sass/special-symbols-of-sass.md).

# Special symbols of SASS

### *各式各樣的符號在每個環境下有不同的用途，今天來介紹sass的*

## 賦予值的符號

Sass使用冒號`：`來定義一個定量

```css
$main-color: lightgray;
```

## 運算符號

就是加減乘除做數學運算的符號

```css
符號    介紹
+    加
-    減
*    乘
/    除
%    取餘數
```

## 等於符號

相等操作符號

```css
符號    介紹
==    等於
!=    不等於
```

以下是例子

```css
@mixin font-fl($font){
    &:after {
        @if(type-of($font) == string) {
            content: 'My font is: #{$font}.';
        } @else {
            content: 'Sorry, the argument #{$font} is a #{type-of($font)}.';
        }
    }
}

h2{
    @include font-fl(sans-serif);
}
```

CSS解析出來就長這樣

```css
h2:after {
    content: 'My font is: sans-serif.';
}
```

通常等於`==`跟不等於`!=`都用於判斷式居多，但是sass不支持`===`只會視為`==`

## 比較符號

其實就跟等於不等於很像，用來比較數值的

```css
符號    介紹
>    大於
>=    大於或等於
<    小於
<=    小於或等於
```

以下是例子

```css
$padding: 50px;

h2 {
    @if($padding <= 20px) {
        padding: $padding;
    } @else {
        padding: $padding / 2;
    }
}
```

CSS解析出來就長這樣

```css
h2 {
    padding: 25px;
}
```

## 邏輯符號

常用於測試多個條件判斷式

```css
符號    條件    介紹
and    x and y    與
or    x or y    或
not    not x    相反
```

以下是例子

```css
$list-map: (success: lightgreen, alert: tomato, info: lightblue);

@mixin button-state($btn-state) {
    @if (length($list-map) > 2 or length($list-map) < 5) {
        background-color: map-get($list-map, $btn-state);
    }
}

.btn {
    @include button-state(success);
}
```

CSS解析出來就長這樣

```css
.btn {
    background-color: lightgreen;
}
```

## 串接字串的符號

當然是用`+`，它不只可以運算也可以用來串接字串

```css
@mixin string-concat {
    &:after {
        content: "My favorite language is " + Sass;
        font: Arial + " sans-serif";
    }
}

h2 {
    @include string-concat;
}
```

CSS解析出來就長這樣

```css
h2:after {
    content: "My favorite language is Sass";
    font: Arial sans-serif;
}
```

## 色碼運算

這邊超酷的是，就連色碼相加都可以做運算

```css
h2 {
    color: #468499 + #204479;
}
```

CSS解析出來就長這樣

```css
h2 {
    color: #66c8ff;
}
```

更厲害的來了，它還可以做rgba()的運算，但是它不能運算透明度

```css
h2 {
    color: rgba(70, 132, 153, 1) + rgba(32, 68, 121, 1);  // 第一個可以正常運算相加
    color: rgba(70, 132, 153, .9) + rgba(32, 68, 121, .7);  // 這個會有問題，不會運算透明度，所以透明度數值要一致
}
```

## 總結

這邊沒什麼心得，就讓大家更了解sass裡面的特殊符號有哪些，都有哪些用法，還有哪些需要注意的地方，讓我們繼續在sass路上打滾向前吧