Sass 筆記

来源:https://www.cnblogs.com/risejl/archive/2022/09/27/16733638.html
-Advertisement-
Play Games

模塊 HTML 網頁中,瀏覽器通過<script>標簽載入 JavaScript 腳本。 <!-- 頁面內嵌的腳本 --> <script type="application/javascript"> // module code </script> <!-- 外部腳本 --> <script ty ...


Sass

Sass 全稱 "Syntactically Awesome StyleSheets", 是 CSS 的一種擴展語言。

變數 Variable

Sass 允許使用變數(最新的 CSS 也支持了變數)。 可以在 Sass 中聲明變數,併為它賦值。

在 Sass 中,變數以 $ 開頭的,後跟變數名。

 $text-color: red;

使用

color: $text-color;

嵌套 CSS Nest

Sass 允許 CSS 規則的嵌套,這在組織樣式表結構的時候會很有用。

在 CSS 里,每個元素的樣式都需要寫在獨立的代碼塊中,如下所示:

nav {
  background-color: red;
}

nav ul {
  list-style: none;
}

nav ul li {
  display: inline-block;
}

對於一個大型項目,CSS 規則會很複雜。 這時,引入嵌套功能(即在對應的父元素中寫子元素的樣式)可以有效地簡化代碼:

nav {
  background-color: red;

  ul {
    list-style: none;

    li {
      display: inline-block;
    }
  }
}

Mixins 可重用 CSS Reusable

在 Sass 中,mixin 是一組 CSS 聲明,可以在整個樣式表中重覆使用。

CSS 的新功能需要一段時間適配後,所有瀏覽器後才能完全使用。 隨著瀏覽器的不斷升級,使用這些 CSS 規則時可能需要添加瀏覽器首碼。 考慮 box-shadow

div {
  -webkit-box-shadow: 0px 0px 4px #fff;
  -moz-box-shadow: 0px 0px 4px #fff;
  -ms-box-shadow: 0px 0px 4px #fff;
  box-shadow: 0px 0px 4px #fff;
}

對於所有具有 box-shadow 屬性的元素重寫此規則,或者更改每個值以測試不同的效果,需要花費大量的精力。 Mixins 就像 CSS 的函數。 以下是一個例子:

@mixin box-shadow($x, $y, $blur, $c){ 
  -webkit-box-shadow: $x $y $blur $c;
  -moz-box-shadow: $x $y $blur $c;
  -ms-box-shadow: $x $y $blur $c;
  box-shadow: $x $y $blur $c;
}

定義以 @mixin 開頭,後跟自定義名稱。 參數($x$y$blur,以及上例中的 $c )是可選的。 現在在需要 box-shadow 規則的地方,只需一行 mixin 調用而無需添加所有的瀏覽器首碼。 mixin 可以通過 @include 指令調用。

div {
  @include box-shadow(0px, 0px, 4px, #fff);
}

@if @else 邏輯

Sass 中的 @if 指令對於測試特定情況非常有用——它的工作方式與 JavaScript 中的 if 語句類似。

@mixin make-bold($bool) {
  @if $bool == true {
    font-weight: bold;
  }
}

類似 JavaScript,可以在 Sass 中使用 @else if@else 測試更多條件:

@mixin text-effect($val) {
  @if $val == danger {
    color: red;
  }
  @else if $val == alert {
    color: yellow;
  }
  @else if $val == success {
    color: green;
  }
  @else {
    color: black;
  }
}

@for 迴圈

在 Sass 中使用 @for 迴圈添加樣式,它的用法和 JavaScript 中的 for 迴圈類似。

@for 以兩種方式使用:“開始 through 結束” 或 “開始 to 結束”。 主要區別在於“開始 to 結束”不包括 結束數字,而“開始 through 結束”包括 結束數字。

@for $i from 1 through 12 {
  .col-#{$i} { width: 100%/12 * $i;  }
}

@for $i from 1 to 6{
  .text-#{$i} {
    font-size: 15px * $i;
  }
}

#{$i} 部分是將變數(i)與文本組合成字元串的語法。 當 Sass 文件轉換為 CSS 時,它看起來像這樣:

.col-1 {
  width: 8.33333%;
}

.col-2 {
  width: 16.66667%;
}

...

.col-12 {
  width: 100%;
}

這是創建網格佈局的有效方法。

@each 遍歷列表

