代码干燥计划
首页
  • CSS使用中文字体
  • CSS文本溢出省略号
  • animation
  • background
  • flex
  • 相关文章
  • CSS权威指南
  • CSS通用化

    • 通用变量
  • Sass-SCSS
Git
  • Geolocation
  • IntersectionObserver
  • canvas
  • iframe子页面与父页面通信
  • video
  • 前端下载
  • 相关文章
  • 移动端屏幕适配
  • http 文章
  • 数据安全
  • 缓存实践
  • JS文件上传原生写法
  • axios 使用教程
  • polyfill 解决方案
  • 前端文件处理API
  • 相关文章
  • BOM

    • Geolocation
    • IntersectionObserver
    • MediaRecorder
    • file api
    • navigator.mediaDevices.getUserMedia
  • DOM

    • 一系列DOM方法
    • 宽高和滚动
  • ES6
  • JS_API
  • JavaScript 高级程序设计
  • jsdoc
  • questions
Node
  • React 教程
  • React-Router
  • React-hooks
  • create-react-app
  • TS_类型
  • TS声明文件d.ts
  • ts_function
  • ts_interface
  • ts_内置对象
  • ts_泛型(Generics)
  • ts_符号、关键字和类型工具
  • ts_类(class)
  • tsconfig.json
  • tsconfig
  • 相关文章
Vue
  • SplitChunksPlugin
  • compression-webpack-plugin
  • css-loader-plugins
  • html-webpack-plugin
  • image-webpack-loader
  • require.context
  • stylelint
  • terser-webpack-plugin
  • webpack Configuration
  • webpack 多页应用配置
  • webpack-bundle-analyzer
  • webpack-chain
  • webpack-dev-server
  • webpack.IgnorePlugin
  • webpack_plugins
  • ENV文件高亮配置
  • VS Code Keyboard Shotcuts
  • VS Code plugins
  • VS Code 配置文件变量(setting.json)
  • VS Code 配置自动补全路径别名 @
  • VSCode 使用 Volar 接管模式代替 TS Plugin
  • glob 模式
  • vscode push with publickey
  • 关于 jsonfig.json
  • 移动端项目增加屏幕适配
  • babel

    • babel-7
    • babel-plugin-transform-remove-console
    • babel
  • browserslist

    • README.md
  • editorConfig
  • eslint
  • debugger
  • 业余网站
  • 好文收集
  • markdown
  • 前后端对接
后端
  • 本地开发时通过 fiddler 4 调试微信 jssdk
  • 组件样式穿透和隔离问题
  • linux
  • windows

    • windows 10 开机自启动管理
    • windows 好用的快捷键
    • windows 良心软件
GitHub (opens new window)
首页
  • CSS使用中文字体
  • CSS文本溢出省略号
  • animation
  • background
  • flex
  • 相关文章
  • CSS权威指南
  • CSS通用化

    • 通用变量
  • Sass-SCSS
Git
  • Geolocation
  • IntersectionObserver
  • canvas
  • iframe子页面与父页面通信
  • video
  • 前端下载
  • 相关文章
  • 移动端屏幕适配
  • http 文章
  • 数据安全
  • 缓存实践
  • JS文件上传原生写法
  • axios 使用教程
  • polyfill 解决方案
  • 前端文件处理API
  • 相关文章
  • BOM

    • Geolocation
    • IntersectionObserver
    • MediaRecorder
    • file api
    • navigator.mediaDevices.getUserMedia
  • DOM

    • 一系列DOM方法
    • 宽高和滚动
  • ES6
  • JS_API
  • JavaScript 高级程序设计
  • jsdoc
  • questions
Node
  • React 教程
  • React-Router
  • React-hooks
  • create-react-app
  • TS_类型
  • TS声明文件d.ts
  • ts_function
  • ts_interface
  • ts_内置对象
  • ts_泛型(Generics)
  • ts_符号、关键字和类型工具
  • ts_类(class)
  • tsconfig.json
  • tsconfig
  • 相关文章
