sass基礎語法

Sass(Syntactically Awesome Style Sheets)是一種 CSS 預處理器,提供了比原生 CSS 更強大、更靈活的語法功能。它有兩種語法格式:

  • Sass(縮進語法,.sass 文件)
  • SCSS(CSS-like 語法,.scss 文件),推薦使用 SCSS,因其更接近標準 CSS。

一、Sass/SCSS 基礎語法

1. 變量(Variables)

$primary-color: #3498db;body {background-color: $primary-color;
}

2. 嵌套(Nesting)

nav {ul {list-style: none;}li {display: inline-block;}a {text-decoration: none;color: $primary-color;}
}

編譯為 CSS:

nav ul {list-style: none;
}
nav li {display: inline-block;
}
nav a {text-decoration: none;color: #3498db;
}

3. 父選擇器 &

a {color: blue;&:hover {color: red;}
}

編譯為 CSS:

a {color: blue;
}
a:hover {color: red;
}

4. 混合宏(Mixins)

用于定義可復用的樣式塊:

@mixin border-radius($radius) {-webkit-border-radius: $radius;-moz-border-radius: $radius;-ms-border-radius: $radius;border-radius: $radius;
}.box {@include border-radius(10px);
}

5. 函數(Functions)

可以自定義函數并返回值:

@function calculate-rem($size) {$rem-size: $size / 16px;@return #{$rem-size}rem;
}body {font-size: calculate-rem(14px);
}

6. 導入(Import)

將多個 Sass 文件合并為一個 CSS 文件:

// _variables.scss
$primary-color: #3498db;// main.scss
@import 'variables';body {background-color: $primary-color;
}

?? 注意:Sass 的 @import 已被棄用,建議使用 @use 和模塊化方式(見下文)。


