2. 程式人生 > 其它 >【Sass/SCSS 完整自學中文版教程01】SCSS 官方英文文件翻譯整理

【Sass/SCSS 完整自學中文版教程01】SCSS 官方英文文件翻譯整理

阿新 • • 發佈：2021-09-17

Sass 基本介紹

目錄

如果對本文有任何問題，建議，或者在前端技術體系方面有任何問題，可以新增我的微信： drylint , 我會盡可能為你解答，也會拉你進入前端技術進階交流群，大家一起進步~

Sass 是 CSS 的超集，支援所有 css 語法，並在其基礎上擴充套件。

Sass 支援像 css 一樣的大括號語法，副檔名為 .scss ，以及另一種使用縮排的語法，副檔名為 .sass 。

教程主要採取完全相容 css 的 SCSS 語法。

註釋（Comments）

支援兩種註釋，分別是：

  • 單行註釋 // 註釋文字
  • 多行註釋 /* 註釋文字 */

單行註釋（Single-line comments）

編譯的時候會直接被忽略，不會編譯到 CSS 中，所以也叫做“隱式註釋”（silent comments）。

// 註釋內容

多行註釋（Multi-line comments）

編譯時會將註釋編譯到 css 中，所以也叫做“顯式註釋”（loud comment）

// 這一行註釋不會出現在編譯的 css 中

/* 這一行會出現在編譯的 css 中，除非是在壓縮模式下則不會 */

/* 註釋中還可以包含插值:
 * 1 + 1 = #{1 + 1} */

/*! 這行註釋即使在壓縮模式下也會編譯到 css 中 */

p /* 多行註釋可以寫在任何
   * 允許空白出現的地方 */ .sans {
  font-size: 16px;
}

編譯後的 css：

/* 這一行會出現在編譯的 css 中，除非是在壓縮模式下則不會 */

/* 註釋中還可以包含插值:
 * 1 + 1 = 2 */

/*! 這行註釋即使在壓縮模式下也會編譯到 css 中 */
p .sans {
  font-size: 16px;
}

SassDoc

文件註釋，類似於 jsdoc 。使用三斜線 /// 宣告。

/// Computes an exponent.
///
/// @param {number} $base
///   The number to multiply by itself.
/// @param {integer (unitless)} $exponent
///   The number of `$base`s to multiply together.
/// @return {number} `$base` to the power of `$exponent`.
@function pow($base, $exponent) {
  $result: 1;

  @for $_ from 1 through $exponent {
    $result: $result * $base;
  }

  @return $result;
}

特殊的函式（Special Functions）

  • url()
  • xxx

url()

url() 函式在CSS中很常用，但是它的語法與其他函式不同，它可以接受帶引號的 url ，也可以接受不帶引號的 url。因為未加引號的 URL 不是有效的 SassScript 表示式，所以 Sass 需要特殊的邏輯來解析它。

如果 url() 的引數是一個有效的無引號的 url ，Sass 會原樣解析它，當然，插值也是可以用的。

如果引數不是一個有效的無引用的 url ，例如，如果它包含變數或函式呼叫，它將被解析為普通的 CSS 函式呼叫。

$roboto-font-path: "../fonts/roboto";

@font-face {
  // This is parsed as a normal function call that takes a quoted string.
  src: url("#{$roboto-font-path}/Roboto-Thin.woff2") format("woff2");
}

@font-face {
  // This is parsed as a normal function call that takes an arithmetic
  // expression.
  src: url($roboto-font-path + "/Roboto-Light.woff2") format("woff2");
}

