CSS(四）一篇搞定Sass

最新推荐文章于 2026-03-25 11:46:14 发布
原创 最新推荐文章于 2026-03-25 11:46:14 发布 · 544 阅读 · 10 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#css #sass #前端

目录

一、Sass

1.1什么是Sass

1.2编译Sass

1.3变量

1.4嵌套

1.5导入Sass文件

1.6注释

1.7混合

1.8选择器继承

1.9运算

1.10控制指令

一、Sass

前情提要：先学习我的上一篇less，看这篇就很简单了。

1.1什么是Sass

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。

1.2编译Sass

安装Sass npn install sass

编译 

测试：还多一个map文件 这个插件编译要点一个下面的watch sass

1.3变量

sass使用$符号来标识变量

1.4嵌套

有如下的html：

在scss中也可以使用嵌套

1.5导入Sass文件

定义reset.sass

@import导入

1.6注释

1.7混合

1.8选择器继承

1.9运算

1.10控制指令

Sass 基础教程——安装
老梁的专栏
10-18 3381
Sass 是一种 CSS 的扩展语言，也是一种脚本语言，需要转换成 CSS 才能在浏览器中使用。同时，Sass 还是一个预处理器（preprocessor），用于完成 Sass 代码到 CSS 代码的准换。所以，当我们谈论 Sass 时，除了指代它作为一门脚本语言的语法，还包括预处理器的概念。作为预处理器，它的安装方式有很多种，下面我们以目前最流行的 Dart Sass 为例，逐一介绍。
CSS进阶之Sass
每个人都是独一无二的，把握好自己的节奏，跟着自己的心走。
05-06 1306
文章目录前言导航一、基本使用二、变量设置三、嵌套、拆分文件与引入四、@mixin与@include配合使用五、媒体查询与Mixin的使用 前言 本篇博客是关于CSS的进阶语法Sass，若文章中出现相关问题，请指出！ 所有博客文件目录索引：博客目录索引(持续更新) 导航 Sass官网 vscode安装插件：Live Sass Compiler 启动： 一、基本使用 可使用scss或sass文件来进行编写，一般使用scss因为其使用的{}来进行分层。 借助vscode插件来进行实时编译！通过{}分层形式可以达到
SASS和CSS
2201_75624160的博客
12-27 960
SASS 兼容CSS Sass完全兼容所有版本的CSS。我们对此严格把控，所以你可以无缝地使用任何可用的CSS库。 特性丰富 Sass拥有比其他任何CSS扩展语言更多的功能和特性。Sass核心团队不懈努力，一直使其保持领先地位。 成熟 Sass已经经过其核心团队超过13年的精心打造。 行业认可 一次又一次地，行业把Sass作为首选CSS扩展语言。 社区庞大 数家科技企业和成百上千名开发者为Sass提供支持。 SASS与CSS的区别 框架 有无数的框架使
SCSS、CSS 和 SASS 之间的联系与区别
最新发布
BDawn的专栏
03-25 465
CSS是基础的样式语言，而SASS和SCSS是其预处理器，最终编译为CSS。SASS采用缩进语法（.sass文件），简洁但学习成本高；SCSS（.scss文件）兼容CSS语法，使用大括号和分号，更易上手。两者功能相同（变量、嵌套、混合等），但SCSS更主流。建议项目中使用SCSS，因其语法友好、社区支持完善且迁移成本低。安装sass和sass-loader即可在项目中启用SCSS功能。
CSS进阶---SASS用法
m0_52173534的博客
11-08 1878
「这是我参与11月更文挑战的第2天，活动详情查看：2021最后一次更文挑战」。 一、了解SASS sass是css的另一种写法，是对css添加了规则，封装了方法，让css代码变得更有复用性，结构更加清晰，也更便于维护 二、安装SASS 2.1首先前提是安装了npm，可以直接在项目中终端输入npm i sass安装sass就可以了 $ npm i sass 2.2 或者使用window+R，打开cmd，在里面输入也是可以 三、 如何使用SASS SASS的使用过程 3.1 创建 首先创建一个.sa.
光速掌握-CSS预处理器SASS从入门到高级
可可的博客
08-11 986
Sass (英文全称：Syntactically Awesome Stylesheets) 是一个最初由 Hampton Catlin设计并由 Natalie Weizenbaum 开发的层叠样式表语言， Sass 是一个 CSS 预处理器。Sass 是 CSS扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。Sass 完全兼容所有版本的 CSS。为什么使用 Sass?CSS 本身语法不够强大，导致重复编写一些代码，无法实现复用，而且在代码也不方便维护。......
CSS预编译器——Sass 从入门到熟练使用
10-25 676
Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库有助于更好地组织管理样式文件，以及更高效地开发项目。
sass笔记-1|Sass是如何帮你又快又好地搞定CSS的
Stinson
11-29 478
Sass学习笔记持续整理中，开篇不讲怎么安装，sass是什么，这些搜索引擎会告诉你，我们从sass的作用开始讲起，知道sass用来干什么，有什么作用，我们才能相信用sass的好处，并且时时刻刻想着sass的设计思维——Don’t Repeat Yourself。这一篇将阐述Sass如何利用变量、选择器嵌套、混合器和选择器继承来帮我们又快又好地搞定CSS。
Vue 开发者必看：3 步搞定 dart-sass 替换 node-sass（告别编译慢 +
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
12-12 833
全文 6000+ 字，代码 20+ 段，踩坑 10+ 个，咖啡 2 杯。node-sass 的坑，我替你们先跳了；dart-sass 的爽，也替你们先体验了。结论：迁移成本 ≈ 0，收益 > 100%，早换早超生。现在，轮到你把这 3 步复制粘贴，去跟编译慢、环境炸说分手了。祝你构建绿条常亮，node_modules 永不膨胀，我们下一个技术债再见。欢迎来到我的博客，很高兴能够在这里和您见面！
sass的使用
李卓书
05-29 223
环境 sass在vscode里使用 步骤 1.百度sass，然后进入官网，你会看到一个很不错的官网；可以借鉴下它的安装步骤 但是不要全部照搬；因为它的镜像貌似有问题，淘宝的好像已经挂了 2.下面是我的步骤： 1 先安装ruby，按照官网上的安装就行了 2 打开cmd # ruby -v 查看安装是否搞定 3 换gem源，不要换官网的，没用 # gem sources --remove https:...
css预处理器之sass（scss）
luemeon的博客
11-29 2481
mixin中插值不能作为赋值语句的值部分，只能用做属性名定义或者选择器构建时@include中不能使用插值。通过 @extend 调用的占位符，编译出来的代码会将相同的代码合并在一起.1、类似 CSS 的注释方式，使用 ”/* ”开头，结属使用 ”*/ ”%声明的代码，如果不被 @extend 调用的话，不会产生任何代码。在除法运算时，如果两个值带有相同的单位值时，除法运算之后会得到一个。比如在不同的地方调用一个相同的混合宏时，不能将两个。2、类似 JS的注释方式，使用“//” 两者区别，
CSS、Sass、Scss，以及sass和scss的区别
qq_43482288的博客
09-27 2049
1、描述 CSS 指层叠样式表 (Cascading Style Sheets) Sass (Syntactically Awesome StyleSheets)，是由buby语言编写的一款css预处理语言，和html一样有严格的缩进风格，和css编写规范有着很大的出入，是不使用花括号和分号的，所以不被广为接受。 Sass 是一款强化 CSS 的辅助工具，是对 CSS 的扩展，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、继承.
CSS预处理器（SASS）
m0_61619549的博客
07-07 1603
1.什么是sassSass是一种CSS预处理器，用于增强CSS的功能和灵活性。它扩展了CSS，并引入了许多有用的功能，如变量、嵌套、混合、继承以及模块化的结构。
常用css预编译器(scss和less)，不用30分钟，一看就会！
sq91fra的博客
04-07 3137
Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。
CSS 预处理器 Sass
2301_82023822的博客
05-03 2029
存储颜色、尺寸、字体等重复使用的值。
Sass学习笔记 — 3. 深入学习
jiangbo110119的博客
01-30 1911
Sass (Syntactically Awesome StyleSheets) Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass
CSS-sass
软工二班秦同学的博客
03-30 318
sass
【Css】Less和Sass的区别:
SunPeng的博客
09-01 2534
【Css】Less和Sass的区别:
CSS-预编译器-Sass
qq_57404736的博客
05-20 1181
sass的常用写法，以及内置的函数使用方法
CSS详解：Sass、Scss、Css、Postcss的关系
andy_68147772的博客
11-28 1708
SCSS（Sassy CSS）是SASS（Syntactically Awesome Stylesheets）的一个版本，它使用类似于CSS的语法，但增加了许多有用的特性，如变量、嵌套规则、混合（mixins）、函数、条件语句和循环等。总结来说，SASS和SCSS都是CSS的扩展，它们提供了更强大的编程特性，以便更高效地编写样式。（Sassy CSS）都是CSS预处理器，它们允许开发者使用更加动态和富有表现力的语法来编写样式表，然后再将其编译成普通的CSS，以便在网页中使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值