7. 模塊化(@use / @forward

// _colors.scss
$primary: #3498db;
$secondary: #e74c3c;// main.scss
@use 'colors';body {background: colors.$primary;
}

8. 繼承(Extend)

通過 @extend 繼承其他選擇器的樣式:

.message {padding: 10px;border: 1px solid #ccc;
}.error {@extend .message;color: red;
}

9. 條件語句與循環

條件判斷(if/else)
@mixin theme-color($theme) {@if $theme == dark {background-color: #333;color: #fff;} @else {background-color: #fff;color: #333;}
}.container {@include theme-color(dark);
}
循環(for / each)
@for $i from 1 through 5 {.col-#{$i} {width: 20% * $i;}
}// 或者
$list: red, blue, green;
@each $color in $list {.btn-#{$color} {background: $color;}
}

二、Sass 編譯方式

你可以使用以下工具將 .scss 文件編譯為 .css 文件:

  • Dart Sass(官方推薦)
  • Node.js + sass-loader(配合 Webpack)
  • VSCode 插件如 Live Sass Compiler

安裝 Dart Sass:

npm install sass --save-dev

編譯命令:

npx sass src/styles.scss dist/styles.css

三、使用建議

技巧說明
使用 _filename.scss下劃線開頭表示 partial 文件,不會單獨編譯
模塊化組織結構base/, components/, layout/, themes/ 等目錄
使用占位符 %避免無用類輸出,只用于 @extend
變量命名規范$spacing-sm, $font-title
使用 !default 設置默認值$color: red !default;

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/diannao/84981.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/84981.shtml
英文地址,請注明出處:http://en.pswp.cn/diannao/84981.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

【JavaWeb】基本概念、web服務器、Tomcat、HTTP協議

目錄 1. 基本概念1.1 基本概念1.2 web應用程序1.3 靜態web1.4 動態web 2. web服務器3. tomcat詳解3.1 安裝3.2 啟動3.3 配置3.3.1 配置啟動的端口號3.3.2 配置主機的名稱3.3.3 其他常用配置項日志配置數據源配置安全配置 3.4 發布一個網站 4. Http協議4.1 什么是http4.2 http的…

AI in Game,大模型能力與實時音視頻技術融合,交出AI應用新答卷

隨著AI的技術進步和工具普及,尤其是在這兩年的躍進之后,AI在游戲行業內的應用已經逐步由理念設想推向落地實踐。從蔡浩宇披露的AI新游《Whispers From The Star》到GDC上各大廠家呈現的游戲AI新亮點,我們看到了更多AI與游戲的結合方式&#x…

Android Studio 2022.2.1.20 漢化教程

查看Android Studio 版本 Android Studio Flamingo | 2022.2.1 Patch 2 下載:https://plugins.jetbrains.com/plugin/13710-chinese-simplified-language-pack----/versions/stable

常見的分詞算法

常見的分詞方法分類如下: 類型名稱說明優缺點1?? 基于空格/標點Word-level以空格或標點劃分,如 "Hello, world!" → ["Hello", ",", "world", "!"]?簡單,?無法處理新詞,詞…

湖北理元理律師事務所觀察:債務優化如何成為民生安全網

據央行2023年報告,中國家庭債務收入比達137.8%。面對債務高壓,湖北理元理律師事務所的實踐揭示:專業債務規劃的價值不僅是減負數字,更是構建社會穩定的微觀防線。 一、從“催收恐懼”到“主動管理”的轉變 該所服務數據顯示&…

服務器密碼安全運維解決新思路:憑據管理SMS+雙因素SLA認證結合的方案

引言:云服務器安全成本困局 在云計算滲透率突破60%的今天,中小企業正面臨嚴峻的安全悖論:某權威機構數據顯示,72%的云上數據泄露事件源于憑據管理不當,而傳統安全解決方案的采購成本往往超過中小企業年利潤的8%。這種…

Vision Transformer網絡結構

0.前言 參考CSDN大佬(太陽花的小綠豆)的代碼,梳理了一下vit的網絡結構,代碼地址如下: deep-learning-for-image-processing/pytorch_classification/vision_transformer at master WZMIAOMIAO/deep-learning-for-image-processing GitHub …

C++ 圖像處理庫 CxImage 簡介 (遷移至OpenCV)

文章目錄 核心功能特點局限性與替代方案常用方法構造函數從數組創建圖像訪問屬性訪問像素點Windows平臺支持 常用方法遷移至OpenCV CxImage 是一款功能強大的圖像處理類庫,主要用于 Windows 平臺的圖像處理任務。它支持多種圖像格式的加載、保存、編輯及特效處理&am…

【博客系統】博客系統第十一彈:從零開始在 Linux 系統上搭建 Java 部署環境并部署 Web 項目

搭建 Java 部署環境 JDK 1. 更新軟件包 apt 命令詳細介紹 sudo apt-get update2. 安裝 OpenJDK 查找 JDK 包 apt list | grep "jdk"安裝 JDK sudo apt install openjdk-17-jdk注意: 此處安裝的是 OpenJDK,OpenJDK 是一個開源版本的 JDK&am…

智能外呼系統中 NLP 意圖理解的工作原理與技術實現

智能外呼系統通過整合語音識別(ASR)、自然語言處理(NLP)和語音合成(TTS)等技術,實現了自動化的電話交互。其中,NLP 意圖理解是核心模塊,負責解析用戶話語中的語義和意圖&…

Sigma-Aldrich胰蛋白酶細胞解離方案速覽

Sigma-Aldrich_胰蛋白酶用于細胞培養 細胞解離是細胞傳代過程中的一個步驟,即細胞從預處理表面分離,形成懸浮液。這些懸浮液對于傳代培養重新接種、細胞計數分析和細胞增殖非常重要。有多種蛋白水解酶可用來從粘附基質上脫離細胞,胰蛋白酶就…

寶塔安裝WordPress程序

寶塔安裝WordPress程序 一、提前準備1,下載WordPress2,在寶塔創建站點 二、部署項目1,上傳下載的wordpress壓縮包至創建的項目根目錄下并解壓 三、wordpress安裝1,在瀏覽器打開創建的網站2,開始按照流程安裝配置數據庫…

【LangChain】框架解析

目錄 🌟 前言🏗? 技術背景與價值🩹 當前技術痛點🛠? 解決方案概述👥 目標讀者說明 🧠 一、技術原理剖析📊 核心架構圖解💡 核心作用講解🔧 關鍵技術模塊說明?? 技術選…

百度之星2024 初賽第一場 補給

百度之星2024 初賽第一場 補給 題干描述問題分析:C代碼Java代碼:Python代碼補充說明: 題干描述 參考自馬蹄集OJ,原文鏈接1 可怕的戰爭發生了,小度作為后勤保障工作人員,也要為了保衛國家而努力。 現在有 …

JavaScripts console.log和console.dir區別

console.log 和 console.dir 都是 JavaScript 中用于在瀏覽器控制臺打印信息的方法 ,二者主要有以下區別: 輸出內容和格式 console.log:主要用于輸出簡單的日志信息,直接打印數據的字符串表示 。對于對象、數組等引用類型&#…

uniapp 開發企業微信小程序時,如何在當前頁面真正銷毀前或者關閉小程序前調用一個api接口

在 UniApp 開發企業微信小程序時,若需在頁面銷毀或小程序關閉前調用 API 接口,需結合頁面生命周期和應用生命周期實現。以下是具體實現方案及注意事項: 一、在頁面銷毀前調用 API(頁面級) 通過頁面生命周期鉤子 onUnl…

聊聊 Metasploit 免殺

各位小伙伴們,晚上好! 咱們今天打開宵夜“安全食材箱”,聊聊滲透測試繞過殺毒(免殺)的那些門道。你可以把免殺理解為——深夜做宵夜時,家里有人睡覺,但你非得去廚房整點美食,還不能…

Android高級開發第二篇 - JNI 參數傳遞與 Java → C → Java 雙向調用

文章目錄 Android高級開發第二篇 - JNI 參數傳遞與 Java → C → Java 雙向調用引言JNI基礎回顧JNI中的參數傳遞基本數據類型傳遞字符串傳遞數組傳遞對象傳遞 Java → C → Java 雙向調用從C/C調用Java方法實現一個完整的回調機制 內存管理與注意事項性能優化提示結論參考資源 …

2025-05-28 Python深度學習8——優化器

文章目錄 1 工作原理2 常見優化器2.1 SGD2.2 Adam 3 優化器參數4 學習率5 使用最佳實踐 本文環境: Pycharm 2025.1Python 3.12.9Pytorch 2.6.0cu124 ? 優化器 (Optimizer) 是深度學習中的核心組件,負責根據損失函數的梯度來更新模型的參數,使…