@font-face {
  // This is parsed as an interpolated special function.
  src: url(#{$roboto-font-path}/Roboto-Regular.woff2) format("woff2");
}

編譯後的 css ：

@font-face {
  src: url("../fonts/roboto/Roboto-Thin.woff2") format("woff2");
}

@font-face {
  src: url("../fonts/roboto/Roboto-Light.woff2") format("woff2");
}

@font-face {
  src: url(../fonts/roboto/Roboto-Regular.woff2) format("woff2");
}

calc() 和 element()

calc() 和 element() 函式是在 CSS 規範中定義的。因為 calc() 的數學表示式與 Sass 的演算法衝突，而 element() 的id可以被解析為顏色，所以它們需要特殊的解析。

Sass 允許任何文字出現在這些函式呼叫中，包括巢狀的圓括號。

除了可以使用插值來注入動態值會被編譯處理。其他任何東西都不會被解釋為 SassScript 表示式進行計算，而是原樣輸出。

progid:...() 和 expression() 棄用

expression() 和以 progid: 開頭的函式是使用非標準語法的 Internet Explorer 遺留特性。儘管最近的瀏覽器已經不再支援它們，但是 Sass 繼續解析它們以實現向後相容。

min() 和 max()

CSS在 CSS Values and Units Level 4 中增加了對 min() 和 max() 函式的支援，Safari 很快就採用了它們來支援 iPhoneX 。

但是 Sass 在很久以前就已經有了自己的 min() 和 max() 函式，為了向後相容所有現有的樣式表。這就需要額外的句法技巧來實現。

如果一個 min() 或 max() 函式呼叫是有效的純 CSS ，它將被編譯為普通的 CSS 的 min() 或 max() 函式呼叫。

"純CSS "包括巢狀呼叫 calc() ， env() ， var() ， min() ，或 max() ，以及插值。

但是，只要呼叫的時候包含了 SassScript 特性(如變數或函式呼叫)，它就會被認為是對 Sass 自帶的 min() 或 max() 函式的呼叫。

變數

在 Sass 中，宣告變數必須以 $ 開頭。

$red: #f00;

div {
  color: $red;
}

編譯後的 css ：

div {
  color: #f00;
}

Sass 變數和 css 變數的區別：

  • Sass 變數會被編譯成真實的值然後輸出為 css ，也就是僅僅存在於開發階段。

  • CSS 變數對於不同的元素可以有不同的值，但是 Sass 變數一次只有一個值。

  • Sass 變數是不可逆的，這意味著如果您使用了一個變數，然後在後面更改了它的值，那麼之前的使用將依然保持不變。CSS 變數是宣告性的，這意味著如果在後面更改了值，它將影響前面的使用和以後的使用。

注意：和所有的 Sass 識別符號一樣，Sass 變數將連字元 - 和下劃線 _ 視為相同的字元。這意味著 $font-size 和 $font_size 都指向同一個變數。這是 Sass 早期的歷史遺留，當時它只允許在識別符號名稱中使用下劃線。後來， Sass 增加了對連字元的支援，以匹配 CSS 的語法，sass 將這兩個字元視為等效處理，以便於使遷移更加容易。

預設值

比如開發一個庫，使用者可以選擇是否傳遞自定義的值，如果沒有傳遞則使用預設值。

為了實現這一點，Sass 提供了 !default 標誌。只有當變數沒有定義或者它的值為 null 時，才會給該變數賦值。否則，將使用預設的值。

配置模組變數

用 !default 定義的變數，可以在使用 @use 規則載入模組時配置。

在模組中宣告變數，並定義預設值：

// _library.scss

$black: #000 !default;
$border-radius: 0.25rem !default;
$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default;

code {
  border-radius: $border-radius;
  box-shadow: $box-shadow;
}

在引用模組時，選擇要自定義值的變數，忽略的變數則使用預設值：

// index.scss

@use 'library' with (
  $black: #222,
  $border-radius: 0.1rem
);

內建變數

內建模組定義的變數是無法被修改的。

比如，下面程式碼檢視修改內建變數，但不會成功：

@use "sass:math" as math;

// This assignment will fail.
math.$pi: 0;

作用域

在 css 檔案頂層宣告的變數是全域性變數，聲明後可以在模組中的任何地方被訪問。

在塊（{}）中宣告的變數是區域性變數，只能在宣告它們的塊內訪問。

// 全域性變數
$red: #f00;

div {
  // 區域性變數
  $black: #000;

  color: $red;
}

p {
  // 在這裡引用區域性變數編譯時會報錯
  color: $black;
}

當局部變數和全域性變數重名時，不會覆蓋全域性變數，而是同時存在，在哪個作用域訪問的就是哪個變數。

$red: #f00;

div {
  $red: #f55;

  color: $red;
}

p {
  color: $red;
}

編譯後的 css ：

div {
  color: #f55;
}

p {
  color: #f00;
}

如果想用一個區域性變數去覆蓋全域性變數，也就是在塊中修改全域性變數的值，可以使用 !global 來完成：

$red: #f00;

div {
  // !global 將修改全域性變數的值，而不是在塊中新建一個區域性作用域
  $red: #f55 !global;

  color: $red;
}

p {
  color: $red;
}

div {
  color: #f55;
}

p {
  color: #f55;
}

注意：如果使用 !global 的變數不是一個全域性變數，則編譯時會報錯。

在流程控制語句（@if/@each/@for/@while 等）中宣告的變數有一個自己的特殊作用域，它不會建立新變數去覆蓋同級作用域中的同名變數，而是簡單地進行原變數的賦值修改操作。

$dark-theme: true;
$red: #e55;
$black: #333;

@if $dark-theme {
  $red: #f00;
  $black: #000;
}

.button {
  background-color: $red;
  color: $black;
}

編譯後的 css ：

.button {
  background-color: #f00;
  color: #000;
}

在流程控制語句中，賦值給已經存在的變數則是修改操作，如果是不存在的變數則會建立一個新的變數，但這個新的變數也只能在這個流程控制語句的作用域中使用。

檢測變數是否存在

Sass 核心庫提供了兩個用於處理變數的高階函式。meta.variable-exists() 函式返回給定名稱的變數是否在當前作用域中存在， meta.global-variable-exists() 函式做同樣的事情，但僅用於全域性作用域。

@debug meta.variable-exists("var1"); // false

$var1: value;

@debug meta.variable-exists("var1"); // true

h1 {
  // $var2 is local.
  $var2: value;

  @debug meta.variable-exists("var2"); // true
}

@debug meta.global-variable-exists("var1"); // false

$var1: value;

@debug meta.global-variable-exists("var1"); // true

h1 {
  // $var2 is local.
  $var2: value;

  @debug meta.global-variable-exists("var2"); // false
}

使用者有時可能會希望使用插值來定義基於另一個變數的變數名。Sass 不允許這樣做，因為它使得我們很難一眼就知道哪些變數在哪裡定義。但是，您可以做的是定義一個從名稱到值的 map，然後您可以使用變數訪問該對映。

@use "sass:map";

$theme-colors: (
  "success": #28a745,
  "info": #17a2b8,
  "warning": #ffc107,
);

.alert {
  // Instead of $theme-color-#{warning}
  background-color: map.get($theme-colors, "warning");
}

編譯後的 css ：

.alert {
  background-color: #ffc107;
}

插值（Interpolation）

插值幾乎可以在 Sass 樣式表的任何地方使用，以將 SassScript 表示式的結果嵌入到 CSS 塊中。

在 #{} 中放置一個表示式即可，比如可以用在：

  • 選擇器
  • 屬性名
  • 自定義屬性值
  • CSS 的 @ 語句中
  • @extends
  • CSS @imports
  • 字串
  • 特殊函式
  • CSS 函式名
  • 保留註釋（Loud comments ） /* ... */

下面展示部分用法，在選擇器，屬性，繼承，註釋語句中使用插值：

$selector: "hello";
$color: "color";

/* selector: #{$selector} */
.#{$selector} {
  background-#{$color}: #f00;
}