Sass 還提供 @each 指令,該指令迴圈遍歷列表或映射中的每個項目。 在每次迭代時,變數將從列表或映射分配給當前值。

@each $color in blue, red, green {
  .#{$color}-text {
    color: $color;
}
}

map 的語法略有不同。 這是一個示例:

$colors: (color1:blue, color2:red, color3:green);
@each $key, $color in $colors {
  .#{$color}-text {
    color: $color;
    }
}

請註意,需要用 $key 變數來引用 map 中的鍵。 否則,編譯後的 CSS 將包含 color1color2...... 以上兩個代碼示例都轉換為以下 CSS:

.blue-text {
  color: blue;
}

.red-text {
  color: red;
}

.green-text {
  color: green;
}

@while 迴圈

Sass 中的 @while 指令與 JavaScript 中的 while 類似。 只要滿足條件,它就會一直創建 CSS 代碼。

$x : 1;
@while $x < 13 {
  .col-#{$x} {
    width: 100%/12 * $x;
  }
  $x: $x + 1;
}

Partials

Sass 中的 Partials 是包含 CSS 代碼段的單獨的文件。 這些片段可以導入其它 Sass 文件使用。 可以把類似代碼放到模塊中,以保持代碼結構規整且易於管理。

partials 的名稱以下劃線(_)字元開頭,這樣 Sass 就知道它是 CSS 的一小部分,而不會將其轉換為 CSS 文件。 此外,Sass 文件以 .scss 文件擴展名結尾。 要將 partial 中的代碼放入另一個 Sass 文件中,使用 @import 指令。

例如,如果所有 mixins 都保存在名為 “_mixins.scss” 的 partial 中,並且在 “main.scss” 文件中需要它們,下麵是使用方法:

@import 'mixins'

請註意,import 語句中不需要下劃線——Sass 知道它是 partial。 將 partial 導入文件後,可以使用所有變數、mixins 和其它代碼。

extend

Sass 有一個名為 extend 的功能,可以很容易地從一個元素中借用 CSS 規則併在另一個元素上重用它們。

.panel{
  background-color: red;
  height: 70px;
  border: 2px solid green;
}

現在需要另一個名為 .big-panel 的面板。 它具有與 .panel 相同的基本屬性,但還需要 widthfont-size。 可以從 .panel 複製並粘貼初始 CSS 規則,但是當添加更多類型的面板時,代碼會變得重覆。 extend 指令是一種重用為一個元素編寫的規則的簡單方法,可以為另一個元素重用並添加更多規則:

.big-panel{
  @extend .panel;
  width: 150px;
  font-size: 2em;
}

除了新樣式之外,.big-panel 將具有與 .panel 相同的屬性。


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

