SCSS 學習筆記 和 vscode下載live sass compiler插件配置

1、下載livelive sass compiler插件并配置

    // 在 已有代碼 下面 添加下面 代碼，一般剛剛下載打開最后一行是：// "liveSassCompile.settings.autoprefix": [],// 所以直接 把下面復制進去保存就行"liveSassCompile.settings.autoprefix": [// ">1%"是指 通過全球使用情況統計信息選擇出的高于1%使用率的瀏覽器版本。// "last 2 versions"是指 每個瀏覽器的最后2個版本。"> 1%","last 2 versions"],"liveSassCompile.settings.formats": [{"format": "expanded", // 出口css樣式為展開格式"extensionName": ".css","savePath": "~/../css", // null 為當前目錄"savePathReplacementPairs": null}],"liveSassCompile.settings.generateMap": false, // 去掉編譯時出現的css.map文件"liveSassCompile.settings.excludeList": ["/**/node_modules/**","/.vscode/**"],

2、SCSS 筆記

  1. SCSS 是一個 CSS 的預處理器，是 CSS 的擴展語言，可以幫助我們減少重復的代碼，生成更好的 CSS 格式化代碼，并且兼容所有版本的 CSS
  2. SCSS 是 對于 CSS3 的 SASS ，所以我們學的時候，把文件后綴寫為 “.scss”
  3. 由于我們的配置，當遇到兼容性代碼，出口文件會自動配置，如下圖

  • ?2.1? 語法嵌套規則

  • 2.1.1? 選擇器嵌套

?避免了重復輸入父選擇器，復雜的 CSS 結構更易于管理

  • 2.1.2? 父選擇器 &?

在嵌套 CSS 規則時，可以用 & 代表嵌套規則外層的父選擇器。例如：

  • 2.1.2.1? 當給某個元素設定 hover 樣式時

  • 2.1.2.2? 當 body 元素有某個 classname 時

  • 2.1.3??屬性嵌套

  1. 有些 CSS 屬性遵循相同的命名空間 (namespace)，比如 font-family, font-size, font-weight 都以 font 作為屬性的命名空間。為了便于管理這樣的屬性，同時也為了避免了重復輸入，SCSS?允許將屬性嵌套在命名空間中
  2. 注意font：后面要加一個空格

  • 2.1.4??占位符選擇器 %foo 必須通過 @extend

有時，需要定義一套公共樣式 ，使用占位符選擇器%foo，然后通過 @extend?指令引入，尤其是在制作 SCSS 樣式庫的時候，在需要時引入，希望 SCSS 能夠忽略用不到的樣式，達到簡略代碼的目的。

  • ?2.2? 代碼注釋

? ? ?SCSS 支持兩種注釋：

  1. 標準的css多行注釋 /* ... */ 會編譯到.css文件中
  2. 單行注釋 // 不會編譯到.css文件

  • ?2.3? SCSS 變量

  • 2.3.1? CSS 定義變量的方法

使用 CSS 自定義屬性_打不著的大喇叭的博客-CSDN博客

  • 2.3.2? SCSS 定義變量的方法?

  • 2.3.2.1? 定義規則

  1. 變量以美元符號($)開頭，后面跟變量名；
  2. 變量名是不以數字開頭的可包含字母、數字、下劃線、橫線（連接符）；
  3. 寫法同css，即變量名和值之間用冒號(:)分隔；
  4. 變量一定要先定義，后使用；

  • ?2.3.2.2??連接符與下劃線

  • 2.3.3? 變量的作用域

  • 2.3.3.1? 局部變量

定義：在選擇器內容定義的變量，只能在選擇器范圍內使用

  • 2.3.3.2? 全局變量

定義后能全局使用的變量

1、在選擇器外面的最前面定義的變量?

2、使用 !global 標志定義全局變量

  • 2.3.4??變量值的類型

