SASS 運算 (Operations)符的基本使用

来源:https://www.cnblogs.com/top8/archive/2022/08/04/16549563.html
-Advertisement-
Play Games

​ sass 運算符雖然沒有像那些編程語言那麼強大,但為了更靈活的輸出css,也增強了一些運算符的功能,例如賦值運算符、等號操作符、比較運算符、邏輯運算符、字元串運算符...等等,接下來就來詳細介紹下這些運算符的基本使用 賦值運算符 賦值運算符就是把一個值賦值給一個變數,通過冒號(:)的方式進行承接 ...


​ sass 運算符雖然沒有像那些編程語言那麼強大,但為了更靈活的輸出css,也增強了一些運算符的功能,例如賦值運算符、等號操作符、比較運算符、邏輯運算符、字元串運算符...等等,接下來就來詳細介紹下這些運算符的基本使用

賦值運算符

賦值運算符就是把一個值賦值給一個變數,通過冒號(:)的方式進行承接(很多編程語言是=),例如:

$font-size:16px;

也可以把一個變數賦值給另一個變數

$font-size:16px;
$h3:$font-size;

賦值的變數必須先有值

等號操作符

等號操作符用於比較兩個表達式的值是否相等,所有數據類型都支持等號運算符:

符號 說明
== 等於
!= 不等於

例1:數字比較:

$theme:1;
.container {
    @if $theme==1 {
        background-color: red;
    }
    @else {
        background-color: blue;
    }
}

例2:字元串比較:

$theme:"blue";
.container {
    @if $theme !="blue" {
        background-color: red;
    }
    @else {
        background-color: blue;
    }
}

所有數據類型均支持相等運算 ==!=,此外,每種數據類型也有其各自支持的運算方式。

比較運算符

比較運算符主要用於兩個數值(整數與小數)間的比較,操作符有

符號 說明
< (lt) 小於
> (gt) 大於
<= (lte) 小於等於
>= (gte) 大於等於

例如

$theme:3;
.container {
    @if $theme >= 5 {
        background-color: red;
    }
    @else {
        background-color: blue;
    }
}

其它語言還有字元串的比較,但這裡是不行的

邏輯運算符

邏輯運算符通常用於連接多個表達式,用下真判斷條件是否成立,它們有and、or、not

符號 說明
and 邏輯與
or 邏輯或
not 邏輯非

例如

$width:100;
$height:200;
$last:false;
div {
    @if $width>50 and $height<300 {
        font-size: 16px;
    }
    @else {
        font-size: 14px;
    }
    @if not $last {
        border-color: red;
    }
    @else {
        border-color: blue;
    }
}

數字操作符

數字操作符通常是對數字(整數或小數)進行計算,但是某些操作符(/或+)會有特殊情況,後面分開詳細講解

符號 說明
+
-
*
/
% 取模

例如

/* 
    +、-、*、/、%
    線數字、百分號、css部分單位(px、pt、in...)
    +
    線數字與百分號或單位運算時會自動轉化成相應的百分比與單位值
*/
.container {
    /* ==================+ 運算===================== */
    width: 50 + 20;
    width: 50 + 20%;
    width: 50% + 20%;
    width: 10px + 20px;
    width: 10pt + 20px;
    width: 10pt + 20;
    width: 10px + 10;
    /* ==================- 運算===================== */
    height: 50 - 30;
    height: 10 - 30%;
    height: 60% - 30%;
    height: 50px - 20px;
    height: 50pt - 20px;
    height: 50pt - 40;
    /* ==================* 運算===================== */
    height: 50 * 30;
    height: 10 * 30%;
    /* height: 60% * 30%; 出現了兩個百分號*/
    /* height: 50px * 20px; 出現了兩個單位*/
    height: 50 * 2px;
    height: 50pt * 4;
    /* ==================/運算 (除完後最多只能保留一種單位)===================== */
    $width: 100px;
    width: 10 / 5;
    width: 10px / 5px;
    width: 10px / 10 * 2;
    width: 20px / 2px * 5%;
    width: ($width/2); // 使用變數與括弧
    z-index: round(10)/2; // 使用了函數
    height: (500px/2); // 使用了括弧
    /* ==================% 運算===================== */
    width: 10 % 3;
    width: 50 % 3px;
    width: 50px % 4px;
    width: 50px % 7;
    width: 50% % 7;
    width: 50% % 9%;
    width: 50px % 10pt; // 50px % 13.33333px  
    width: 50px % 13.33333px;
    width: 50px + 10pt;
    /* width: 50px % 5%; 單位不統一*/
}