Vue
  • SplitChunksPlugin
  • compression-webpack-plugin
  • css-loader-plugins
  • html-webpack-plugin
  • image-webpack-loader
  • require.context
  • stylelint
  • terser-webpack-plugin
  • webpack Configuration
  • webpack 多页应用配置
  • webpack-bundle-analyzer
  • webpack-chain
  • webpack-dev-server
  • webpack.IgnorePlugin
  • webpack_plugins
  • ENV文件高亮配置
  • VS Code Keyboard Shotcuts
  • VS Code plugins
  • VS Code 配置文件变量(setting.json)
  • VS Code 配置自动补全路径别名 @
  • VSCode 使用 Volar 接管模式代替 TS Plugin
  • glob 模式
  • vscode push with publickey
  • 关于 jsonfig.json
  • 移动端项目增加屏幕适配
  • babel

    • babel-7
    • babel-plugin-transform-remove-console
    • babel
  • browserslist

    • README.md
  • editorConfig
  • eslint
  • debugger
  • 业余网站
  • 好文收集
  • markdown
  • 前后端对接
后端
  • 本地开发时通过 fiddler 4 调试微信 jssdk
  • 组件样式穿透和隔离问题
  • linux
  • windows

    • windows 10 开机自启动管理
    • windows 好用的快捷键
    • windows 良心软件
GitHub (opens new window)
  • Sass-SCSS

    • 说明
      • 相关资源
    • Sass 基本介绍
      • 注释(Comments)
        • 单行注释(Single-line comments)
        • 多行注释(Multi-line comments)
        • SassDoc
      • 特殊的函数(Special Functions)
        • url()
        • calc() 和 element()
        • progid:...() 和 expression() 弃用
        • min() 和 max()
      • 变量
        • 默认值
      • 插值(Interpolation)
      • @语句(At-Rules)
        • @mixin and @include
        • @at-root
    • Sass 调试
      • @error
      • @warn
      • @debug
    • Sass 中的数据类型(值类型)
      • Number
        • 单位
        • 精度(Precision)
      • String
        • 转义(Escapes)
        • 带引号的 string
        • 不带引号的字符串
        • 字符串的索引
      • Color
      • List
        • 索引
        • 访问某个元素
        • 遍历列表
        • 追加元素
        • 查找元素的索引
        • 列表的不可变性(Immutability)
        • 参数列表
      • Map
        • 访问 map 的值
        • 遍历 map
        • 修改 map
        • 合并 map
        • 不可变性
      • Function
      • Boolean
        • 使用布尔值
        • Truthy 和 Falsy
      • null
    • Sass中的运算操作符
      • 操作符优先级
      • 相等运算符
        • 比较运算符
        • 数学运算符
        • +, -, / 用于字符串
      • Boolean 操作符
        • Truthy 和 Falsy
    • Sass中的流程控制
      • @if
      • @for
      • @each
        • 遍历 map
        • 解构 list 中的 list
      • @while
    • Sass 中的函数 @function
      • 默认参数
      • 关键词参数
      • 接收任意参数
      • 接收带关键词的任意参数
      • 传递任意参数
      • 纯 css 函数
    • Sass中的样式规则
      • 选择器
      • 父选择器 & (Parent Selector)
        • 添加后缀
        • In SassScript
      • 占位符选择器(Placeholder Selectors)
      • 样式属性
        • 自定义属性(Custom Properties)
    • Sass的样式继承 @extend
      • 仅用于被继承的占位选择器
      • 可选继承
      • @extend 和 @mixin
      • @extend 的限制
    • Sass支持CSS的 @ 语句
    • Sass的模块化
      • @use
        • 使用成员
        • 自定义命名空间名称
        • 去除命名空间
        • 私有成员
        • 引入时的配置
        • 使用 mixin
        • 查找模块
      • @forward
        • 转发时添加前缀
        • 控制成员可见性
        • 转发时配置模块的成员
      • @import
        • 嵌套的 @import
        • 在 sass 中导入 css 并编译
        • 纯 css 导入语句(不编译)
        • @import 中使用插值
        • @import 与模块
        • 只供 @import 使用的文件(Import-Only Files)
        • 使用 @import 导入时配置模块成员
    • Sass编译方式及工程化使用
      • Sass 命令行编译
        • 基本编译命令
        • 命令行选项

# 说明

本文档为 SCSS 官方文档 (opens new window) 翻译整理版本。

# 相关资源

  • Sass 风格指南 (opens new window)
  • 知乎专栏@Jim Yuan:Sass 内建函数用法一览 (opens new window)
在 GitHub 上编辑此页 (opens new window)

Sass 基本介绍 →