???SCSS 支持 7 種主要的數據類型：

  1. 數字，1, 2, 13, 10px，30%
  2. 字符串，有引號字符串與無引號字符串，"foo", 'bar', baz
  3. 顏色，blue, #04a3f9, rgba(255,0,0,0.5)
  4. 布爾型，true, false
  5. 空值，null
  6. 數組 (list)，用空格或逗號作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
  7. maps, 相當于 JavaScript 的 object，(key1: value1, key2: value2)

  • ?2.3.5? 默認值

  • ?2.4??SCSS 導入@import

  • 2.4.1??@import

SCSS 拓展了 @import 的功能，允許其導入 SCSS 或 SASS?文件。被導入的文件將合并編譯到同一個 CSS 文件中，另外，被導入的文件中所包含的變量或者混合指令 (mixin) 都可以在導入的文件中使用。

  • 2.4.1.1? 純SCSS文件引入注意點

注意：

? 1、如果一個目錄正在被 SCSS 程序監測，目錄下的所有scss/sass源文件都會被編譯，但通常不希望局部文件被編譯，因為局部文件是用來被導入到其他文件的。如果不想局部文件被編譯，文件名可以以下劃線 （_）開頭，如下圖的 public 最好前面添加 “_” 開頭，這樣就不會導出 css 文件，如 _test.scss 文件，因為我們只是單純引入，不需要 css 文件。

? 2、還有就是帶（_）文件，在引入時，可以不寫（_）,即引入 _test.scss , @import "test"

? 3、這也就意味著，同一個目錄下不能同時出現兩個相關名的 SCSS 文件（一個不帶，一個帶），添加下劃線的文件將會被忽略。

  • 2.4.1.2? 跟我們普通css里面@import的區別

如下幾種方式，都將作為普通的 CSS 語句，不會導入任何 SCSS 文件

  1. 文件拓展名是 .css；
  2. 文件名以 http:// 開頭；
  3. 文件名是 url()；
  4. @import 包含 media queries。

  • ?2.5? SCSS 混合指令 (Mixin Directives)?

混合指令（Mixin）用于定義可重復使用的樣式。混合指令可以包含所有的 CSS 規則，絕大部分 SCSS 規則，甚至通過參數功能引入變量，輸出多樣化的樣式。?

  • 2.5.1? 定義與使用混合指令 @mixin

    @mixin mixin-name() {/* css 聲明 */}

  • 2.5.1.1? 標準寫法

  • 2.5.1.2? 嵌入選擇器

  • ?2.5.1.3? 使用變量

  • ?2.5.1.4? 使用變量（多參數）

注意：必須多少參數，多少值，沒有值可為0

  • ?2.5.1.5? 指定默認值

  • ?2.5.1.6? 可變參數

  • 2.5.2??@mixin混入總結

  1. mixin是可以重復使用的一組CSS聲明
  2. mixin有助于減少重復代碼，只需聲明一次，就可在文件中引用
  3. 混合指令可以包含所有的 CSS 規則，絕大部分 SCSS 規則，甚至通過參數功能引入變量，輸出多樣化的樣式。
  4. 使用參數時建議加上默認值

  • ?2.6? SCSS @extend（繼承）指令

在設計網頁的時候通常遇到這樣的情況：一個元素使用的樣式與另一個元素完全相同，但又添加了額外的樣式。通常會在 HTML 中給元素定義兩個 class，一個通用樣式，一個特殊樣式。?

  • 2.6.1? 用占位選擇器繼承

?注意：上面的圖中 .alert 只是單純的用于繼承，不用做元素類名，但是它卻導出成了 類名，這時我們可以用 占位選擇器%foo 對其進行聲明，不用于元素類名

  • 2.6.2? 使用多個@extend

  • 2.6.3? @extend多層繼承

  • ?2.7? @mixin（混入）和 @extend（繼承）的區別

  • ?2.8? SCSS 運算符 的基本使用

  • 2.8.1? 等號 操作符

所有數據類型都支持等號運算符:

符號說明
==等于
!=不等于

  • 2.8.2? 關系（比較）運行符

符號說明
< （lt）小于
> （gt）大于
<= （lte）小于等于
>= （gte）大于等于

  • 2.8.3? 邏輯 運行符

符號說明
and邏輯與
or邏輯或
not邏輯非

  • 2.8.4? 數字 運行符

符號說明
+加
-減
*乘
/除
%取模
線數字、百分號、css部分單位（px、pt、in...）【線數字與百分號或單位運算時會自動轉化成相應的百分比與單位值】

  • 2.8.4.1? “ + ”?運算

?

  • 2.8.4.2? “ - ”?運算

  • 2.8.4.3? “ * ”?運算

注意：這里 “*” 左右兩邊 都 帶 單位，就會報錯

  • 2.8.4.4? “ / ”?運算

注意：" / " 在 CSS 中通常起到分隔數字的用途，SassScript 作為 CSS 語言的拓展當然也支持這個功能，同時也賦予了 " / " 除法運算的功能。也就是說，如果 " / " 在 SassScript 中把兩個數字分隔，編譯后的 CSS 文件中也是同樣的作用。

????以下三種情況 / 將被視為除法運算符號：

  1. 如果值或值的一部分，是變量或者函數的返回值
  2. 如果值被圓括號包裹
  3. 如果值是算數表達式的一部分

注意：如果需要使用變量，同時又要確保 / 不做除法運算而是完整地編譯到 CSS 文件中，只需要用 #{} 插值語句將變量包裹。

  • 2.8.4.5? “ %?”?運算

  • 2.8.5? 字符串運算

???注意：

  1. “ + ” 可用于連接字符串。
  2. [ "foo" + bar?] 和 [ "foo" + "bar"?]，運算結果是有引號的，[ foo?+ "bar"] 和 [ foo?+ bar?]，運算結果則沒有引號。
  3. 如果有一個值是函數返回的，情況可能不一樣。

  • ?2.9? SCSS 插值語句 #{ }

提出需求：如果需要使用變量，同時又要確保 / 不做除法運算而是完整地編譯到 CSS 文件中。

解決方法：只需要用 #{} 插值語句將變量包裹。

?通過 #{}?插值語句可以在選擇器、屬性名、注釋中使用變量：

  • ?2.10? SCSS 常見函數的基本使用

常見函數簡介，更多函數列表可看：Sass: Built-In Modules

  • 2.10.1? Color（顏色函數）

SCSS 包含很多操作顏色的函數。例如：lighten() 與 darken()函數可用于調亮或調暗顏色，opacify()函數使顏色透明度減少，transparentize()函數使顏色透明度增加，mix()函數可用來混合兩種顏色。

  • 2.10.2? String（字符串函數）

SCSS 有許多處理字符串的函數，比如向字符串添加引號的 quote()、獲取字符串長度的str-length() 和 將內容插入字符串給定位置的 str-insert()。

  • 2.10.3? Math（數值函數）

數值函數處理數值計算，例如：percentage()將無單元的數值轉換為百分比，round()將數字四舍五入為最接近的整數，min()和max()獲取幾個數字中的最小值或最大值，random()返回一個隨機數。

  • 2.10.4??List 函數

List 函數操作 List，length() 返回列表長度，nth() 返回列表中的特定項，join() 將兩個列表連接在一起，append() 在列表末尾添加一個值。

  • 2.10.5??Map函數

Map函數操作Map，map-get() 根據鍵值獲取map中的對應值，map-merge() 來將兩個map合并成一個新的map，map-values() 映射中的所有值。

  • 2.10.6? selector 選擇器函數

選擇符相關函數可對CSS選擇進行一些相應的操作，例如：selector-append()可以把一個選擇符附加到另一個選擇符，selector-unify()將兩組選擇器合成一個復合選擇器。

  • 2.10.7? 自檢函數

