当前位置: 首页 > article >正文

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;

相关文章:

sass基础语法

Sass(Syntactically Awesome Style Sheets)是一种 CSS 预处理器,提供了比原生 CSS 更强大、更灵活的语法功能。它有两种语法格式: Sass(缩进语法,.sass 文件)SCSS(CSS-like 语法&am…...

【EF Core】 EF Core 批量操作的进化之路——从传统变更跟踪到无跟踪更新

文章目录 前言一、批量操作(Rang)1.1 AddRange()1.2 UpdateRange()1.3 AttachRange()1.4 RemoveRange() 二、Range操作的底层优化2.1 EF Core 7 前举步维艰2.2 EF Core 7后焕然一新 三、无跟踪的批量更新与删除3.1 ExecuteUpdate3.2 ExecuteDelete3.3 状…...

[Go] Option选项设计模式 — — 编程方式基础入门

[Go] Option选项设计模式 — — 编程方式基础入门 全部代码地址,欢迎⭐️ Github:https://github.com/ziyifast/ziyifast-code_instruction/tree/main/go-demo/go-option 1 介绍 在 Go 开发中,我们经常遇到需要处理多参数配置的场景。传统方…...

Vue 项目命名规范指南

📚 Vue 项目命名规范指南(适用于 Vue 3 Pinia Vue Router) 目的:统一命名风格,提升可读性、可维护性和团队协作效率。 一、通用原则 类型命名风格示例变量camelCaseuserName, isLoading常量UPPER_SNAKE_CASEMAX_RET…...

【笔记】开源通用人工智能代理 Suna 部署全流程准备清单(Windows 系统)

#工作记录 一、基础工具与环境 开发工具 Git 或 GitHub Desktop(代码管理)Docker Desktop(需启用 WSL2,容器化部署)Python 3.11(推荐版本,需添加到系统环境变量)Node.js LTS&#xf…...

海康工业相机SDK二次开发(VS+QT+海康SDK+C++)

前言 工业相机在现代制造和工业自动化中扮演了至关重要的角色,尤其是在高精度、高速度检测中。海康威视工业相机以其性能稳定、图像质量高、兼容性强而受到广泛青睐。特别是搞机器视觉的小伙伴们跟海康打交道肯定不在少数,笔者在平常项目中跟海康相关人…...

前端面试准备-5

1.Node.js中的process.nectTick()有什么作用 将一个回调函数插入到当前执行栈的尾部,在下一次事件轮询之前调用这个回调函数 2.什么是Node.js中的事件发射器,作用是什么,如何使用 提供一种机制,可以创建、触发和监听自定义事件…...

Spring Boot 启动流程深度解析:从源码到实践

Spring Boot 启动流程深度解析:从源码到实践 Spring Boot 作为 Java 开发的主流框架,其 “约定大于配置” 的理念极大提升了开发效率。本文将从源码层面深入解析 Spring Boot 的启动流程,并通过代码示例展示其工作机制。 一、Spring Boot 启…...

深度学习|pytorch基本运算-乘除法和幂运算

【1】引言 前序学习进程中,已经对pytorch张量数据的生成和广播做了详细探究,文章链接为: 深度学习|pytorch基本运算-CSDN博客 深度学习|pytorch基本运算-广播失效-CSDN博客 上述探索的内容还止步于张量的加减法,在此基础上&am…...

嵌入式通用集成电路卡市场潜力报告:物联网浪潮下的机遇与挑战剖析

一、嵌入式通用集成电路卡概述​ 嵌入式通用集成电路卡(Embedded Universal Integrated Circuit Card,简称 eUICC),是一种将传统 SIM 卡功能直接嵌入到设备主板上的芯片解决方案 。与传统可插拔式 SIM 卡不同,eUICC 采…...

4.2.4 Spark SQL 数据写入模式

在本节实战中,我们详细探讨了Spark SQL中数据写入的四种模式:ErrorIfExists、Append、Overwrite和Ignore。通过具体案例,我们演示了如何使用mode()方法结合SaveMode枚举类来控制数据写入行为。我们首先读取了一个JSON文件生成DataFrame&#…...

论文笔记: Urban Region Embedding via Multi-View Contrastive Prediction

AAAI 2024 1 INTRO 之前基于多视图的region embedding工作大多遵循相同的模式 单独的单视图表示多视图融合 但这种方法存在明显的局限性:忽略了不同视图之间的信息一致性 一个区域的多个视图所携带的信息是高度相关的,因此它们的表示应该是一致的如果能…...

Android 缓存应用冻结器(Cached Apps Freezer)

一、核心功能与原理 1. 功能概述 目标:通过冻结后台缓存应用的进程,减少其对 CPU、内存等系统资源的消耗,优化设备性能与续航。适用场景:针对行为不当的后台应用(如后台偷偷运行代码、占用 CPU)&#xff…...

初学者如何微调大模型?从0到1详解

本文将手把手带你从0到1,详细解析初学者如何微调大模型,让你也能驾驭这些强大的AI工具。 1. 什么是大模型微调? 想象一下,预训练大模型就像一位博览群书但缺乏专业知识的通才。它掌握了海量的通用知识,但可能无法完美…...

西瓜书第十一章——降维与度量学习

文章目录 降维与度量学习k近邻学习原理头歌实战-numpy实现KNNsklearn实现KNN 降维——多维缩放(Multidimensional Scaling, MDS,MDS)提出背景与原理重述1.**提出背景**2.**数学建模与原理推导**3.**关键推导步骤** Principal Component Analy…...

Portainer安装指南:多节点监控的docker管理面板-家庭云计算专家

背景 Portainer 是一个轻量级且功能强大的容器管理面板,专为 Docker 和 Kubernetes 环境设计。它通过直观的 Web 界面简化了容器的部署、管理和监控,即使是非技术用户也能轻松上手。Portainer 支持多节点管理,允许用户从一个中央控制台管理多…...

NanoGPT的BenchMarking.py

1.Benchmarking是一种评估和比较性能的过程。在深度学习领域,它通常涉及对模型的训练速度、推理速度、内存占用等指标进行测量,以便评估不同模型、不同硬件配置或者不同软件版本之间的性能差异。 例如,当你尝试比较两个不同架构的模型&#x…...

测试用例及黑盒测试方法

一、测试用例 1.1 基本要素 测试用例(Test Case)是为了实施测试而向被测试的系统提供的一组集合,这组集合包含:测试环境、操作步骤、测试数据、预期结果等4个主要要素。 1.1.1 测试环境 定义:测试执行所需的软硬件…...

CentOS 7 环境下部署 LAMP

在 CentOS 7 环境下部署 LAMP(Linux Apache MySQL 5.7 PHP 7.4) 环境的详细步骤如下: 1. 系统准备 1.1 更新系统 sudo yum update -y 1.2 安装依赖 sudo yum install -y gcc pcre pcre-devel zlib zlib-devel openssl openssl-devel e…...

vscode实用配置

前端开发安装插件: 1.可以更好看的显示文件图标 2.用户快速打开文件 使用步骤:在html文件下右键点击 open with live server 即可 刷力扣: 安装这个插件 还需要安装node.js即可...

React 项目中封装 Excel 导入导出组件:技术分享与实践

文章目录 前言一、为什么需要封装 Excel 组件?二、技术选型三、核心实现1. 安装依赖2. 封装Excel导出3. 封装导入组件 (UploadExcel) 总结 前言 在 React 项目中,处理 Excel 文件的导入和导出是常见的业务需求。无论是导出报表数…...

【PhysUnits】15.1 引入P1后的加一特质(add1.rs)

一、源码 代码实现了类型系统中的"加一"操作(Add1 trait),用于在编译期进行数字的增量计算。 //! 加一操作特质实现 / Increment operation trait implementation //! //! 说明: //! 1. Z0、P1,、N1 1&#xff0…...

【2025CCF中国开源大会】RISC-V 开源生态的挑战与机遇分论坛重磅来袭!共探开源芯片未来

点击蓝字 关注我们 CCF Opensource Development Committee 开源浪潮正从软件席卷硬件领域,RISC-V作为全球瞩目的开源芯片架构,正在重塑计算生态的版图!相较于成熟的x86与ARM,RISC-V生态虽处爆发初期,却蕴藏着无限可能。…...

python完成批量复制Excel文件并根据另一个Excel文件中的名称重命名

import openpyxl import shutil import os # 原始文件路径 original_file "C:/Users/Administrator/Desktop/事业联考面试名单/郑州.xlsx" # 读取包含名称的Excel文件 # 修改为您的文件名 wb openpyxl.load_workbook( "C:/Users/Administrator/Desktop/事…...

Vue-2-前端框架Vue基础入门之二

文章目录 1 计算属性1.1 计算属性简介1.2 计算属性示例 2 侦听器2.1 简单的侦听器2.2 深度监听2.3 监听对象单个属性 3 vue-cli3.1 工程化的Vue项目3.2 Vue项目的运行流程 4 vue组件4.1 Vue组件的三个部分4.1.1 template4.1.2 script4.1.3 style 4.2 组件之间的关系4.2.1 使用组…...

CPT208 Human-Centric Computing 人机交互 Pt.7 交互和交互界面

文章目录 1. 界面隐喻(Interface metaphors)1.1 界面隐喻的应用方式1.2 界面隐喻的优缺点 2. 交互类型2.1 Instructing(指令式交互)2.2 Conversing(对话式交互)2.3 Manipulating(操作式交互&…...

ubuntu20.04.5-arm64版安装robotjs

ubuntu20.04.5arm上使用robotjs #ssh,可选 sudo apt update sudo apt install openssh-server sudo systemctl status ssh sudo systemctl enable ssh sudo systemctl enable --now ssh #防火墙相关,可选 sudo ufw allow ssh sudo ufw allow 2222/tc…...

[网页五子棋][匹配模块]前后端交互接口(消息推送机制)、客户端开发(匹配页面、匹配功能)

让多个用户,在游戏大厅中能够进行匹配,系统会把实力相近的两个玩家凑成一桌,进行对战 约定前后端交互接口 消息推送机制 匹配这样的功能,也是依赖消息推送机制的 玩家 1 点击开始匹配按钮,就会告诉服务器&#xff1…...

【数据分析】Matplotlib+Pandas+Seaborn绘图

【数据分析】MatplotlibPandasSeaborn绘图 (一)Matplotlib绘图1.1 matplotlib绘图方式1: 状态接口1.2 matplotlib绘图方式2: 面向对象1.3 通过安斯科姆数据集, 说明可视化的重要性1.4 MatPlotlib绘图-单变量-直方图1.5 MatPlotlib绘图-双变量-散点图1.6 …...

NLP学习路线图(十五):TF-IDF(词频-逆文档频率)

在自然语言处理(NLP)的浩瀚宇宙中,TF-IDF(词频-逆文档频率) 犹如一颗恒星,虽古老却依然璀璨。当ChatGPT、BERT等大模型光芒四射时,TF-IDF作为传统方法的代表,其简洁性、高效性与可解…...