-Advertisement-
Play Games
更多相關文章
  • HTML標簽 1、標題和段落 <h1>一級標題</h1> ~ <h6>六級標題</h6>是標題標簽,獨占一行,均有加粗效果,且字體逐漸變小 <h1>一級標題</h1> ​ 一級標題 ​ <h6>六級標題</h6> ​ 六級標題 ​ <p>p是段落標簽,獨占一行</p> ​ p標簽是段落標簽,獨占一行 ...
  • html插入圖片有兩種方式:一種是通過<img>標簽插入的正常的圖片,另一種是通過css樣式插入的背景圖片 1、首先你是通過第二種方式插入的是背景圖片,直接用width和height只能控制div的寬度和高度。 2、如果你插入的圖片是通過<img>標簽的方式來插入的話,可以通過<img>自身的屬性控 ...
  • 場景描述: 場景描述:一個介面(IPerson)有很多個的欄位,可能有幾百。而且這些欄位都是必須的。 我們需要使用這個介面,但是我又不可能使用它的全部。可能只會使用幾個。 我還必須要使用這介面。這個時候,我們怎麼解決這個問題呢? TS給了我們一個工具類Partial,可以解決這隔辦法 Partial ...
  • <div class="fuzhiWarp"> <div class="copydiv">這裡是DIV中的文本</div> <button type="button" class="fuzhibtn btn-default" data-clipboard-action="copy" data-cli ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 一.typescript 高階類型 Exclude 和 Extract Exclude<T, U> TypeScript 2.8 中增加了 Exclude 類型,該如何理解這個高級類型的定義呢? type Exclude<T, U> = ...
  • 剛完成一些前端項目的開發,騰出精力來總結一些前端開發的技術點,以及繼續完善基於SqlSugar的開發框架循序漸進介紹的系列文章,本篇隨筆主要介紹一下基於Vue3+TypeScript的全局對象的註入和使用。我們知道在Vue2中全局註入一個全局變數使用protoType的方式,很方便的就註入了,而Vu... ...
  • 1 CMD 規範介紹 CMD: Common Module Definition, 通用模塊定義。與 AMD 規範類似,也是用於瀏覽器端,非同步載入模塊,一個文件就是一個模塊,當模塊使用時才會載入執行。其語法與 AMD 規範很類似。 1.1 定義模塊 定義模塊使用 define 函數: define( ...
  • uniapp webview h5 通信 window.postMessage 方式 父頁面 <template> <view> <!-- <web-view :webview-styles="webviewStyles" src="https://uniapp.dcloud.io/static/w ...
一周排行
    -Advertisement-
    Play Games
  • 1.部署歷史 猿友們好,作為初來實習的我,已經遭受社會的“毒打”,所以請容許我在下麵環節適當吐槽,3Q! 傳統部署 ​ 回顧以往在伺服器部署webapi項目(非獨立發佈),dotnet環境、守護進程兩個逃都逃不掉,正常情況下還得來個nginx代理。不僅僅這仨,可能牽扯到yum或npm。node等都要 ...
  • 隨著技術的進步,跨平臺開發已經成為了標配,在此大背景下,ASP.NET Core也應運而生。本文主要基於ASP.NET Core+Element+Sql Server開發一個校園圖書管理系統為例,簡述基於MVC三層架構開發的常見知識點,前一篇文章,已經簡單介紹瞭如何搭建開發框架,和登錄功能實現,本篇... ...
  • 這道題只要會自定義cmp恰當地進行排序,其他部分沒有什麼大問題。 上代碼: 1 #include<bits/stdc++.h> 2 using namespace std; 3 int n,s,h1,h2,cnt; 4 struct apple{ 5 int height,ns;//height為蘋 ...
  • 這篇文章主要描述RPC的路由策略,包括為什麼需要請求隔離,為什麼不在註冊中心中實現請求隔離以及不同粒度的路由策略。 ...
  • 簡介: 中介者模式,屬於行為型的設計模式。用一個中介對象來封裝一系列的對象交互。中介者是各對象不需要顯式地相互引用,從而使其耦合鬆散,而且可以獨立地改變他們之間的交互。 適用場景: 如果平行對象間的依賴複雜,可以使用中介者解耦。 優點: 符合迪米特法則,減少成員間的依賴。 缺點: 不適用於系統出現對 ...
  • 【前置內容】Spring 學習筆記全系列傳送門: Spring學習筆記 - 第一章 - IoC(控制反轉)、IoC容器、Bean的實例化與生命周期、DI(依賴註入) Spring學習筆記 - 第二章 - 註解開發、配置管理第三方Bean、註解管理第三方Bean、Spring 整合 MyBatis 和 ...
  • 簡介: 享元模式,屬於結構型的設計模式。運用共用技術有效地支持大量細粒度的對象。 適用場景: 具有相同抽象但是細節不同的場景中。 優點: 把公共的部分分離為抽象,細節依賴於抽象,符合依賴倒轉原則。 缺點: 增加複雜性。 代碼: //用戶類 class User { private $name; fu ...
  • 這次設計一個通用的多位元組SPI介面模塊,特點如下: 可以設置為1-128位元組的SPI通信模塊 可以修改CPOL、CPHA來進行不同的通信模式 可以設置輸出的時鐘 狀態轉移圖和思路與多位元組串口發送模塊一樣,這裡就不給出了,具體可看該隨筆。 一、模塊代碼 1、需要的模塊 通用8位SPI介面模塊 `tim ...
  • AOP-03 7.AOP-切入表達式 7.1切入表達式的具體使用 1.切入表達式的作用: 通過表達式的方式定義一個或多個具體的連接點。 2.語法細節: (1)切入表達式的語法格式: execution([許可權修飾符] [返回值類型] [簡單類名/全類名] [方法名]([參數列表]) 若目標類、介面與 ...
  • 測試一、虛繼承與繼承的區別 1.1 單個繼承,不帶虛函數 1>class B size(8): 1> + 1> 0 | + (base class A) 1> 0 | | _ia //4B 1> | + 1> 4 | _ib //4B 有兩個int類型數據成員,占8B,基類邏輯存在前面 1.2、單個 ...