自檢相關函數，例如：feature-exists() 檢查當前 SCSS 版本是否存在某個特性，variable-exists() 檢查當前作用域中是否存在某個變量【注意：例如檢測 $color 不需要加 $，寫 color 即可】，mixin-exists() 檢查某個mixin是否存在。

自檢函數通常用在代碼的調試上

  • ?2.11??SCSS 流程控制指令@if、@for、@each、@while

  • 2.11.1? @if 控制指令

  1. @if()函數允許您根據條件進行分支，并僅返回兩種可能結果中的一種。
  2. 語法方式同js的 if....? else if...? else

  • 2.11.2??@for 指令

@for 指令可以在限制的范圍內重復輸出格式，每次按要求（變量的值）對輸出結果做出變動。這個指令包含兩種格式：@for $var from through ，或者 @for $var from to

區別在于 through 與 to 的含義：

  1. 當使用?through?時，條件范圍包含與的值【例：1-5，包含 5】。
  2. 而使用?to? 時條件范圍只包含的值不包含 的值【例：1-5，不包含 5】。
  3. 另外，$var 可以是任何變量，比如 $i； 但是必須是整數值。

  • 2.11.3? @each 指令

@each 指令的格式是 $var in <list>?, $var 可以是任何變量名，比如 $length 或者 $name，而 <list> 是一連串的值，也就是值列表。

  • 2.11.4? @while 指令

@while 指令重復輸出格式直到表達式返回結果為 false。這樣實現比 @for 更復雜的循環。

  • ?2.12? SCSS @function 的使用

  • 2.12.1? 函數的定義與使用

函數的作用：把一些比較復雜或經常用些的內容進行抽離（封裝），以便重復使用

  • 2.12.1.1??函數的定義

提示：函數名function-name 與function_name 是相同的@function function-name($param1, $param2, ...){...@return $value;
}

  • 2.12.1.2??@return

它只允許在 @函數體 中使用，并且每個 @function 必須以@return結束。當遇到 @return時，它會立即結束函數并返回其結果。

  • 2.12.2? 函數的使用及參數與默認值

/** *定義線性漸變*@param $direction  方向*@param $gradients  顏色過度的值列表*/@function background-linear-gradient($direction, $start-color, $end-color:blue) {@return linear-gradient($direction, $start-color, $end-color);
}1、正常傳參調用
.header {background-image: background-linear-gradient(to right, red, green);
}2、省略默認值【因為默認值已經設好了】
.header {background-image: background-linear-gradient(to right, red);
}3、按照參數名傳參
.header {background-image: background-linear-gradient($start-color: red, $direction: to bottom);
}

  • 2.12.3??任意參數

$gradients...   =>   注意后面這三點，加上后，這個是 可變參數@function background-linear-gradient($direction, $gradients...) {@return linear-gradient($direction, $gradients);
}.header {background-image: background-linear-gradient(to bottom, red, green, blue);
}

注意點：

    $widths: 50px,30px,100px;.logo {width: min($widths);  <= 錯誤寫法：會報錯，我們需要用可變參數才對width: min($widths...);}

  • 2.12.4? 混入mixin和函數function的區別

  1. 混入mixin主要是通過傳遞參數的方式輸出多樣化的樣式，為了可以現實代碼復用。
  2. 函數的功能主要是通過傳遞參數后，經過函數內部的計算，最后@return輸出一個值。

  • ?2.13? 三元條件函數 if 的使用

語法：if($condition, $if-true, $if-false)

解釋：判斷 $condition，如果條件成立，則返回 $if-true 的結果，如果條件不成立，則返回 $if-false 的結果。

  • ?2.14? SCSS @use 的使用

  1. 從其他 SCSS 樣式表加載mixin，function和變量，并將來自多個樣式表的CSS組合在一起，@use加載的樣式表被稱為“模塊”，多次引入只包含一次。
  2. @use也可以看作是對@import的增強
  3. 語法：@use '<url>' [as 重命名]

  • 2.14.1? @use 和 @import 的區別

