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路上打滾向前吧
Last updated
Was this helpful?