.#{$selector}-2 {
  @extend .#{$selector};

  border-#{$color}: #f00;
}

/* selector: hello */
.hello,
.hello-2 {
  background-color: #f00;
}

.hello-2 {
  border-color: #f00;
}

在 SassScript 中，可以使用插值表示式將 SassScript 注入到未加引號的字串中。這在動態生成名稱(例如動畫)或使用斜槓分隔值時特別有用。

注意： SassScript 中的插值永遠返回一個未加引號的字串，在上面的例子中已經看到了。

插值對於將值注入到字串中很有用，但除此之外，在 SassScript 表示式中很少需要插值。

比如，使用變數完全不需要這樣寫： color: #{$red} ，而是可以直接使用變數： color: $red 。

注意：不應該使用插值插入數字。因為插值總是返回未加引號的字串，返回值並不能進一步用於計算，這也同時避免了違反 Sass 內建的的安全保護規則，以確保能夠正確使用單位。

Sass 有強大的單位運算，你可以使用它來代替。例如，與其寫 #{$width}px ，不如寫 $width * 1px，或者更好的是，以px開頭宣告$width變數。這樣，$width 已經有單位，你將得到一個很好的錯誤訊息，而不是編譯偽造的CSS。

還有，雖然可以使用插值將帶引號的字串轉換為不帶引號的字串，但使用 string.unquote() 函式會更清楚。所以應該用 string.unquote($string) 來代替 #{$string}。