注意1：使用 @use 時，會把前面所有文件的其中的同類名覆蓋，而 @import則不會，會全部顯示。

注意2：使用 @use 時，重復引用 一個文件，會報錯，但你又想引用，那就需使用模塊名。

  • 2.14.1.1? 通過 as 使用新定義的模塊名

注意：如果下面沒通過模塊名去調用 $font-szie ，就會報錯，可通過取消命名空間去除報錯

  • ?2.14.1.2? 通過 as 取消命名空間

可能@use "" as * 來取消命名空間，這種方式加載的模塊被提升為全局模塊

注意：這種方式慎用

  • 2.14.2? 定義私有成員

如果加載的模塊內部有變量只想在模塊內使用，可使用 $- 或 $_ 定義在變量頭即可

  • 2.14.3? 定義默認值

  • 2.14.4??@use使用總結

  1. @use引入同一個文件多次，不會重復引入，而@import會重復引入
  2. @use引入的文件都是一個模塊，默認以文件名作為模塊名，可通過as alias取別名
  3. @use引入多個文件時，每個文件都是單獨的模塊，相同變量名不會覆蓋，通過模塊名訪問，而@import變量會被覆蓋
  4. @use方式可通過 @use 'xxx' as *來取消命名空間，建議不要這么做
  5. @use模塊內可通過 $-? 或 $_?來定義私有成員，也就是說或者-開頭的Variables mixins functions 不會被引入
  6. @use模塊內變量可通過！default 定義默認值，引入時可通用with（...）的方式修改
  7. 可定義-index.scss或_index.scss來合并多個scss文件，它@use默認加載文件

  • ?2.15? SCSS @forward的使用

作用：通過 @forward?加載一個模塊的成員，并將這些成員當作自己的成員對外暴露出去，類似于類似于 es6 的 export ...，通常用于跨多個文件組織 SCSS 庫

  • 2.15.1? 轉發、合并SCSS

注意：當多個被轉發的文件存在相同變量、函數、混入時會有問題，可以通過定義前綴解決

  • 2.15.2??選擇性轉發

默認情況下，@forward 會將一個模塊中所有成員都轉發，如果只想轉發某些成員，當你不想

轉發所有變量、函數、混入時，可使用 hide \ show :

  1. @forward "module" hide $var, mixinName, fnName 禁止轉發某些成員
  2. @forward "module" show $var, mixinName, fnName 只轉發某些成員

  • 2.15.3? 轉發時定義前綴

各個成員通過逗號 , 分隔開，如果成員是變量，不能省略 $ 符號。

  • 2.15.4? 轉發時配置模塊的成員

  • 2.15.5? @use 與 @forward 一起使用的情況

當一個模塊里面須要同時使用@use與@forward引用同一文件時，建議先使用@forwar后再使用@use，不然某些情況可能報錯

@use 'uses/code';
@forward 'uses/common' as com-*;
@forward 'uses/global' as glob-* show glob-base;
@use 'use/common' as c1;
.test {font-size: c1.$font-size;color: code.$color;
}

  • ?2.16? SCSS 中 @at-root 使用

作用：@at-root 可以使被嵌套的選擇器或屬性跳出嵌套【例子：比如一段嵌套的樣式對應的html有一天需要移動到另一層div中，這時，你加了 @at-root 在樣式中，就什么都不用動了】

    @at-root <selector>{...}

  • 2.16.1? 普通嵌套

  • 2.16.2? 使用 @at-root 跳出嵌套

  • 2.16.2.1? 作用 某個 選擇器使其跳出嵌套

  • 2.16.2.2? 作用 某些 選擇器使其跳出嵌套

  • 2.16.3? 使用 @at-root 結合 #{&} 實現BEM效果

    需要實現下面的效果.block{width: 1000px;}.block__element{font-size: 12px;}.block--modifier{font-size: 14px;}.block__element--modifier{font-size: 16px;}

  • 2.16.4? @at-root (without: …) 和 @at-root (with: …) 的使用

