feat: add sass.md cheatsheet.

2022-10-21 17:36:31 +08:00 · 2022-10-21 17:36:31 +08:00 · 9774884614
commit 9774884614
parent c357f95bf0
3 changed files with 618 additions and 0 deletions
--- a/README.md
+++ b/README.md
@ -35,6 +35,7 @@ Quick Reference
 [Emmet](./docs/emmet.md)<!--rehype:style=background: rgb(122 203 23/var(\-\-bg\-opacity));-->
 [Styled Components](./docs/styled-components.md)<!--rehype:style=background: rgb(221 60 184/var(\-\-bg\-opacity));-->
 [Stylus](./docs/stylus.md)<!--rehype:style=background: rgb(109 161 63/var(\-\-bg\-opacity));-->
+[Sass](./docs/sass.md)<!--rehype:style=background: rgb(207 100 154/var(\-\-bg\-opacity));-->
 [HTML](./docs/html.md)<!--rehype:style=background: rgb(228 77 39/var(\-\-bg\-opacity));-->
 [JavaScript](./docs/javascript.md)<!--rehype:style=background: rgb(203 183 31/var(\-\-bg\-opacity));-->
 [Jest](./docs/jest.md)<!--rehype:style=background: rgb(153 66 91/var(\-\-bg\-opacity));-->