@語句（At-Rules）

Sass 在 CSS 之上添加了新的 @ 語句 ：

  • @mixin 和 @include 用於複用大的塊級樣式

  • @function 宣告自定義函式，用於 SassScript 表示式中

  • @extend 用於在一個選擇器中繼承另一個選擇器的樣式

  • @at-root 將程式碼塊內部的樣式編譯到 css 最外層（相當於頂級作用域）

  • @error 故意使編譯失敗而中斷，並丟擲錯誤資訊

  • @warn 丟擲一條錯誤資訊但不使編譯程式失敗而中斷

  • @debug 丟擲一條用於 debug 除錯的訊息

  • @if, @each, @for, @while 流程控制語句

@mixin and @include

@mixin 用於定義要複用的樣式塊，@include 用於呼叫這些樣式塊。

因歷史遺留原因，mixin 的名字和 Sass 識別符號一樣，連字元（hyphens） - 和下劃線（underscores）_ 被視為完全相同。

定義 mixin 的語法：

// 不需要傳引數時，複用固定的樣式程式碼
@mixin <name> {
  // ...
}

// 或

// 需要使用時傳遞引數，動態複用樣式程式碼
@mixin name(arg1, arg2, ..., argN) {
  // ...
}

使用 mixin 的語法：

@include <name>;

// 或

@include <name>(arg1, arg2, ...)

使用示例：

// a.scss

@mixin input {
  padding: 10px;
  color: #333;
}

@mixin button ($color, $fontSize) {
  color: $color;
  font-size: $fontSize;
}

@use "a";

.input {
  @include a.input;
}

.button {
  @include a.button(#333, 20px);
}

編譯後的 css ：

.input {
  padding: 10px;
  color: #333;
}

.button {
  color: #333;
  font-size: 20px;
}

通常情況下，如果一個 mixin 定義時有多少個引數，那麼在呼叫時必須傳遞相同數量的引數，除非是定義 mixin 時使用了引數預設值。

mixin 引數預設值

定義一個引數預設值就像定義一個變數一樣，引數名後加一個冒號，然後就可以寫預設值了。

@mixin button ($color, $fontSize: 16px) {
  color: $color;
  font-size: $fontSize;
}

.button {
  @include button(#f00);
}

編譯後的 css ：

.button {
  color: #f00;
  font-size: 16px;
}

預設引數值可以是任意 Sass 表示式，甚至是它前面的引數。

@mixin font ($size, $weight: if($size >= 24px, 600, 400)) {
  font-size: $size;
  font-weight: $weight;
}

.div1 {
  @include font(16px);
}

.div2 {
  @include font(24px);
}

編譯後的 css ：

.div1 {
  font-size: 16px;
  font-weight: 400;
}

.div2 {
  font-size: 24px;
  font-weight: 600;
}

關鍵詞傳參

預設情況下，呼叫 mixin 時傳遞的引數順序必須和定義時的引數一一對應。

如果傳遞引數時指定引數關鍵詞，則可以不按照定義的順序來傳參。

@mixin font ($weight, $size) {
  font-size: $size;
  font-weight: $weight;
}

.div1 {
  @include font($size: 16px, $weight: 500);
}

編譯後的 css ：

.div1 {
  font-size: 16px;
  font-weight: 500;
}

注意，如果要傳遞不帶關鍵詞的引數，則它必須出現在關鍵詞引數之前。

任意數量的引數

如果 mixin 的最後一個引數名以 ... 結尾，那麼這個引數就可以接收傳遞過來的任意數量的引數，這個引數的值則會是一個列表。

@mixin order($height, $selectors...) {
  @for $i from 0 to length($selectors) {
    #{nth($selectors, $i + 1)} {
      position: absolute;
      height: $height;
      margin-top: $i * $height;
    }
  }
}

@include order(150px, "input.name", "input.address", "input.zip");

編譯後的 css ：

input.name {
  position: absolute;
  height: 150px;
  margin-top: 0;
}

input.address {
  position: absolute;
  height: 150px;
  margin-top: 150px;
}

input.zip {
  position: absolute;
  height: 150px;
  margin-top: 300px;
}

帶有關鍵字的任意引數

如果呼叫 mixin 帶了關鍵字，那麼任意引數需要使用 meta.keywords() 來處理，處理後將返回一個 map 型別的資料。

如果沒有將任意引數傳遞給 meta.keywords() 函式，那麼這個任意引數列表就不允許接收帶有關鍵詞的引數，編譯程式會報錯。

@use "sass:meta";

@mixin syntax-colors($args...) {
  @debug meta.keywords($args);
  // (string: #080, comment: #800, variable: #60b)

  @each $name, $color in meta.keywords($args) {
    pre span.stx-#{$name} {
      color: $color;
    }
  }
}