/ 在 CSS 中通常起到分隔數字的用途,SassScript 作為 CSS 語言的拓展當然也支持這個功能,同時也賦予了 / 除法運算的功能。也就是說,如果 / 在 SassScript 中把兩個數字分隔,編譯後的 CSS 文件中也是同樣的作用。

以下三種情況 / 將被視為除法運算符號:

  • 如果值或值的一部分,是變數或者函數的返回值
  • 如果值被圓括弧包裹
  • 如果值是算數表達式的一部分

例如

$width: 1000px;
div {
    font: 16px/30px Arial, Helvetica, sans-serif; // 不運算
    width: ($width/2); // 使用變數與括弧
    z-index: round(10)/2; // 使用了函數
    height: (500px/2); // 使用了括弧
    margin-left: 5px + 8px/2px; // 使用了+表達式
}

如果需要使用變數,同時又要確保 / 不做除法運算而是完整地編譯到 CSS 文件中,只需要用 #{} 插值語句將變數包裹。

字元串運算

+ 可用於連接字元串

註意:如果有引號字元串(位於 + 左側)連接無引號字元串,運算結果是有引號的,相反,無引號字元串(位於 + 左側)連接有引號字元串,運算結果則沒有引號。

有問題???? 如果有一個值是函數返回的,情況可能不一樣

例如

.container {
    content: "Foo " + Bar;
    font-family: sans- + "serif";
}

