CSS的Sass框架中常用的操作符的使用教程
我要評(píng)論賦值操作符
Sass 使用冒號(hào)（ : ）來(lái)定義一個(gè)變量：
- $main-color: lightgray;
算術(shù)操作符
算術(shù)操作符用于執(zhí)行數(shù)學(xué)計(jì)算，下面是 Sass 所支持的算術(shù)操作符：
| 操作符 | 簡(jiǎn)介 |
|---|---|
+ |
加 |
- |
減 |
* |
乘 |
/ |
除 |
% |
取余 |
注意，上面的操作符只能用于單位相同的數(shù)值運(yùn)算：
- h2 {
- font-size: 5px + 2em; // 單位不一致，編譯報(bào)錯(cuò)
- font-size: 5px + 2; // 7px
- }
此外，兩個(gè)單位相同的數(shù)值相乘無(wú)法生成有效的 CSS：
- h2 {
- font-size: 5px * 2px; // invalid CSS
- }
如你所知，/ 操作符本身就是 CSS 簡(jiǎn)寫(xiě)語(yǔ)法的一部分，比如：
- font: 16px / 24px Arial sans-serif;
- background: url("http://example.com") no-repeat fixed center / cover;
但是，Sass 重載了該運(yùn)算符，用于執(zhí)行除法操作，下面讓我們看看它是如何解析的：
- h2 {
- // 不執(zhí)行除法操作，原樣輸出
- font-size: 16px / 24px;
- // 使用插值語(yǔ)法之后，原樣輸出
- font-size: #{$base-size} / #{$line-height};
- // 使用括號(hào)包裹之后，執(zhí)行除法操作
- font-size: (16px / 24px);
- // 使用變量，執(zhí)行除法操作
- font-size: $base-size / $line-height;
- // 調(diào)用函數(shù)，執(zhí)行除法操作
- opacity: random(4) / 5;
- // 使用算術(shù)操作符，執(zhí)行除法操作
- padding-right: 2px / 4px + 3px;
- }
Sass 中的操作符也具有優(yōu)先級(jí)的概念，規(guī)則如下：
括號(hào)中的操作具有最高優(yōu)先級(jí)
乘法、除法的優(yōu)先級(jí)高于加法和減法
- h2 {
- width: 3px * 5 + 5px; // 20px
- width: 3 * (5px + 5px); // 30px
- width: 3px + (6px / 2) * 3; // 12px
- }
相等操作符
相等操作符常用于條件語(yǔ)句，用來(lái)比較左右運(yùn)算子是否相等，最終返回布爾值：
| 操作符 | 簡(jiǎn)介 |
|---|---|
== |
相等 |
!= |
不等 |
相等操作符適用于所有類(lèi)型，下面來(lái)看兩個(gè)示例。在第一個(gè)示例中，我們使用 == 來(lái)測(cè)試 $font 的類(lèi)型，并輸出對(duì)應(yīng)的信息：
- @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);
- }
編譯結(jié)果：
- h2:after {
- content: 'My font is: sans-serif.';
- }
在第二個(gè)示例中，定義了一個(gè)列表并檢查該列表的長(zhǎng)度。通過(guò)使用 % 操作符，我們可以計(jì)算每個(gè)元素的長(zhǎng)度，然后根據(jù)特定條件對(duì) color 進(jìn)行賦值：
- $list: "tomato", "lime", "lightblue";
- @mixin fg-color($property) {
- @each $item in $list {
- $color-length: str-length($item);
- @if( $color-length % 2 != 0 ) {
- #{$property}: unquote($item);
- }
- }
- }
- h2 {
- @include fg-color(color);
- }
編譯結(jié)果：
- h2 {
- color: lightblue;
- }
- 這里需要提醒的是，Sass 不支持嚴(yán)格相等操作符 ===，不過(guò)從下面的示例中你會(huì)發(fā)現(xiàn)，Sass 解析 == 的原則就是嚴(yán)格相等：
- // 在 javascript 中
- ("5" == 5) // true
- ("5" === 5) // false
- // 在 Sass 中
- ("5" == 5) // false
- (20px == 20) // true (Libsass 不支持)
比較操作符
與相等操作符類(lèi)似，比較操作符用來(lái)比較數(shù)值。在 Sass 中，支持以下比較操作符：
| 操作符 | 簡(jiǎn)介 |
|---|---|
> |
大于 |
>= |
大于或者等于 |
< |
小于 |
<= |
小于或者等于 |
下面是一個(gè)簡(jiǎn)單的示例：
- $padding: 50px;
- h2 {
- @if($padding <= 20px) {
- padding: $padding;
- } @else {
- padding: $padding / 2;
- }
- }
編譯結(jié)果：
- h2 {
- padding: 25px;
- }
邏輯操作符
邏輯操作符常用于測(cè)試多個(gè)條件表達(dá)式，Sass 支持的邏輯操作符如下所示：
| 操作符 | 條件 | 簡(jiǎn)介 |
|---|---|---|
and |
x and y |
與操作 |
or |
x or y |
或操作 |
not |
not x |
取反 |
下面通過(guò)一個(gè)示例來(lái)解釋邏輯操作符的用法：定義一個(gè) map，存儲(chǔ)按鈕的狀態(tài)以及對(duì)應(yīng)的顏色，然后創(chuàng)建一個(gè)條件語(yǔ)句，用來(lái)測(cè)試 map 內(nèi)元素的多少。如果通過(guò)條件測(cè)試，那么就給 h2 添加 background-color 屬性。代碼如下所示：
- $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);
- }
編譯結(jié)果：
- .btn {
- background-color: lightgreen;
- }
如你所見(jiàn)，因?yàn)?map 的元素?cái)?shù)量為 3，符合 length($list-map) > 2 – length($list-map) < 5 的條件，所以返回的結(jié)果是 true。
請(qǐng)注意以下兩個(gè)條件的差異：
- @if (length($list-map) > 2 or not (length($list-map) == 3)) {...}
- // true
- @if (length($list-map) > 2 and not (length($list-map) == 3)) {...}
- // false
字符串操作符
在第一節(jié)我們就講過(guò)，+ 可以用來(lái)拼接字符串。下面是一個(gè) + 拼接字符串的規(guī)則：
如果字符串被引號(hào)包裹，那么它拼接任何字符串的結(jié)果也會(huì)被引號(hào)包裹
如果字符串沒(méi)有被引號(hào)包裹，那么它拼接任何字符串的結(jié)果也不會(huì)被引號(hào)包裹
下面是一個(gè)實(shí)際示例：
- @mixin string-concat {
- &:after {
- content: "My favorite language is " + Sass;
- font: Arial + " sans-serif";
- }
- }
- h2 {
- @include string-concat;
- }
編譯結(jié)果：
- h2:after {
- content: "My favorite language is Sass";
- font: Arial sans-serif;
- }
此外，我們可以使用差值語(yǔ)法動(dòng)態(tài)改變字符串，如果插值的結(jié)果為 null，那么該值不會(huì)被輸出，下面是一個(gè)示例：
- @mixin string-concat ($language) {
- &:after {
- content: "My favorite language is #{$language}";
- // second way without using interpolation
- //content: "My favorite language is " + $language;
- }
- }
- h2 {
- @include string-concat(Sass);
- }
編譯結(jié)果：
- h2:after {
- content: "My favorite language is Sass";
- }
顏色運(yùn)算
在上面的第二節(jié)中，我們分析了算術(shù)操作符，在 Sass 中一個(gè)有趣的事情就是，我們可以使用算術(shù)運(yùn)算符操作顏色。請(qǐng)看一個(gè)實(shí)例：
- h2 {
- color: #468499 + #204479;
- }
編譯結(jié)果:
- h2 {
- color: #66c8ff;
- }
那么，其中的解析原則是什么呢？首先我們需要記住，十六進(jìn)制顏色值是由紅綠藍(lán)三種值組合而成，然后在執(zhí)行相加時(shí)，每?jī)蓚€(gè)十六進(jìn)制數(shù)值分組相加：46+20=66 (紅色), 84+44=c8 (綠色), 和 99+79=ff (藍(lán)色)。
下面是我們的最后一個(gè)示例，和上面示例的差別在于它使用了 rgba()：
- h2 {
- color: rgba(70, 132, 153, 1) + rgba(32, 68, 121, 1);
- color: rgba(70, 132, 153, .9) + rgba(32, 68, 121, .7);
- // 報(bào)錯(cuò)，透明通道的值必須一致
- }
使用算術(shù)操作符處理 rgba() 和 hsla() 時(shí)，必須讓透明通道的值保持一致。
相關(guān)文章
- 這篇文章主要介紹了CSS框架sass的簡(jiǎn)單一覽,像嵌套屬性和運(yùn)算符等主要特性都在文中有簡(jiǎn)單的介紹,需要的朋友可以參考下2015-07-20
- 這篇文章主要介紹了CSS的SASS樣式編程指南,包括對(duì)于嵌套器和注釋的使用等方面,需要的朋友可以參考下2015-07-12
學(xué)習(xí)CSS預(yù)處理器:Sass和less進(jìn)行對(duì)比
Css可以讓你做很多事情，但它畢竟是給瀏覽器認(rèn)的東西，對(duì)開(kāi)發(fā)者來(lái)說(shuō)，Css缺乏很多特性2012-07-11
CSS預(yù)編譯器有 SASS LESS Stylus等等，SCSS是SASS3引入的新語(yǔ)法。這篇文章給大家介紹sass(scss）的安裝與使用教程，感興趣的朋友一起看看吧2018-10-15
