前端-css(预编译器sass)

1.sass(scss->sass第三代)

Sass3 -> Scss(Sassy CSS),SCSS(Sassy CSS) 是 CSS 语法的扩展.

2.scss注释

Sass 支持标准的 CSS 多行注释 /* */,以及单行注释 //,前者会 被完整输出到编译后的 CSS 文件中,而后者则不会

3.scss定义变量

Variables: $

全局变量与局部变量

关于scss变量类型,我们看官网给的:

4.scss引入

5.混合指令 (Mixin Directives)

定义混合指令 @mixin和 引用混合样式 @include:

传参方式:

还可以了解一下一下官网提及的情况:

有时,不能确定混合指令需要使用多少个参数,比如一个关于 box-shadow 的混合指令不能确定有多少个 'shadow' 会被用到。这时,可以使用参数变量 ... 声明(写在参数的最后方)告诉 Sass 将这些参数视为值列表处理:

6.scss继承@extend

7.对比混合指令和继承

混合模式下产生的代码冗余比较多.

@mixin@include 更侧重于定义和复用一组样式,而 @extend 更侧重于样式的继承和扩展。

@mixin@include 的优点包括:

  • 可以传递参数,实现更复杂的样式定制。
  • 对于不相关的样式组合,更具组织性和可读性。

@extend 的优点包括:

  • 减少代码重复,尤其是在类之间有相似样式时。
  • 更直观地表达样式之间的继承关系。

8.scss运算符基本使用

这里自己参考一下文档就行了哈

Sass教程 Sass中文文档 | Sass中文网

9.scss函数

①color:

//颜色变亮lighten(color,amount(0-100%))

//颜色变暗darken(color,amount(0-100%))

//降低透明度opacify(color,amount(0-1))

10.scss@use和@forward

高级版@import和export

相关推荐
Moment1 分钟前
富文本编辑器技术选型,到底是 Prosemirror 还是 Tiptap 好 ❓❓❓
前端·javascript·面试
xkxnq6 分钟前
第二阶段:Vue 组件化开发(第 18天)
前端·javascript·vue.js
晓得迷路了7 分钟前
栗子前端技术周刊第 112 期 - Rspack 1.7、2025 JS 新星榜单、HTML 状态调查...
前端·javascript·html
怕浪猫10 分钟前
React从入门到出门 第五章 React Router 配置与原理初探
前端·javascript·react.js
jinmo_C++10 分钟前
从零开始学前端 · HTML 基础篇(一):认识 HTML 与页面结构
前端·html·状态模式
鹏多多17 分钟前
前端2025年终总结:借着AI做大做强再创辉煌
前端·javascript
小Tomkk25 分钟前
⭐️ StarRocks Web 使用介绍与实战指南
前端·ffmpeg
不一样的少年_29 分钟前
产品催: 1 天优化 Vue 官网 SEO?我用这个插件半天搞定(不重构 Nuxt)
前端·javascript·vue.js
-dcr31 分钟前
50.智能体
前端·javascript·人工智能·ai·easyui
行者9640 分钟前
Flutter跨平台开发适配OpenHarmony:进度条组件的深度实践
开发语言·前端·flutter·harmonyos·鸿蒙