關於CSS、SCSS、Sass、html單頁面使用scss

来源:https://www.cnblogs.com/Steal-cha-of-Melon/archive/2023/02/01/walon_second_title.html
-Advertisement-
Play Games

1.CSS、SCSS、Sass CSS是開發人員熟知的一種用於頁面樣式開發的語言,可以通過內容的分離控制減少代碼的重覆性,降低代碼的複雜程度。 Sass與 SCSS 都是 CSS 預處理器,可包含在基於 CSS 的 UI(用戶界面)或前端框架中以簡化開發。Sass 與 SCSS 框架在高級別的 CS ...


1.CSS、SCSS、Sass

  CSS是開發人員熟知的一種用於頁面樣式開發的語言,可以通過內容的分離控制減少代碼的重覆性,降低代碼的複雜程度。

  Sass與 SCSS 都是 CSS 預處理器,可包含在基於 CSS 的 UI(用戶界面)或前端框架中以簡化開發。Sass 與 SCSS 框架在高級別的 CSS 功能方面提供了強大的功能。預處理器的選擇取決於通過以有效的方式做出權衡選擇來使應用程式高效工作所需的功能和特性。

  SCSS 作為 Sass 的主要語法引入,它建立在現有的 CSS 語法之上,不僅包含 CSS 的所有功能和 Sass 的一些功能,還添加了一些額外的特殊功能。可以說 SCSS 是 CSS 的超集,其中 CSS 的所有功能都將在 SCSS 中可用,填補了 CSS 與 Sass 之間的空白和不相容,SCSS 可以與 Sass 一起使用來表示 CSS 類似的特性。而 Sass 是 CSS 的擴展,提供嵌套規則、繼承、Mixins等特性。與 SCSS 相比, Sass 更易於使用並且需要更少的語法或配置,無需使用分號、曲線、大括弧等,推薦用於需要更快開發範圍和更容易開發複雜組件的較大應用程式的情況,而 SCSS 可以用於優化 Mixin 特性的情況,以及許多其他有效技術。

2.HTML單頁面引入SCSS

  理論上html頁面只能引入css文件,如果要引入scss文件,需要安裝 Sass 工具動態監聽scss文件更改,更改後scss文件會被自動編譯生成css文件,將生成的css文件靜態引入到 html 頁面中。

 (1)Sass工具安裝:在有 npm( 或 yarn )前提下安裝或文件目錄下打開 cmd 安裝(全局安裝帶 -g,局部不用)

npm install sass -g 

 (2)監聽 scss 文件更改

(1)監聽文件夾 :sass --watch scss:css

(2)監聽單個文件:sass --watch a.scss:a.css

 (3)將 css 文件引入 html 頁面

  按上述步驟完成操作後css文件會自動生成,將生成的css文件引入頁面即可

 

如不能實現效果請檢查以下幾點:

1.文件名最好是英文,這裡我用的是“CSS-PLAY”

2.需要新建兩個文件夾,分別是“css”和“scss”,如未建文件夾需要建好文件夾並將scss文件放入scss文件夾中後再次開啟監聽

3.是否引入css文件,由於引入是最後一步,很容易忽略,所以一定檢查好後再運行代碼查看效果

 

待補充......


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

