CSS 预处理器:Sass的基本用法、核心特性 - 详解

news/2025/10/21 10:20:20/文章来源:https://www.cnblogs.com/yxysuanfa/p/19154327

关于 Sass(Syntactically Awesome Style Sheets) 的详细介绍,包括其基本用法、核心特性、语法差异(.scss vs .sass),以及多个经典实用示例。


在这里插入图片描述
在这里插入图片描述

一、什么是 Sass?

Sass 是一种 CSS 预处理器(CSS Preprocessor),它扩展了 CSS 的功能,允许你使用变量、嵌套、混合(mixin)、函数、条件、循环等“编程式”语法来编写样式,最终编译为标准的 CSS 文件供浏览器使用。

✅ 主要优势:


二、Sass 两种语法格式

Sass 支持两种语法,功能相同,只是写法不同:

格式文件扩展名特点
SCSS(Sassy CSS).scss类似 CSS 语法,使用 {};,推荐使用
Sass(缩进语法).sass缩进代替括号,无分号,类似 Python

推荐使用 .scss,因为它与 CSS 完全兼容,学习成本低。


在这里插入图片描述

三、Sass 核心特性与用法

1. 变量(Variables)

使用 $ 定义变量,用于存储颜色、字体、尺寸等,便于统一管理。

// 定义变量
$primary-color: #007bff;
$font-stack: 'Helvetica Neue', sans-serif;
$border-radius: 4px;
// 使用变量
.button {background-color: $primary-color;font-family: $font-stack;border-radius: $border-radius;
}

编译后:

.button {
background-color: #007bff;
font-family: 'Helvetica Neue', sans-serif;
border-radius: 4px;
}

2. 嵌套(Nesting)

允许在父选择器中嵌套子元素,结构更清晰。

.navbar {background: #333;padding: 1rem;.nav-link {color: white;text-decoration: none;&:hover {color: $primary-color;}}.logo {font-weight: bold;}
}

编译后:

.navbar {
background: #333;
padding: 1rem;
}
.navbar .nav-link {
color: white;
text-decoration: none;
}
.navbar .nav-link:hover {
color: #007bff;
}
.navbar .logo {
font-weight: bold;
}

& 表示父选择器,常用于 :hover, :focus, 伪类等。


3. 混合(Mixins)

类似“函数”,可定义可复用的样式块,支持参数和默认值。

// 定义一个带阴影的 mixin
@mixin box-shadow($x: 0, $y: 2px, $blur: 4px, $color: rgba(0,0,0,0.1)) {box-shadow: $x $y $blur $color;
}
// 使用 mixin
.card {@include box-shadow(0, 4px, 8px, rgba(0,0,0,0.15));
}
.button {@include box-shadow();
}

编译后:

.card {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.button {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

4. 继承(Extend)

让一个选择器继承另一个的样式,减少重复。

%message-shared {border: 1px solid #ccc;padding: 10px;color: #333;
}
.success {@extend %message-shared;border-color: green;
}
.error {@extend %message-shared;border-color: red;
}

编译后:

.success, .error {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
border-color: green;
}
.error {
border-color: red;
}

%placeholder 是占位符选择器,不会输出到 CSS,仅用于继承。


5. 函数(Functions)

Sass 内置大量函数(如 lighten(), darken(), rgba()),也可自定义函数。

$base-color: #007bff;
.button-primary {background-color: $base-color;border-color: darken($base-color, 10%);color: lighten($base-color, 40%);
}

编译后:

.button-primary {
background-color: #007bff;
border-color: #005ecc;
color: #b3d9ff;
}

6. 条件与循环(@if / @for / @each / @while)

Sass 支持编程逻辑,适合生成复杂样式。

示例:使用 @each 生成按钮主题
$themes: (primary: #007bff,success: #28a745,danger:  #dc3545,warning: #ffc107
);
@each $name, $color in $themes {.btn-#{$name} {background-color: $color;border-color: darken($color, 10%);&:hover {background-color: darken($color, 10%);}}
}

编译后(部分):

.btn-primary {
background-color: #007bff;
border-color: #005ecc;
}
.btn-primary:hover {
background-color: #005ecc;
}
/* ... 其他主题 */
示例:使用 @for 生成栅格类
@for $i from 1 through 12 {.col-#{$i} {width: (100% / 12) * $i;}
}

编译后:

.col-1 { width: 8.333%; }
.col-2 { width: 16.667%; }
/* ... */
.col-12 { width: 100%; }

四、模块化与文件组织(@use / @import)

推荐使用 @use(Sass 1.23+ 推荐)

// _variables.scss
$primary: #007bff;
$spacing: 1rem;
// _mixins.scss
@mixin center {display: flex;justify-content: center;align-items: center;
}
// main.scss
@use 'variables' as vars;
@use 'mixins';
.card {margin: vars.$spacing;@include mixins.center;
}

_ 开头的文件是“部分文件”(partial),不会单独编译。


⚙️ 五、如何使用 Sass?

1. 安装 Sass

npm install -g sass

2. 编译 SCSS 到 CSS

sass input.scss output.css

3. 开启监听模式(开发时)

sass --watch input.scss output.css

4. 在项目中使用(如 Webpack/Vite)

  • 使用 sass-loader(Webpack)
  • 或直接在 Vue/React 项目中引入 .scss 文件

六、经典实用示例

✅ 示例 1:响应式断点混合(Responsive Mixins)

// _mixins.scss
@mixin mobile {@media (max-width: 768px) { @content; }
}
@mixin tablet {@media (min-width: 769px) and (max-width: 1024px) { @content; }
}
@mixin desktop {@media (min-width: 1025px) { @content; }
}
// 使用
.container {padding: 2rem;@include mobile {padding: 1rem;}@include desktop {max-width: 1200px;margin: 0 auto;}
}

✅ 示例 2:创建主题切换(CSS 变量 + Sass)

:root {--primary-color: #{$primary};--text-color: #333;
}
[data-theme="dark"] {--primary-color: #{darken($primary, 20%)};--text-color: #eee;
}
.theme-toggle {background: var(--primary-color);color: white;
}

✅ 示例 3:生成图标类(@each)

$icons: (home: "\e900",user: "\e901",settings: "\e902"
);
@each $name, $code in $icons {.icon-#{$name}:before {content: $code;font-family: 'IconFont';}
}

✅ 总结:Sass 的核心价值

特性用途
$变量统一管理颜色、字体、间距
@mixin封装可复用样式(阴影、动画)
@include调用 mixin
@extend继承样式,减少冗余
嵌套提高结构可读性
@each/@for批量生成类(栅格、主题)
@use模块化组织样式文件

推荐学习资源


一句话总结
Sass = CSS + 变量 + 函数 + 逻辑 + 模块化,是现代前端开发不可或缺的样式编程工具。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/942016.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2025 顶管源头厂家最新推荐榜单:F 型混凝土 / 水泥 / 电力 / 矩形 / 市政排水大口径优质供应商精选

引言 当前城市地下管网、综合管廊等基础设施建设进入高峰期,顶管作为核心建材的市场需求持续激增。但行业中仍存在产能不足导致供货滞后、工艺不规范引发质量隐患、新品牌实力难辨等问题,采购方常因信息不对称选错供…

使用DMA和PWM驱动16组WS2812 LED的STM32实现

STM32使用DMA和PWM来驱动16组WS2812 LED灯带。WS2812是一种智能控制LED,每个LED都需要24位数据(8位绿色,8位红色,8位蓝色),并且对时序要求非常严格。 硬件设计考虑GPIO选择:选择16个可用的GPIO引脚,最好是同一…

2025年GEO品牌推荐榜:云视GEO以全栈技术引领行业变革

文章摘要 本文基于2025年GEO行业趋势,深度分析用户对品牌推荐和排行的需求,重点推荐四川云视有客科技有限公司的云视GEO服务。通过解读其GEO-AI搜索优化技术、线性规划博弈算法及定制化方案,揭示如何实现干预延迟≤…

【开题答辩实录分享】以《 Python基于大数据的四川旅游景点数据分析与可视化》为例进行答辩实录分享 - 实践

【开题答辩实录分享】以《 Python基于大数据的四川旅游景点数据分析与可视化》为例进行答辩实录分享 - 实践pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display…

linux 程序 启动命令

#!/bin/sh # 获取当前日期current_date=$(date +%Y-%m-%d) # 0. 关闭程序kill -9 `ps -ef|grep java | grep leaf-business-zyyk-flow | awk {print \$2}` > /dev/null 2>&1 # 删除创建日期在10天前的日志文…

2025 年台车炉厂家最新推荐榜,技术实力与市场口碑深度解析,助力企业精准选型天然气/燃气/热处理/全纤维/翻转式台车炉厂家推荐

引言 在工业制造领域,台车炉作为热处理关键设备,其性能直接关系到工件质量、生产效率与企业能耗成本。当前市场上,台车炉品牌数量繁杂,部分产品存在控温精度不足、能耗偏高、售后响应滞后等问题,叠加环保政策趋严…

2025 年贵阳家居品牌最新推荐榜,技术实力与市场口碑深度解析贵阳家居实木家具/贵阳家居布艺沙发/贵阳家居多功能沙发家居公司推荐

引言 伴随家居消费升级与行业智能化转型,贵阳家居市场呈现 “新旧品牌同台竞技” 的格局:既有深耕本地的老牌企业,也有凭借创新快速崛起的新锐力量。但市场繁荣背后,材质以次充好、环保不达标、售后缺位等问题仍困…

ida pro 9.2 接入 ida-pro-mcp

ida-pro-mcp 官方文档 https://github.com/mrexodia/ida-pro-mcp 已在是我的安装过过程 1. 安装IDA pro 9.2 ,默认路径 C:\Program Files\IDA Professional 9.2 2. 下载安装python及pip,下载python3.11压缩包到ida安…

2025 年最新高低温试验箱厂家排行榜:精选优质供应商,专业推荐助您精准选购合适设备恒温恒湿试验箱/高低温试验箱厂家推荐

引言 在工业生产与科研实验中,高低温试验箱是保障产品质量、推动科研进展的关键设备。但当前市场品牌繁杂,部分小型品牌缺乏核心技术,设备在温度控制精度、稳定性等方面难以达标,且行业标准执行不到位、售后服务不…

稀疏网格高斯-埃尔米特数值积分方法

稀疏网格方法是一种高效的高维数值积分技术,通过组合一维积分规则来避免"维度灾难"。MATLAB实现用于生成稀疏网格高斯-埃尔米特积分节点和权重。 function [nodes, weights] = sparseGridGH(d, level, vara…

2025 年淬火炉源头厂家最新推荐榜:聚焦技术创新与市场口碑深度解析,精选优质企业供采购参考

引言 随着工业制造向高精度、低能耗、智能化转型,淬火炉作为热处理环节的关键设备,其性能直接决定工件质量与生产效率。当前市场中,淬火炉厂家数量繁杂,部分企业存在技术滞后、产品适配性差、售后保障不足等问题,…

2025 年国际物流服务公司最新推荐排行榜:覆盖海运快递跨境专线,精选优质企业助力跨境电商商家高效选择合作伙伴

引言 在全球化贸易不断深入、跨境电商规模持续扩张的背景下,国际物流作为连接商家与全球市场的核心纽带,其服务质量直接影响商家的运营效率与市场竞争力。然而,当前市场上国际物流企业数量众多,服务水平参差不齐,…

跟着GPT5学习bert分类中[CLS]标记 hidden state的作用

gpt1 核心功能是什么 GPT-5 GPT‑1(Generative Pre-trained Transformer 1)是 OpenAI 于 2018 年 发布的第一个「生成式预训练 Transformer」模型。虽然与后来 GPT‑2、GPT‑3 甚至 GPT‑4 相比,它的规模很小(…

2025 年最新推荐立体画厂家权威榜单:涵盖 3D 光栅 / 装饰 / 三维等品类,助力精准选优质厂家

引言 当前立体画行业发展迅猛,市场上产品类型日益丰富,涵盖 3D 光栅立体画、立体光栅卡、3D 装饰立体画、三维立体画等多个品类,但同时也面临品牌杂乱、技术水平悬殊、产品质量参差不齐的问题。企业和消费者在选择时…

详细介绍:关于容器Docker

详细介绍:关于容器Dockerpre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", &…

实用指南:【办公类-116-01】20250929家长会PPT(Python快速批量制作16:9PPT相册,带文件名,照片横版和竖版)

实用指南:【办公类-116-01】20250929家长会PPT(Python快速批量制作16:9PPT相册,带文件名,照片横版和竖版)pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; disp…

为什么String 创建的字符串存储在公共池中,而 new 创建的字符串对象在堆上?公共池和堆又是什么?

字符串常量池是堆的一部分,专门用于高效存储唯一的字符串字面量​​。String s1 = "abc"的方式直接与池交互,优先复用对象; 而 String s2 = new String("abc")则无视池中情况,直接在堆上创建新…

完整教程:计算机视觉进阶教学之Mediapipe库(一)

pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", …

Docker 部署微服务项目保姆级教程

这是一篇专门写给编程新手的微服务部署全流程教程,不用纠结复杂概念,不用怕踩网络或环境坑。我们从Docker环境一键搭建开始,用轩辕镜像解决国内拉取镜像慢的问题,避开OpenJDK弃用的雷区,全程手把手带你完成「本地…

审视生产制造ERP,发掘零售高效协同路径

审视生产制造ERP,发掘零售高效协同路径美妆零售行业以其快速的产品迭代、严格的质量安全标准和复杂的供应链体系而著称。从原料采购、配方管理、生产加工到多渠道分销,每一个环节都需要严谨的管控。为了应对这些挑战…