Special symbols of SASS

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

賦予值的符號

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

$main-color: lightgray;

運算符號

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

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

等於符號

相等操作符號

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

以下是例子

@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解析出來就長這樣

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

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

比較符號

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

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

以下是例子

$padding: 50px;

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

CSS解析出來就長這樣

h2 {
    padding: 25px;
}

邏輯符號

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

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

以下是例子

$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解析出來就長這樣

.btn {
    background-color: lightgreen;
}

串接字串的符號

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

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

h2 {
    @include string-concat;
}

CSS解析出來就長這樣

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

色碼運算

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

h2 {
    color: #468499 + #204479;
}

CSS解析出來就長這樣

h2 {
    color: #66c8ff;
}

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

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路上打滾向前吧