--- a/docs/sass.md
+++ b/docs/sass.md
@ -0,0 +1,614 @@
+Sass
+===
+
+这是一份快速参考备忘单，列出了 [SASS](https://sass-lang.com) 最有用的功能。
+
+Sass 基础
+--------
+
+### 介绍
+<!--rehype:wrap-class=row-span-2-->
+
+- [Sass 官方文档](https://sass-lang.com/documentation) _(sass-lang.com)_
+- [Sass 中文文档](https://www.sass.hk/docs/) _(sass.h)_
+
+Sass 是一种 CSS 的预编译语言
+
+```bash
+$ npm install -g sass
+```
+
+在 Node.js 环境中使用 Sass
+
+```bash
+$ sass source/index.scss build/index.css
+$ sass --watch input.scss output.css
+$ sass --watch app/sass:public/css
+```
+
+### 变量
+
+```scss
+$defaultLinkColor: #46EAC2;
+a {
+  color: $defaultLinkColor;
+}
+```
+
+### 字符串插值
+
+```scss
+$wk: -webkit-;
+.rounded-box {
+  #{$wk}border-radius: 4px;
+}
+```
+
+### 注释
+
+```scss
+/*
+ 这是多行注释
+ 块注释
+ 块注释
+*/
+// 这是一条单行注释
+```
+
+### Extend
+
+```scss
+.button {
+  ···
+}
+.push-button {
+  @extend .button;
+}
+```
+
+### 嵌套(Nesting)
+<!--rehype:wrap-class=row-span-2-->
+
+```scss
+nav {
+  ul {
+    padding: 0;
+    list-style: none;
+  }
+  li { display: inline-block; }
+  a {
+    display: block;
+  }
+}
+```
+
+编译 css 为：
+
+```scss
+nav ul {
+  padding: 0;
+  list-style: none;
+}
+nav li {
+  display: inline-block;
+}
+nav a {
+  display: block;
+}
+```
+
+### 模块（片段）
+<!--rehype:wrap-class=row-span-2-->
+
+```scss
+// _base.scss
+$font-stack:    Helvetica, sans-serif;
+$primary-color: #333;
+```
+
+注意以下划线开头的 Sass 文件
+
+```scss
+// styles.scss
+@use 'base';
+
+.inverse {
+  background-color: base.$primary-color;
+  color: white;
+}
+```
+
+编译 css 为：
+
+```css
+.inverse {
+  background-color: #333;
+  color: white;
+}
+```
+
+### 混合(Mixins)
+
+```scss
+@mixin heading-font {
+    font-family: sans-serif;
+    font-weight: bold;
+}
+h1 {
+    @include heading-font;
+}
+```
+
+查看: [混合(Mixins)](#sass-混合mixins)
+
+### @import
+
+```scss
+@import './other_sass_file';
+@import '/code', 'lists';
+// 纯 CSS @imports
+@import "theme.css";
+@import url(theme);
+```
+
+`.sass` 或 `.sass` 扩展名是可选的。
+
+Sass 混合(Mixins)
+------
+
+
+### 参数
+
+```scss
+@mixin font-size($n) {
+  font-size: $n * 1.2em;
+}
+```
+
+----
+
+```scss
+body {
+  @include font-size(2);
+}
+```
+
+### 默认值
+
+```scss
+@mixin pad($n: 10px) {
+    padding: $n;
+}
+```
+
+----
+
+```scss
+body {
+    @include pad(15px);
+}
+```
+
+### 默认变量
+
+```scss
+$default-padding: 10px;
+@mixin pad($n: $default-padding) {
+  padding: $n;
+}
+body {
+  @include pad(15px);
+}
+```
+
+Sass 颜色函数
+--------
+<!--rehype:body-class=cols-2-->
+
+### rgba
+
+```scss
+rgb(100, 120, 140)
+rgba(100, 120, 140, .5)
+rgba($color, .5)
+```
+
+### Mixing
+
+```scss
+mix($a, $b, 10%)   // 10% a, 90% b
+```
+
+### 修改 HSLA
+
+```scss
+darken($color, 5%)
+lighten($color, 5%)
+```
+
+```scss
+saturate($color, 5%)
+desaturate($color, 5%)
+grayscale($color)
+```
+
+```scss
+adjust-hue($color, 15deg)
+complement($color)    // like adjust-hue(_, 180deg)
+invert($color)
+```
+
+```scss
+fade-in($color, .5)   // aka opacify()
+fade-out($color, .5)  // aka transparentize()
+rgba($color, .5)      // sets alpha to .5
+```
+
+### 获取值
+<!--rehype:wrap-class=row-span-2-->
+
+#### HSLA
+
+```scss
+hue($color)         // 0deg..360deg
+saturation($color)  // 0%..100%
+lightness($color)   // 0%..100%
+alpha($color)       // 0..1 (aka opacity())
+```
+
+#### RGB
+
+```scss
+red($color)         // 0..255
+green($color)
+blue($color)
+```
+
+---
+
+:- | :-
+:- | :-
+`color.red()` | 用于获取颜色的红色通道
+`color.green()` | 用于获得颜色的绿色通道
+`color.blue()` | 用于获取颜色的蓝色通道
+`color.hue()` | 以获得颜色的色调
+`color.saturation()` | 用于获得颜色的饱和度
+`color.lightness()` | 以获得颜色的亮度
+
+另见: [hue()](http://sass-lang.com/documentation/Sass/Script/Functions.html#hue-instance_method), [red()](http://sass-lang.com/documentation/Sass/Script/Functions.html#red-instance_method)
+
+### Sass 内置了对颜色值的支持
+
+```scss
+@debug rgb(204, 102, 153);  // #c69
+@debug rgba(107, 113, 127, 0.8); // rgba(107, 113, 127, 0.8)
+@debug hsl(228, 7%, 86%);        // #dadbdf
+@debug hsla(20, 20%, 85%, 0.7);  // rgb(225, 215, 210, 0.7)
+```
+
+### 调整
+
+```scss
+// 固定金额变动
+adjust-color($color, $blue: 5)
+adjust-color($color, $lightness: -30%) // darken(_, 30%)
+adjust-color($color, $alpha: -0.4)     // fade-out(_, .4)
+adjust-color($color, $hue: 30deg)      // adjust-hue(_, 15deg)
+// 通过百分比变化
+scale-color($color, $lightness: 50%)
+// 完全改变一个属性
+change-color($color, $hue: 180deg)
+change-color($color, $blue: 250)
+```
+
+支持的: `$red`, `$green`, `$blue`, `$hue`, `$saturation`, `$lightness`, `$alpha`
+
+Sass 其他函数
+--------
+
+### 字符串
+<!--rehype:wrap-class=row-span-2-->
+
+```scss
+unquote('hello')
+quote(bold); // "bold"
+```
+
+```scss
+to-upper-case(hello)
+to-lower-case(hello)
+```
+
+----
+
+```scss
+str-length(hello world)
+// "ello" - 它是从 1 开始的，而不是从 0 开始的
+str-slice(hello, 2, 5)
+str-insert("abcd", "X", 1) // "Xabcd"
+```
+
+### Numbers
+<!--rehype:wrap-class=row-span-2-->
+
+```scss
+floor(4.2)  // 4
+ceil(4.2)   // 5
+round(4.2)  // 4
+abs(-10px) // 10px
+```
+
+----
+
+```scss
+min(1px, 4px)  // 1px
+$widths: 50px, 30px, 100px
+@debug math.min($widths...)  // 30px
+```
+
+----
+
+```scss
+percentage(.5)   // 50%
+random(3)        // 0..3
+```
+
+### Units
+
+```scss
+unit(3em)        // 'em'
+unitless(100px)  // false
+```
+
+### Units
+
+```scss
+unit(3em)        // 'em'
+unitless(100px)  // false
+```
+
+### Misc
+
+```scss
+// 检查 $red
+variable-exists(red)
+// 检查@mixin red-text
+mixin-exists(red-text)
+function-exists(redify)
+```
+
+----
+
+```scss
+global-variable-exists(red)
+```
+
+----
+
+```scss
+// .menu li a
+selector-append('.menu', 'li', 'a')
+// .menu:hover li
+selector-nest('.menu', '&:hover li')
+selector-extend(...)
+selector-parse(...)
+selector-replace(...)
+selector-unify(...)
+```
+
+Sass 功能检查
+--------
+<!--rehype:body-class=cols-2-->
+
+### 功能检查
+
+```scss
+meta.feature-exists($feature)
+feature-exists($feature) //=> boolean
+```
+
+----
+
+```scss
+@mixin debug-content-exists {
+  @debug meta.content-exists();
+  @content;
+}
+
+@include debug-content-exists; // false
+@include debug-content-exists { // true
+  // Content!
+}
+```
+
+### 功能
+
+:- | :-
+:- | :-
+`global-variable-shadowing` [#](https://sass-lang.com/documentation/modules/meta#feature-exists) | 这意味着局部变量将隐藏全局变量，除非它具有 `!global` 标志
+`extend-selector-pseudoclass` [#](https://sass-lang.com/documentation/modules/meta#feature-exists) | 这意味着 `@extend` 规则将影响嵌套在伪类中的选择器，如 `:not()`
+`units-level-3` [#](https://sass-lang.com/documentation/modules/meta#feature-exists) | 这意味着单位算术支持在 CSS 值和单位级别 3 中定义的单位
+`at-error` [#](https://sass-lang.com/documentation/modules/meta#feature-exists) | 这意味着支持 `@error` 规则
+`custom-property` [#](https://sass-lang.com/documentation/modules/meta#feature-exists) | 这意味着自定义属性声明值不支持除插值之外的任何表达式
+<!--rehype:className=style-list-arrow-->
+
+Sass 循环
+--------
+
+### For 循环
+
+```scss
+$base-color: #036;
+
+@for $i from 1 through 3 {
+  ul:nth-child(3n + #{$i}) {
+    background-color: lighten($base-color, $i * 5%);
+  }
+}
+```
+
+编译 css 为：
+
+```css
+ul:nth-child(3n + 1) {
+  background-color: #004080;
+}
+
+ul:nth-child(3n + 2) {
+  background-color: #004d99;
+}
+
+ul:nth-child(3n + 3) {
+  background-color: #0059b3;
+}
+```
+
+### Each 循环（简单）
+
+```scss
+$sizes: 40px, 50px;
+
+@each $size in $sizes {
+  .icon-#{$size} {
+    font-size: $size;
+    height: $size;
+  }
+}
+```
+
+编译 css 为：
+
+```css
+.icon-40px {
+  font-size: 40px;
+  height: 40px;
+}
+
+.icon-50px {
+  font-size: 50px;
+  height: 50px;
+}
+```
+
+### Each 循环（嵌套）
+
+```scss
+$icons: ("eye": "\f112", "start": "\f12e");
+
+@each $name, $glyph in $icons {
+  .icon-#{$name}:before {
+    display: inline-block;
+    font-family: "Icon Font";
+    content: $glyph;
+  }
+}
+```
+
+编译 css 为：
+
+```css
+.icon-eye:before {
+  display: inline-block;
+  font-family: "Icon Font";
+  content: "";
+}
+.icon-start:before {
+  display: inline-block;
+  font-family: "Icon Font";
+  content: "";
+}
+```
+
+### While 循环
+<!--rehype:wrap-class=col-span-2-->
+
+```scss
+@use "sass:math";
+
+/// 将 `$value` 除以 `$ratio` 直到它低于 `$base`
+@function scale-below($value, $base, $ratio: 1.618) {
+  @while $value > $base {
+    $value: math.div($value, $ratio);
+  }
+  @return $value;
+}
+
+$normal-font-size: 16px;
+sup {
+  font-size: scale-below(20px, 16px);
+}
+```
+
+编译 css 为：
+
+```css
+sup {
+  font-size: 12.36094px;
+}
+```
+
+Sass 其它功能
+--------
+
+### 条件句
+<!--rehype:wrap-class=row-span-2-->
+
+```scss
+@mixin avatar($size, $circle: false) {
+  width: $size;
+  height: $size;
+
+  @if $circle {
+    border-radius: $size / 2;
+  }
+}
+
+.square-av {
+  @include avatar(100px, $circle: false);
+}
+.circle-av {
+  @include avatar(100px, $circle: true);
+}
+```
+
+编译 css 为：
+
+```css
+.square-av {
+  width: 100px;
+  height: 100px;
+}
+
+.circle-av {
+  width: 100px;
+  height: 100px;
+  border-radius: 50px;
+}
+```
+
+### 插值
+
+```scss
+.#{$klass} { ... }      // Class
+call($function-name)    // Functions
+@media #{$tablet}
+font: #{$size}/#{$line-height}
+url("#{$background}.jpg")
+```
+
+### 列表
+
+```scss
+$list: (a b c);
+nth($list, 1)  // starts with 1
+length($list)
+@each $item in $list { ... }
+```
+
+### Maps
+<!--rehype:wrap-class=col-span-2-->
+
+```scss
+$map: (key1: value1, key2: value2, key3: value3);
+map-get($map, key1)
+```
--- a/scripts/assets/sass.svg
+++ b/scripts/assets/sass.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 64 64" height="1em" width="1em">
+  <path d="M55.094 35.56a13.19 13.19 0 0 0-5.8 1.35c-.6-1.188-1.2-2.225-1.3-3-.113-.9-.25-1.45-.113-2.525s.763-2.6.763-2.725c-.012-.113-.138-.663-1.425-.675s-2.4.25-2.525.588a14.36 14.36 0 0 0-.538 1.913c-.225 1.175-2.575 5.338-3.913 7.526-.438-.85-.813-1.6-.888-2.2-.113-.9-.25-1.45-.113-2.525s.763-2.6.763-2.725c-.012-.113-.138-.663-1.425-.675s-2.4.25-2.525.588-.263 1.138-.538 1.913c-.263.775-3.388 7.726-4.2 9.538-.413.925-.775 1.663-1.038 2.163s-.012.038-.037.088l-.35.663v.012c-.175.313-.363.613-.45.613-.062 0-.188-.838.025-1.988.463-2.413 1.588-6.176 1.575-6.313 0-.062.213-.725-.725-1.063-.913-.338-1.238.225-1.313.225s-.138.2-.138.2 1.013-4.238-1.938-4.238c-1.85 0-4.4 2.013-5.663 3.85l-6.376 3.488-.138-.15C11.178 35.66 4.565 32.96 4.84 27.835c.1-1.863.75-6.776 12.7-12.726 9.788-4.875 17.627-3.538 18.99-.563 1.938 4.25-4.188 12.15-14.364 13.29-3.875.438-5.913-1.063-6.426-1.625-.538-.588-.613-.613-.813-.5-.325.175-.125.7 0 1.013.3.788 1.55 2.188 3.675 2.888 1.863.613 6.413.95 11.914-1.175 6.163-2.388 10.976-9.013 9.563-14.55-1.438-5.638-10.788-7.488-19.627-4.35C15.19 11.41 9.5 14.334 5.4 18.172.515 22.722-.26 26.698.064 28.348c1.138 5.888 9.25 9.726 12.5 12.564l-.45.25c-1.625.8-7.813 4.038-9.363 7.463-1.75 3.875.275 6.663 1.625 7.038 4.175 1.163 8.45-.925 10.763-4.363 2.3-3.438 2.025-7.9.963-9.938l-.038-.075 1.275-.75a74.573 74.573 0 0 1 2.35-1.325c-.4 1.088-.688 2.375-.838 4.25-.175 2.2.725 5.05 1.913 6.176.525.488 1.15.5 1.538.5 1.375 0 2-1.138 2.688-2.5.85-1.663 1.6-3.588 1.6-3.588s-.938 5.213 1.625 5.213c.938 0 1.875-1.213 2.3-1.838v.012s.025-.038.075-.125c.1-.15.15-.238.15-.238v-.025c.375-.65 1.213-2.138 2.463-4.6 1.613-3.175 3.163-7.15 3.163-7.15s.15.975.613 2.575c.275.95.875 1.988 1.338 3l-.6.825.012.013a35.62 35.62 0 0 1-.988 1.25c-1.275 1.525-2.8 3.263-3 3.763-.238.588-.188 1.025.275 1.375.338.25.938.3 1.575.25 1.15-.075 1.95-.363 2.35-.538a8.14 8.14 0 0 0 2.025-1.063c1.25-.925 2.013-2.238 1.938-3.988-.038-.963-.35-1.913-.738-2.813l.338-.5c1.975-2.888 3.5-6.063 3.5-6.063s.15.975.613 2.575c.238.813.713 1.7 1.138 2.575-1.85 1.513-3.013 3.263-3.413 4.413-.738 2.125-.163 3.088.925 3.313.488.1 1.188-.125 1.713-.35a7.76 7.76 0 0 0 2.163-1.113c1.25-.925 2.45-2.213 2.388-3.95-.038-.8-.25-1.588-.538-2.338 1.575-.65 3.613-1.025 6.2-.713 5.563.65 6.663 4.125 6.45 5.575s-1.375 2.25-1.763 2.5c-.388.238-.513.325-.475.5.05.263.225.25.563.2.463-.075 2.925-1.188 3.025-3.863.15-3.438-3.113-7.188-8.9-7.15zM12.19 50.025c-1.838 2.013-4.425 2.775-5.525 2.125-1.188-.688-.725-3.65 1.538-5.788 1.375-1.3 3.163-2.5 4.338-3.238l1.138-.688c.075-.05.125-.075.125-.075.088-.05.188-.113.288-.175.838 3.05.038 5.725-1.9 7.838zm13.44-9.138c-.638 1.563-1.988 5.575-2.8 5.35-.7-.188-1.125-3.225-.138-6.226.5-1.513 1.563-3.313 2.188-4.013 1.013-1.125 2.113-1.5 2.388-1.038.325.6-1.238 4.95-1.638 5.926zm11.088 5.3c-.275.138-.525.238-.638.163-.088-.05.113-.238.113-.238s1.388-1.488 1.938-2.175l1.088-1.388v.15c0 1.8-1.725 3-2.5 3.488zm8.55-1.95c-.2-.15-.175-.613.5-2.063.263-.575.863-1.538 1.9-2.45.125.375.2.738.188 1.075-.013 2.25-1.613 3.088-2.588 3.438z" />
+</svg>