@include syntax-colors(
  $string: #080,
  $comment: #800,
  $variable: #60b,
)

pre span.stx-string {
  color: #080;
}

pre span.stx-comment {
  color: #800;
}

pre span.stx-variable {
  color: #60b;
}

傳遞任意引數

接收的任意引數可以是一個列表（list），那麼，也可以把一個列表作為任意引數傳遞，同樣只需要在後面加上 ... 即可。

$font: 16px, 600, #f00;

@include font($font...);

同樣，也可以把一個 map 作為任意引數傳遞：

@mixin font ($size, $weight) {
  font-size: $size;
  font-weight: $weight;
}

$font: (
  weight: 600,
  size: 16px,
);

.div1 {
  @include font($font...);
}

編譯後的 css ：

.div1 {
  font-size: 16px;
  font-weight: 600;
}

@content 樣式塊

除了接受引數之外，mixin 還可以接受整個樣式塊，稱為內容塊。

在 mixin 中，在樣式塊中寫一個 @content 來宣告這個位置接受一個內容塊，傳遞一個樣式塊給 mixin，這個樣式塊的內容將會用來替換 @content 。

@mixin font ($size, $weight) {
  font-size: $size;
  font-weight: $weight;
  @content;
}

$font: (
  weight: 600,
  size: 16px,
);

.div1 {
  @include font($font...) {
    font-family: sans-serif;
  }
}

編譯後的 css ：

.div1 {
  font-size: 16px;
  font-weight: 600;
  font-family: sans-serif;
}

可以書寫多個 @content; ，這樣將會編譯生成多個接收到的樣式塊。

傳遞的樣式塊是有作用域限制的，只能訪問樣式塊所處的位置的變數，而不能去訪問 mixin 定義的作用域的變數。

如果要讓樣式塊使用 mixin 定義的作用域的變數，則需要通過 @content() 傳遞給樣式塊。