默認 @at-root 只會跳出選擇器嵌套，而不能跳出 @media 或 @support ，如要跳出這兩種，需用 @at-root (without: media)，@at-root (without: support)。這個語法關鍵詞有四個【@at-root (without: all)、@at-root (without: rule)】：

  1. all（表示所有）
  2. rule（表示常規css）
  3. media（表示media）
  4. supports（表示supports）

  • 2.16.4.1? @at-root (without: …)

@at-root (without: ...) 表示在當前作用域生成的 CSS 規則將不包含指定的選擇器。例如：

.container {@at-root (without: .nested) {color: red;}
}.nested {color: blue;
}

上述代碼中，使用 @at-root (without: .nested) 指令將生成 .container 的規則放在頂層，排除了包含 .nested 的規則，并且生成的 CSS 如下：

.container {color: red;
}.nested {color: blue;
}

注意到 .nested 規則沒有被移動到頂層，因為在 @at-root (without: .nested) 中指定了排除該選擇器。

  • 2.16.4.2??@at-root (with: …)

@at-root (with: ...) 表示只有指定的選擇器會被包含在生成的 CSS 規則中。例如：

.container {color: red;@at-root (with: .nested) {color: blue;}
}.nested {font-weight: bold;
}

上述代碼中，使用 @at-root (with: .nested) 指令將生成 .container 的規則和包含 .nested 的規則放在頂層，并且生成的 CSS 如下：

.container {color: red;
}.nested {color: blue;font-weight: bold;
}

可以看到，.container 和 .nested 的規則都被移動到了頂層。這是因為在 @at-root (with: .nested) 中指定了只包含 .nested 選擇器的規則。

看到這里完結了 O.o?

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/42579.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/42579.shtml
英文地址，請注明出處：http://en.pswp.cn/news/42579.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

MySQL：在MySQL中實現toStartOfQuarter和toStartOfWeek等函數

MySQL：在MySQL中實現toStartOfQuarter和toStartOfWeek等函數

文章目錄 在 MySQL 中實現 ClickHouse 日期函數&#xff1a;toStartOfYear/toStartOfQuarter/toStartOfMonth/toMonday/toStartOfWeektoStartOfYeartoStartOfQuartertoStartOfMonthtoStartOfWeek/toMonday 在 MySQL 中實現 ClickHouse 日期函數&#xff1a;toStartOfYear/toSta…
閱讀更多...
基于Java+SpringBoot+Vue的烏魯木齊南山冰雪旅游服務網站【源碼+論文+演示視頻+包運行成功】

基于Java+SpringBoot+Vue的烏魯木齊南山冰雪旅游服務網站【源碼+論文+演示視頻+包運行成功】

博主介紹&#xff1a;?csdn特邀作者、博客專家、java領域優質創作者、博客之星&#xff0c;擅長Java、微信小程序、Python、Android等技術&#xff0c;專注于Java技術領域和畢業項目實戰? &#x1f345;文末獲取源碼聯系&#x1f345; &#x1f447;&#x1f3fb; 精彩專欄推…
閱讀更多...
MVCC 是否徹底解決了事物的隔離性 ？

MVCC 是否徹底解決了事物的隔離性 ？

目錄 1. 什么是 MVCC 2. MVCC 是否徹底解決了事物的隔離性 3. MySQL 中如何實現共享鎖和排他鎖 4. MySQL 中如何實現悲觀鎖和樂觀鎖 1. 什么是 MVCC MVCC&#xff08;Multi-Version Concurrency Control&#xff0c;多版本并發控制&#xff09;是一種多版本并發控制機制&…
閱讀更多...
webpack 和 ts 簡單配置及使用

webpack 和 ts 簡單配置及使用

如何使用webpack 與 ts結合使用 新建項目 &#xff0c;執行項目初始化 npm init -y會生成 {"name": "tsdemo01","version": "1.0.0","description": "","main": "index.js","scripts&…
閱讀更多...
Spring的ApplicationEvent簡單使用