-Advertisement-
Play Games
更多相關文章
  • 1 命名規範 1、【強制】庫名、表名、欄位名必須使用小寫字母並採用下劃線分割,禁止拼音英文混用;(禁用-,-相當於運算符) 2、【建議】庫名、表名、欄位名在滿足業務需求的條件下使用最小長度; 如information --> info;address --> addr等 3、【強制】庫名、表名、欄位 ...
  • 閱識風雲是華為雲信息大咖,擅長將複雜信息多元化呈現,其出品的一張圖(雲圖說)、深入淺出的博文(雲小課)或短視頻(雲視廳)總有一款能讓您快速上手華為雲。更多精彩內容請單擊此處。 摘要:為了擴展主節點的讀請求能力,DDS提供具備獨立連接地址的只讀節點,適合獨立系統直連訪問,以緩解大量讀請求給主節點造成的 ...
  • GreatSQL社區原創內容未經授權不得隨意使用,轉載請聯繫小編並註明來源。 GreatSQL是MySQL的國產分支版本,使用上與MySQL一致。 作者: KAiTO 文章來源:GreatSQL社區原創 往期回顧 圖文結合帶你搞懂MySQL日誌之relay log(中繼日誌) 圖文結合帶你搞懂MyS ...
  • 慢查詢指的是資料庫中查詢時間超過了指定的閾值的SQL,這類SQL通常伴隨著執行時間長、伺服器資源占用高、業務響應慢等負面影響。隨著攜程酒店業務的不斷擴張,再加上大量的SQLServer轉MySQL項目的推進,慢查詢的數量正在飛速增長,每日的報警量也居高不下,因此慢查詢的治理優化已經是刻不容緩,此文主... ...
  • 1:apk文件結構 如圖所示: assets: 存放應用程式的靜態資源文件,如圖片資源,json配置文件,html離線資源等。註意,assets目錄下是支持任意深度的子目錄。 res: 規定的指定文件,圖標,圖片資源等,且res下文件都會生成對應的資源id, 但是assets下是不會的。 lib: ...
  • 在元素設置浮動(float)後,該元素就會脫離文檔流,並且向左或向右浮動,直至它的外邊緣遇到包含框或者另一個浮動框的邊緣。 一、浮動元素對佈局的影響 1.1、浮動元素造成父元素的高度塌陷: 原來的父元素高度是內部元素撐開的,但是當內部元素浮動後,脫離文檔流浮動起來,那父元素的高度就坍塌,變為高度 0 ...
  • 寫代碼的時候遇到這個問題了,在這裡複習一下 非箭頭函數 非箭頭函數的this指向比較好理解,就是調用這個函數的對象,舉個慄子: var obj = { foo: { bar: 3, foo:{ bar: 4, foo: function a() { console.log(this.bar) }, ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 什麼是跨域? 跨域不是問題,是一種安全機制。瀏覽器有一種策略名為同源策略,同源策略規定了部分請求不能被瀏覽器所接受。 值得一提的是:同源策略導致的跨域是瀏覽器單方面拒絕響應數據,伺服器端是處理完畢並做出了響應的。 什麼是同源策略 一個ur ...
一周排行
    -Advertisement-
    Play Games
  • 隨著Aspire發佈preview5的發佈,Microsoft.Extensions.ServiceDiscovery隨之更新, 服務註冊發現這個屬於老掉牙的話題解決什麼問題就不贅述了,這裡主要講講Microsoft.Extensions.ServiceDiscovery(preview5)以及如何 ...
  • 概述:通過使用`SemaphoreSlim`,可以簡單而有效地限制非同步HTTP請求的併發量,確保在任何給定時間內不超過20個網頁同時下載。`ParallelOptions`不適用於非同步操作,但可考慮使用`Parallel.ForEach`,儘管在非同步場景中謹慎使用。 對於併發非同步 I/O 操作的數量 ...
  • 1.Linux上安裝Docken 伺服器系統版本以及內核版本:cat /etc/redhat-release 查看伺服器內核版本:uname -r 安裝依賴包:yum install -y yum-utils device-mapper-persistent-data lvm2 設置阿裡雲鏡像源:y ...
  • 概述:WPF界面綁定和渲染大量數據可能導致性能問題。通過啟用UI虛擬化、非同步載入和數據分頁,可以有效提高界面響應性能。以下是簡單示例演示這些優化方法。 在WPF中,當你嘗試綁定和渲染大量的數據項時,性能問題可能出現。以下是一些可能導致性能慢的原因以及優化方法: UI 虛擬化: WPF提供了虛擬化技術 ...
  • 引言 上一章節介紹了 TDD 的三大法則,今天我們講一下在單元測試中模擬對象的使用。 Fake Fake - Fake 是一個通用術語,可用於描述 stub或 mock 對象。 它是 stub 還是 mock 取決於使用它的上下文。 也就是說,Fake 可以是 stub 或 mock Mock - ...
  • 為.net6在CentOS7上面做準備,先在vmware虛擬機安裝CentOS 7.9 新建CentOS764位的系統 因為CentOS8不更新了,所以安裝7;簡單就一筆帶過了 選擇下載好的操作系統的iso文件,下載地址https://mirrors.aliyun.com/centos/7.9.20 ...
  • 經過前面幾篇的學習,我們瞭解到指令的大概分類,如:參數載入指令,該載入指令以 Ld 開頭,將參數載入到棧中,以便於後續執行操作命令。參數存儲指令,其指令以 St 開頭,將棧中的數據,存儲到指定的變數中,以方便後續使用。創建實例指令,其指令以 New 開頭,用於在運行時動態生成並初始化對象。方法調用指... ...
  • LiteDB 是一個輕量級的嵌入式 NoSQL 資料庫,其設計理念與 MongoDB 類似,但它是完全使用 C# 開發的,因此與 C# 應用程式的集成非常順暢。與 SQLite 相比,LiteDB 提供了 NoSQL(即鍵值對)的數據存儲方式,並且是一個開源且免費的項目。它適用於桌面、移動以及 We ...
  • 1 開源解析和拆分文檔 第三方的工具去對文件解析拆分,去將我們的文件內容給提取出來,並將我們的文檔內容去拆分成一個小的chunk。常見的PDF word mark down, JSON、HTML。都可以有很好的一些模塊去把這些文件去進行一個東西去提取。 優勢 支持豐富的文檔類型 每種文檔多樣化選擇 ...
  • OOM是什麼?英文全稱為 OutOfMemoryError(記憶體溢出錯誤)。當程式發生OOM時,如何去定位導致異常的代碼還是挺麻煩的。 要檢查OOM發生的原因,首先需要瞭解各種OOM情況下會報的異常信息。這樣能縮小排查範圍,再結合異常堆棧、heapDump文件、JVM分析工具和業務代碼來判斷具體是哪 ...