使用 `@content 時傳參

傳參使用 @content(arg1, arg2, ...) ，接收使用 @include <name> using ($arg1, $arg2, ...)

@mixin font ($size, $weight) {
  font-size: $size;
  font-weight: $weight;
  @content(#f00, $size * 2);
}

$font: (
  weight: 600,
  size: 16px,
);

.div1 {
  @include font($font...) using ($color, $margin) {
    font-family: sans-serif;
    color: $color;
    margin: $margin;
  }
}

編譯後的 css ：

.div1 {
  font-size: 16px;
  font-weight: 600;
  font-family: sans-serif;
  color: #f00;
  margin: 32px;
}

@content() 同樣可以傳遞 list 或 map 型別的引數，用法和前面一樣。

縮排語法的 mixin

縮排語法的 Sass 可以使用 = 來定義一個mixin，然後使用 + 來使用一個 mixin，但很不直觀，不建議使用。

@at-root

通常用於巢狀的選擇器中，在選擇器前寫下 @at-root 語句，用於將該選擇器編譯到樣式表的最外層，而不是巢狀所在的位置。

.div1 {
  color: #f00;
  .div2 {
    color: #0f0;

    // 將 .div3 編譯到最外層
    @at-root .div3 {
      color: #00f;
    }
  }
}

編譯後的 css ：

.div1 {
  color: #f00;
}
.div1 .div2 {
  color: #0f0;
}
.div3 {
  color: #00f;
}

結合 mixin 來使用：

@use "sass:selector";

@mixin unify-parent($child) {
  @at-root #{selector.unify(&, $child)} {
    font-size: 16px;
    @content;
  }
}

.wrapper .field {
  @include unify-parent("input") {
    color: #f00;
  }

  @include unify-parent("select") {
    color: #0f0;
  }
}

編譯後的 css ：

.wrapper input.field {
  font-size: 16px;
  color: #f00;
}

.wrapper select.field {
  font-size: 16px;
  color: #0f0;
}

@at-root 還有另一種寫法 @at-root { ... }：

.div1 {
  font-size: 16px;

  @at-root {
    .div2 {
      color: #f00;
    }
    .div3 {
      color: #0f0;
    }
  }
}

編譯後的 css ：

.div1 {
  font-size: 16px;
}
.div2 {
  color: #f00;
}

.div3 {
  color: #0f0;
}

解決樣式之外的東西

預設情況下， @at-root 只會解決普通樣式規則， 其他像是 @media 或 @supports 等將會被丟掉。

使用 @at-root (with: <rules...>) { ... } 或 @at-root (without: <rules...>) 來告訴 Sass 在編譯的時候是否包括一些指定的規則。

除了合法的 @語句的名稱，如 @media 中的 media，還有兩個特殊的值可以在查詢中使用：

  • rule 指的是樣式規則。例如，@at-root (with: rule) 不保留 @ 語句，但保留樣式規則。
  • all 指所有 @語句 和 style 規則。
@media screen and (min-width: 900px) {
  .page {
    width: 100px;

    @at-root (with: media) {
      /* @at-root (with: media) */
      .div1 {
        font-size: 16px;
      }
    }

    @at-root (without: media) {
      .div2 {
        /* @at-root (without: media) */
        color: #111;
      }
    }

    @at-root (with: rule) {
      .div3 {
        /* @at-root (with: rule) */
        color: #111;
      }
    }

    @at-root (without: rule) {
      .div4 {
        /* @at-root (without: rule) */
        color: #111;
      }
    }

    @at-root (with: all) {
      .div5 {
        /* @at-root (with: all) */
        color: #111;
      }
    }

    @at-root (without: all) {
      .div6 {
        /* @at-root (without: all) */
        color: #111;
      }
    }
  }
}

編譯後的 css ：

@media screen and (min-width: 900px) {
  .page {
    width: 100px;
  }

  /* @at-root (with: media) */
  .div1 {
    font-size: 16px;
  }
}
.page .div2 {
  /* @at-root (without: media) */
  color: #111;
}
.page .div3 {
  /* @at-root (with: rule) */
  color: #111;
}

@media screen and (min-width: 900px) {
  .div4 {
    /* @at-root (without: rule) */
    color: #111;
  }
}

@media screen and (min-width: 900px) {
  .page .div5 {
    /* @at-root (with: all) */
    color: #111;
  }
}
.div6 {
  /* @at-root (without: all) */
  color: #111;
}

相關推薦

【Sass/SCSS 完整自學中文版教程01】SCSS 官方英文文件翻譯整理

Sass 基本介紹 目錄Sass 基本介紹註釋（Comments）單行註釋（Single-line comments）多行註釋（Multi-line comments）SassDoc特殊的函式（Special Functions）url()calc() 和 element()progid:...() 和 expression(

【Sass/SCSS 官方英文文件翻譯整理】SCSS 完整自學中文版教程02_SCSS的除錯

Sass 除錯 目錄Sass 除錯@error@warn@debug 如果對本文有任何問題，建議，或者在前端技術體系方面有任何問題，可以新增我的微信： drylint , 我會盡可能為你解答，也會拉你進入前端技術進階交流群，大家一起進步~

【C++學習教程01】C++名稱空間重名&函式原型&字元型別&資料型別

目錄參考資料程式碼資料型別 參考資料 均來自範磊C++教程(1-4課時） 開發平臺Xcode

006、【前程貸—簡化版，實戰 01】 用 requets 發起 註冊、登入、充值

一、【前程貸—簡化版實戰 01】 用 requets 發起 註冊、登入、充值 1、用postman 發起一個 註冊請求，如下：

【微信支付踩坑記01】v2版支付簡單示例

v2版生成訂單程式碼 沒什麼好說的 public string WeChatpayJSAPI(string money, string openid,string partner_trade_no,string desc)

【譯】StackExchange.Redis 中文文件（五）事務

事務 redis 的事務與SQL資料庫中的事務不同。 完整的文件在這裡，但換句話說：

【譯】StackExchange.Redis 中文文件（四）鍵、值和頻道

Keys, Values and Channels 在 redis，keys 與其他有很大的區別。key 是資料庫中資料的唯一標識（可以是 String，List，Hash 或任何其他 redis 資料型別）。此外，在處理叢集或分片系統時，關鍵是定義包含此資料的節

【譯】StackExchange.Redis 中文文件（八）流

概述 Stream 資料型別是在 Redis 版本 5.0 中新增的，它表示訊息的僅追加日誌。redis.io 上記錄的所有 stream related commands 已在 StackExchange.Redis 客戶端庫中實現。閱讀\"Introduction to Redis Streams\"，

【譯】StackExchange.Redis 中文文件（十三）Thread Theft

Thread Theft 如果你是因為異常中的連結來到這裡，並且你只想讓程式碼能正常執行，那麼只要在 application startup 裡新增以下程式碼：

【轉】CSS重置文件/reset.css

原文：https://juejin.cn/post/6844903918686699534 前言 reset.css文件就是一個普通的層疊樣式表文檔，就是css文件，一個網站一般會用三種css文件來設定網站的樣式。重置樣式(reset.css)(重置預設的css樣式)；公共樣

一個完整的軟體專案開發過程中有哪些文件產出

具體專案具體分析，大概總結了一下軟體行業的文件交付物。僅供參考 商務談判階段：合同、工作說明書（概要設計說明書）

【PyTorch官方教程中文版學習筆記01】PyTorch 自動微分

autograd 包是 PyTorch 中所有神經網路的核心。首先讓我們簡要地介紹它，然後我們將會去訓練

【Css】Scss 與 Sass 簡單示例

Sass是什麼 SASS是CSS3的一個擴充套件，增加了規則巢狀、變數、混合、選擇器繼承等等。通過使用命令列的工具或WEB框架外掛把它轉換成標準的、格式良好的CSS程式碼。

【Sass/SCSS】我花4小時整理了的Sass的函式

【Sass/SCSS】我花4小時整理了的Sass的函式 部落格說明 文章所涉及的資料來自網際網路整理和個人總結，意在於個人學習和經驗彙總，如有什麼地方侵權，請聯絡本人刪除，謝謝！

JVM—【01】認識JVM的記憶體佈局和執行時資料區

1. Java 記憶體區域 1.1. JVM 記憶體佈局 與 執行時資料區 1.2. Heap 堆 它的唯一目的就是存放物件例項；幾乎所有物件例項和陣列，分配記憶體的區域。

【最簡OAuth 2.0 教程】開發認證中心及資源伺服器接入

背景： 網上很多講配置 oauth2 ，配置方法 複雜紛繁對於初學者很不友好，讓人望而卻步

【GAN論文-01】翻譯-Progressive growing of GANS for improved quality ，stability，and variation-論文

Published as a conference paper at ICLR 2018 Tero Karras、Timo Aila、Samuli Laine and Jaakko Lehtinen

Redis 教程01 — Redis 的安裝

1.Redis 簡介 Remote Dictionary Server（Redis） 是一個由 Salvatore Sanfilippo 寫的 key-value 儲存系統。Redis 是一個開源的使用 ANSI C 語言編寫、遵守 BSD 協議、支援網路、可基於記憶體亦可持久化的日誌型、K

【軟體工具篇01】如何用思維導圖構建自己的知識體系

如何用思維導圖構建自己的知識體系 思維導圖是什麼 百度百科上說 思維導圖，英文是The Mind Map，又叫心智導圖，是表達發散性思維的有效圖形思維工具 ，它簡單卻又很有效，是一種實用性的思維工具

Termux 高階終端教程-01

Termux 高階終端教程-01 剛寫這篇文章的時候，當時國內 Termux 相關的文章和資料相對來說還是比較少的，希望本文可以幫助到更多對 Termux 感興趣的朋友，發揮 Android 平臺更大的 DIY 空間。