Spring的ApplicationEvent簡單使用

ApplicationEvent以及Listener是Spring為我們提供的一個事件監聽、訂閱的實現&#xff0c;內部實現原理是觀察者設計模式&#xff0c;設計初衷也是為了系統業務邏輯之間的解耦&#xff0c;提高可擴展性以及可維護性。事件發布者并不需要考慮誰去監聽&#xff0c;監聽具體的實現…
閱讀更多...
自動駕駛數據集匯總

自動駕駛數據集匯總

1.Nuscenes 數據集鏈接&#xff1a;nuScenes nuscenes數據集下有多個任務&#xff0c;涉及Detection&#xff08;2D/3D&#xff09;、Tracking、prediction、激光雷達分割、全景任務、規劃控制等多個任務&#xff1b; nuScenes數據集是一個具有三維目標注釋的大型自動駕駛數…
閱讀更多...
【ARM 嵌入式 編譯系列 10.3 -- GNU elfutils 工具小結】

【ARM 嵌入式 編譯系列 10.3 -- GNU elfutils 工具小結】

文章目錄 什么是 GNU elfutils？GNU elfutils 常用工具有哪些？objcopy 常用參數有哪些？GNU binutils和GNU elfutils區別是什么？上篇文章：ARM 嵌入式 編譯系列 10.2 – 符號表與可執行程序分離詳細講解 什么是 GNU elfutils？ GNU elfutils是一個開源的工具集，用于處理ELF…
閱讀更多...
2023-8-15差分矩陣

2023-8-15差分矩陣

題目鏈接&#xff1a;差分矩陣 #include <iostream>using namespace std;const int N 1010;int n, m, q; int a[N][N], b[N][N];void insert(int x1, int y1, int x2, int y2, int c) {b[x1][y1] c;b[x1][y2 1] - c;b[x2 1][y1] - c;b[x2 1][y2 1] c; }int main…
閱讀更多...
基于SOLIDWORKS配置功能建立塑料模具標準件庫

基于SOLIDWORKS配置功能建立塑料模具標準件庫

在塑料模具的設計過程中&#xff0c;建立其三維模型對于后續進行CAE分析和CAM加工是非常重要的。除了型腔和型芯以外&#xff0c;塑料模具中的標準件很多&#xff0c;如推桿、導柱、導套、推板、限位釘等&#xff0c;這些對于不同的產品是需要反復調用的。目前&#xff0c;我國…
閱讀更多...
汽車OTA活動高質量發展的“常”與“新”

汽車OTA活動高質量發展的“常”與“新”

伴隨著車主的頻繁崔更&#xff0c;車企除了卷硬件、拼價格&#xff0c;逐漸將精力轉移到汽車全生命周期的常用常新。時至下半年&#xff0c;車企OTA圈愈發熱鬧&#xff0c;以新勢力、新實力為代表新一代車企&#xff0c;OTA運營活動逐漸進入高質量發展期。 所謂高質量&#xf…
閱讀更多...
記錄--webpack和vite原理

記錄--webpack和vite原理

這里給大家分享我在網上總結出來的一些知識&#xff0c;希望對大家有所幫助 前言 每次用vite創建項目秒建好&#xff0c;前幾天用vue-cli創建了一個項目&#xff0c;足足等了我一分鐘&#xff0c;那為什么用 vite 比 webpack 要快呢&#xff0c;這篇文章帶你梳理清楚它們的原理…
閱讀更多...
FFmpeg 靜態庫編譯錯誤匯總

FFmpeg 靜態庫編譯錯誤匯總

今天使用靜態庫編譯發現 了錯誤 這個只有在arm64 的編譯上 存在 。armeabi-v7a不存在問題 ld: error: relocation R_AARCH64_ADD_ABS_LO12_NC cannot be used against symbol ff_cos_16384; recompile with -fPIC 解決方案列舉匯總 有很多 大家如果有同樣的問題可以一一測試。…
閱讀更多...
c++ 虛函數