運行符的基本操作就給大家介紹到這裡,更多教程請關註“老姚實戰營”。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 變數提升題目: (function(){ a=5 console.log(window.a) var a=10 console.log(a) })() 答案如下(還請先思考哦) //編譯後 (function(){ var a; a=5; console.log(window.a) //undefi ...
  • BOM BOM的概述: bom 稱為瀏覽器對象模型(bowser object model),也就意味他可以獲取瀏覽器上的所有內容以及相關的操作。BOM缺乏規範的,存在共有對象來解決這個問題,但是共有對象也存在相容問題(ie10以後) BOM的結構 window 概述: window是頂層對象 屬於 ...
  • 1 ref 接受一個內部值並返回一個響應式且可變的 ref 對象。ref 對象僅有一個 .value property,指向該內部值。 案例 <template> <div> <button @click="changeMsg">change</button> <div>{{ message }}< ...
  • JS相容問題總結 “標準瀏覽器”和“低版本瀏覽器(IE)”相容寫法 一、瀏覽器捲去的高度和寬度 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop var scrollLeft = documen ...
  • 1 模板插值語法 在script 聲明一個變數可以直接在template 使用用法為{{變數名稱}} 模板語法是可以編寫條件運算的 運算也是支持的 操作API 也是支持的 <template> {{ message }} {{ message2==0 ? '我是老大' : '我笑的' }} {{ m ...
  • 在實際開發工作中,經常會碰到當select下拉數據過需要做分頁的情況 這裡簡單介紹封裝的一個Pagination-Select組件幾個步驟 封裝的比較簡易,可以根據自己的項目進行改動 /components/Pagination-Select/index.vue <template> <div id ...
  • AG Grid是一個客戶端 JavaScript網格 旨在與框架無關 它不依賴於任何框架 因此可以輕鬆地與任何框架集成 AG Grid支持具有相同API的多個框架 通過為每個框架量身定製的GUI層 獲得更好的開發人員體驗和性能 提供Community及Enterprise兩個版本 其中Enterpr ...
  • 本文將介紹一種巧用 background 配合 backdrop- filter 來構建有趣的透視背景效果的方式。 本技巧源自於一名群友的提問,如何構建如 ElementUI 文檔的一種頂欄背景特效,看看效果: 仔細看,在頁面的的滾動過程中,頂欄的背景不是白色的,也不是毛玻璃效果,而是能夠將背景顆粒 ...
一周排行
    -Advertisement-
    Play Games
  • 使用原因: 在我們服務端調用第三方介面時,如:支付寶,微信支付,我們服務端需要模擬http請求並加上一些自己的邏輯響應給前端最終達到我們想要的效果 1.使用WebClient 引用命名空間 using System.Net; using System.Collections.Specialized; ...
  • WPF 實現帶蒙版的 MessageBox 消息提示框 WPF 實現帶蒙版的 MessageBox 消息提示框 作者:WPFDevelopersOrg 原文鏈接: https://github.com/WPFDevelopersOrg/WPFDevelopers.Minimal 框架使用大於等於.N ...
  • 一、JSON(JavaScript Object Notation)的簡介: ① JSON和XML類似,主要用於存儲和傳輸文本信息,但是和XML相比,JSON更小、更快、更易解析、更易編寫與閱讀。 ② C、Python、C++、Java、PHP、Go等編程語言都支持JSON。 二、JSON語法規則: ...
  • 1.避免Scoped模式註冊的服務變成Singleton模式 當提供一個生命周期模式為Singleton的服務實例時,如果發現該服務中還依賴生命周期模式為Scoped的服務實例(Scoped服務實例將被一個Singleton服務實例所引用),那麼這個被依賴的Scoped服務實例最終會成為一個Sing ...
  • 索引時資料庫提高數據查詢處理性能的一個非常關鍵的技術,索引的使用可以對性能產生上百倍甚至上千倍的影響。接下來,會介紹索引的基本原理、概念,並深入學習資料庫中所使用的索引結構和存儲方式,以及如何管理、維護索引等。 1.索引的基本概念 索引時用來快速查詢表記錄的一種存儲結構,一般使用索引有一下兩個方面: ...
  • django2 路由控制器 Route路由,是一種映射關係。路由是把客戶端請求的url路徑和用戶請求的應用程式,這裡意指django裡面的視圖進行綁定映射的一種關係。 請求路徑和視圖函數不是一一對應的關係 在django中所有的路由最終都被保存到一個叫urlpatterns的文件里,並且該文件必須在 ...
  • 1、我們的目標是獲取微博某博主的全部圖片、視頻 2、拿到網址後 我們先觀察 打開F12 隨著下滑我們發現載入出來了一個叫mymblog的東西,展開響應發現需要的東西就在裡面 3、重點來了!!! 通過觀察發現第二頁比第一頁多了參數since_id 而第二頁的since_id參數剛好在上一頁中能獲取到, ...
  • 一、實現原理 在Servlet3協議規範中,包含在JAR文件/META-INFO/resources/路徑下的資源可以直接訪問。 二、舉例說明 如下圖所示,是我新建的一個Spring Boot Starter項目:zimug-minitor-threadpool,用於實現可配置、可觀測的線程池。其中 ...
  • 精華筆記: static final常量:應用率高 必須聲明同時初始化 由類名打點來訪問,不能被改變 建議:常量所有字母都大寫,多個單詞用_分隔 編譯器在編譯時會將常量直接替換為具體的數,效率高 何時用:數據永遠不變,並且經常使用 抽象方法: 由abstract修飾 只有方法的定義,沒有具體的實現( ...
  • Python有一個for...else語法,它的寫法如下 for i in range(0,100): if i == 3: break else: print("Not found") 該語句表示:若for迴圈遍歷完畢,則執行else部分的語句。也就是說上述代碼不會有任何輸出,而下述代碼會輸出“N ...