關於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
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...