關於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
  • 就像 Web Api 介面可以對入參進行驗證,避免用戶傳入非法的或者不符合我們預期的參數一樣,選項也可以對配置源的內容進行驗證,避免配置中的值與選項類中的屬性不對應或者不滿足預期,畢竟大部分配置都是通過字元串的方式,驗證是很有必要的。 1. 註解驗證 像入參驗證一樣,選項驗證也可以通過特性註解方便地 ...
  • 原文作者:aircraft 原文鏈接:https://www.cnblogs.com/DOMLX/p/17270107.html 加工的泛型類如下: using System; using System.Collections.Generic; using System.IO; using Syst ...
  • 在前一篇文章,我們瞭解瞭如何通過.NET6+Quartz開發基於控制台應用程式的定時任務,今天繼續在之前的基礎上,進一步講解基於ASP.NET Core MVC+Quartz實現定時任務的可視化管理頁面,僅供學習分享使用,如有不足之處,還請指正。 涉及知識點 Quartz組件,關於Quartz組件的 ...
  • 面向對象1 面向對象,更在乎的結果,而過程的實現並不重要 IDea快捷鍵(基礎版) | 快捷鍵 | 作用 | | | | | ctrl + / | 快捷註釋 | | ctrl + shift + / | 多行註釋 | | ctrl + d | 快速複製 | | ctrl + shift + up/d ...
  • NX中的checkmate功能是用於檢查模型、圖紙數據的工具,在UGOPEN中有例子。手動操作可以檢查已載入的裝配下所有零部件,可以設置通過後保存模型,檢查結果保存到Teamcenter中,預設保存在零組件版本下。 代碼中可以設置多個檢查規則。相關設置可以在用戶預設設置中進行設置。 1 // 2 / ...
  • JavaSE 運算符 算術運算符:+,-,*,/,%,++(自增),--(自減) i++:先用後+1;++i:先+1後用 賦值運算符:= 擴展賦值運算符:+=,-=,*=,/= a+=b >a=a+b: ​ 可讀性差,但是編譯效率高,且會自動進行類型轉換; ​ 當ab為基本數據類型時,a+b和b+a ...
  • 面向對象2 訪問修飾符 | | private | default | protected | public | | | | | | | | 當前類 | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_che ...
  • 推薦一些學習qml教程 Qt官方的QML教程: https://doc.qt.io/qt-5/qtqml-index.html 這是一個由Qt官方提供的完整的QML教程,包含了所有基本知識和高級語法。 QML中文網:http://www.qmlcn.com/ 這是一個非常不錯的中文QML學習網站,提 ...
  • QAbstractBUtton: 所有按鈕控制項的基類 提供按鈕的通用功能 繼承自QWidget 屬於抽象類別,不能直接去使用,必須藉助於子類(除非你覺得子類不夠用,想自定義一個按鈕) 大部分功能之前已經使用過,在這裡只作簡單介紹 文本設置: setText(str) :設置按鈕提示文本 text() ...
  • 使用 VLD 記憶體泄漏檢測工具輔助開發時整理的學習筆記。本篇介紹 VLD 配置文件中配置項 StartDisabled 的使用方法。 ...