c++ 虛函數

虛函數的作用就是當一個類繼承另一個類時&#xff0c;兩個類有同名函數&#xff0c;當你使用指針調用時你希望使用子類的函數而不是父類的函數&#xff0c;那么請使用 virutal 和 override 關鍵詞 看代碼&#xff1a; #include <iostream> #include <string> #in…
閱讀更多...
Kotlin開發筆記：集合和逆變協變

Kotlin開發筆記：集合和逆變協變

Kotlin開發筆記&#xff1a;集合和逆變協變 Kotlin中的集合 基本的集合類型 Kotlin中的集合類型和Java差不多&#xff0c;不過有些在名稱上可能有出入&#xff0c;下面是Kotlin中的一些基本集合類型&#xff1a; 類型介紹Pair兩個值的元組Triple三個值的元組Array經過索引的…
閱讀更多...
去掉鼠標系列之一: 語雀快捷鍵使用指南

去掉鼠標系列之一: 語雀快捷鍵使用指南

其實應該是系列之二了&#xff0c;因為前面寫了一個關于Interlij IDEA的快捷鍵了。 為什么要寫這個了&#xff0c;主要是覺得一會兒用鼠標&#xff0c;一會兒鍵盤&#xff0c;一點兒不酷&#xff0c;我希望可以一直用鍵盤&#xff0c;拋開鼠標。后面陸續記錄一下各個軟件的快捷…
閱讀更多...
高效使用ChatGPT之ChatGPT客戶端

高效使用ChatGPT之ChatGPT客戶端

ChatGPT客戶端&#xff0c;支持Mac, Windows, and Linux 下載地址見文章結尾 軟件截圖 Windows: Mac&#xff1a; 說明 chatgpt桌面版&#xff0c;相比于網頁版的chatgpt&#xff0c;最大的特色是支持歷史聊天對話記錄導出&#xff0c;且支持三種格式&#xff1a;PNG、PDF、…
閱讀更多...
由淺入深詳解四種分布式鎖

由淺入深詳解四種分布式鎖

在多線程環境下&#xff0c;為了保證數據的線程安全&#xff0c;鎖保證同一時刻&#xff0c;只有一個可以訪問和更新共享數據。在單機系統我們可以使用synchronized鎖或者Lock鎖保證線程安全。synchronized鎖是Java提供的一種內置鎖&#xff0c;在單個JVM進程中提供線程之間的鎖…
閱讀更多...
小程序的數據綁定和事件綁定

小程序的數據綁定和事件綁定

小程序的數據綁定 1.需要渲染的數據放在index.js中的data里 Page({data: {info:HELLO WORLD,imgSrc:/images/1.jpg,randomNum:Math.random()*10,randomNum1:Math.random().toFixed(2)}, }) 2.在WXML中通過{{}}獲取數據 <view>{{info}}</view><image src"{{…
閱讀更多...
C++ std::thread

C++ std::thread

若要使用線程類std::thread&#xff0c;則需包含<thread>頭文件。 創建線程 std::thread表示一個線程。線程對象是不可復制或賦值的&#xff0c;但可以移動(move)&#xff0c;如移動構造或移動賦值。 當構造std::thread對象時&#xff0c;需給構造函數輸入一個參數&am…
閱讀更多...
RocketMQ 5.0 架構解析：如何基于云原生架構支撐多元化場景

RocketMQ 5.0 架構解析：如何基于云原生架構支撐多元化場景

作者&#xff1a;隆基 本文將從技術角度了解 RocketMQ 的云原生架構&#xff0c;了解 RocketMQ 如何基于一套統一的架構支撐多元化的場景。 文章主要包含三部分內容。首先介紹 RocketMQ 5.0 的核心概念和架構概覽&#xff1b;然后從集群角度出發&#xff0c;從宏觀視角學習 R…
閱讀更多...
最新文章

Copyright @ 2022~2023