CSS預處理器對比：Sass、Less與Stylus如何選擇

引言

CSS預處理器已成為現代前端開發的標準工具，它們通過添加編程特性來增強純CSS的功能，使樣式表更加模塊化、可維護且高效。在眾多預處理器中，Sass、Less和Stylus是三個最流行的選擇，它們各自擁有獨特的語法和功能特點。本文將深入比較這三種預處理器，通過詳細的代碼示例和實際應用場景，幫助你根據項目需求選擇最適合的工具。

1. 概述比較

在深入代碼細節前，先看一下三種預處理器的基本情況：

特性SassLessStylus
誕生時間2006年2009年2010年
語法風格兩種語法：.scss和.sass類CSS語法靈活語法，可省略大部分符號
開發語言最初Ruby，現在Dart/JSJavaScriptJavaScript
學習曲線中等較低較高
社區生態非常龐大龐大相對較小
框架集成廣泛支持廣泛支持有限支持

2. 語法與基本特性對比

2.1 變量定義

Sass
// Sass變量使用$符號
$primary-color: #333;
$secondary-color: #777;
$font-stack: Helvetica, sans-serif;body {color: $primary-color;font-family: $font-stack;
}// Sass的變量支持作用域
.container {$local-width: 100%;width: $local-width;
}
Less
// Less變量使用@符號
@primary-color: #333;
@secondary-color: #777;
@font-stack: Helvetica, sans-serif;body {color: @primary-color;font-family: @font-stack;
}// Less的變量也支持作用域
.container {@local-width: 100%;width: @local-width;
}
Stylus
// Stylus變量不需要特殊符號，但也可以使用$
primary-color = #333
secondary-color = #777
font-stack = Helvetica, sans-serifbodycolor primary-colorfont-family font-stack// Stylus的變量也支持作用域
.containerlocal-width = 100%width local-width

2.2 嵌套規則

Sass
// Sass嵌套規則
nav {background-color: #fff;ul {margin: 0;padding: 0;list-style: none;li {display: inline-block;a {display: block;padding: 6px 12px;text-decoration: none;&:hover {background-color: #eee;}}}}
}
Less
// Less嵌套規則
nav {background-color: #fff;ul {margin: 0;padding: 0;list-style: none;li {display: inline-block;a {display: block;padding: 6px 12px;text-decoration: none;&:hover {background-color: #eee;}}}}
}
Stylus
// Stylus嵌套規則
navbackground-color #fffulmargin 0padding 0list-style nonelidisplay inline-blockadisplay blockpadding 6px 12pxtext-decoration none&:hoverbackground-color #eee

2.3 混合(Mixins)

Sass
// Sass混合定義
@mixin border-radius($radius) {-webkit-border-radius: $radius;-moz-border-radius: $radius;-ms-border-radius: $radius;border-radius: $radius;
}// 使用混合
.box {@include border-radius(10px);
}// 帶參數默認值的混合
@mixin box-shadow($x: 0, $y: 0, $blur: 1px, $color: #000) {-webkit-box-shadow: $x $y $blur $color;-moz-box-shadow: $x $y $blur $color;box-shadow: $x $y $blur $color;
}.panel {@include box-shadow(2px, 2px, 5px, rgba(0, 0, 0, 0.5));
}// 可變參數混合
@mixin transition($transitions...) {-webkit-transition: $transitions;-moz-transition: $transitions;transition: $transitions;
}.fade {@include transition(color 0.3s ease-in, background-color 0.5s ease-out);
}
Less
// Less混合定義
.border-radius(@radius) {-webkit-border-radius: @radius;-moz-border-radius: @radius;-ms-border-radius: @radius;border-radius: @radius;
}// 使用混合
.box {.border-radius(10px);
}// 帶參數默認值的混合
.box-shadow(@x: 0, @y: 0, @blur: 1px, @color: #000) {-webkit-box-shadow: @x @y @blur @color;-moz-box-shadow: @x @y @blur @color;box-shadow: @x @y @blur @color;
}.panel {.box-shadow(2px, 2px, 5px, rgba(0, 0, 0, 0.5));
}// 可變參數混合
.transition(@transitions...) {-webkit-transition: @transitions;-moz-transition: @transitions;transition: @transitions;
}.fade {.transition(color 0.3s ease-in, background-color 0.5s ease-out);
}
Stylus
// Stylus混合定義
border-radius(radius)-webkit-border-radius radius-moz-border-radius radius-ms-border-radius radiusborder-radius radius// 使用混合
.boxborder-radius(10px)// 帶參數默認值的混合
box-shadow(x = 0, y = 0, blur = 1px, color = #000)-webkit-box-shadow x y blur color-moz-box-shadow x y blur colorbox-shadow x y blur color.panelbox-shadow(2px, 2px, 5px, rgba(0, 0, 0, 0.5))// 可變參數混合
transition(args...)-webkit-transition args-moz-transition argstransition args.fadetransition(color 0.3s ease-in, background-color 0.5s ease-out)

3. 高級特性對比

3.1 繼承(Extend)

Sass
// Sass繼承
.message {border: 1px solid #ccc;padding: 10px;color: #333;
}.success {@extend .message;border-color: green;
}.error {@extend .message;border-color: red;
}// 占位選擇器(Placeholder Selectors)
%btn-base {display: inline-block;padding: 6px 12px;text-align: center;border-radius: 4px;
}.btn-primary {@extend %btn-base;background-color: #007bff;color: white;
}.btn-secondary {@extend %btn-base;background-color: #6c757d;color: white;
}
Less
// Less繼承
.message {border: 1px solid #ccc;padding: 10px;color: #333;
}.success {&:extend(.message);border-color: green;
}.error {&:extend(.message);border-color: red;
}// Less中沒有占位選擇器的概念，但可以使用混合實現類似功能
.btn-base() {display: inline-block;padding: 6px 12px;text-align: center;border-radius: 4px;
}.btn-primary {.btn-base();background-color: #007bff;color: white;
}.btn-secondary {.btn-base();background-color: #6c757d;color: white;
}
Stylus
// Stylus繼承
.messageborder 1px solid #cccpadding 10pxcolor #333.success@extend .messageborder-color green.error@extend .messageborder-color red// Stylus也支持占位符選擇器
$btn-basedisplay inline-blockpadding 6px 12pxtext-align centerborder-radius 4px.btn-primary@extend $btn-basebackground-color #007bffcolor white.btn-secondary@extend $btn-basebackground-color #6c757dcolor white

3.2 函數和運算

Sass
// Sass函數和運算
$base-size: 16px;// 自定義函數
@function calculate-width($col-count, $total-cols: 12) {@return percentage($col-count / $total-cols);
}.container {// 數學運算padding: $base-size / 2;// 函數調用width: calculate-width(8);
}// 顏色函數
.button {background-color: #3498db;&:hover {// 顏色變暗background-color: darken(#3498db, 15%);}&.light {// 顏色變亮background-color: lighten(#3498db, 15%);}&.transparent {// 透明度調整background-color: rgba(#3498db, 0.5);}
}// 字符串函數
$font-path: 'assets/fonts/';
$font-name: 'opensans';
$font-file: $font-path + $font-name + '.woff';@font-face {font-family: 'Open Sans';src: url(#{$font-file});
}
Less
// Less函數和運算
@base-size: 16px;// 自定義函數（通過混合實現）
.calculate-width(@col-count, @total-cols: 12) {@result: percentage(@col-count / @total-cols);// Less混合返回值& { width: @result; }
}.container {// 數學運算padding: @base-size / 2;// 函數調用.calculate-width(8);
}// 顏色函數
.button {background-color: #3498db;&:hover {// 顏色變暗background-color: darken(#3498db, 15%);}&.light {// 顏色變亮background-color: lighten(#3498db, 15%);}&.transparent {// 透明度調整background-color: fade(#3498db, 50%);}
}// 字符串函數
@font-path: 'assets/fonts/';
@font-name: 'opensans';
@font-file: @font-path + @font-name + '.woff';@font-face {font-family: 'Open Sans';src: url(@{font-file});
}
Stylus
// Stylus函數和運算
base-size = 16px// 自定義函數
calculate-width(col-count, total-cols = 12)return percentage(col-count / total-cols).container// 數學運算padding base-size / 2// 函數調用width calculate-width(8)// 顏色函數
.buttonbackground-color #3498db&:hover// 顏色變暗background-color darken(#3498db, 15%)&.light// 顏色變亮background-color lighten(#3498db, 15%)&.transparent// 透明度調整background-color rgba(#3498db, 0.5)// 字符串函數
font-path = 'assets/fonts/'
font-name = 'opensans'
font-file = font-path + font-name + '.woff'@font-facefont-family 'Open Sans'src url(font-file)

3.3 條件語句和循環

Sass
// Sass條件語句
$theme: 'dark';.container {@if $theme == 'light' {background-color: #fff;color: #333;} @else if $theme == 'dark' {background-color: #333;color: #fff;} @else {background-color: #f5f5f5;color: #555;}
}// Sass循環
// for循環
@for $i from 1 through 5 {.col-#{$i} {width: 20% * $i;}
}// each循環（遍歷列表）
$social-colors: (facebook: #3b5998,twitter: #1da1f2,instagram: #e1306c
);@each $platform, $color in $social-colors {.btn-#{$platform} {background-color: $color;color: white;}
}// while循環
$i: 1;
$max: 5;@while $i <= $max {.mt-#{$i} {margin-top: $i * 0.25rem;}$i: $i + 1;
}
Less
// Less條件語句（通過混合實現）
@theme: 'dark';.theme-styles() when (@theme = 'light') {background-color: #fff;color: #333;
}.theme-styles() when (@theme = 'dark') {background-color: #333;color: #fff;
}.theme-styles() when (default()) {background-color: #f5f5f5;color: #555;
}.container {.theme-styles();
}// Less循環
// for循環 (使用循環混合)
.generate-columns(@i: 1) when (@i <= 5) {.col-@{i} {width: 20% * @i;}.generate-columns(@i + 1);
}
.generate-columns();// each循環
@social-colors: {facebook: #3b5998;twitter: #1da1f2;instagram: #e1306c;
}.generate-social-btns(@i: 1) when (@i <= length(@social-colors)) {@platform: extract(keys(@social-colors), @i);@color: extract(values(@social-colors), @i);.btn-@{platform} {background-color: @color;color: white;}.generate-social-btns(@i + 1);
}
.generate-social-btns();// while循環 (使用遞歸混合)
.generate-margins(@i: 1) when (@i <= 5) {.mt-@{i} {margin-top: @i * 0.25rem;}.generate-margins(@i + 1);
}
.generate-margins();
Stylus
// Stylus條件語句
theme = 'dark'.containerif theme == 'light'background-color #fffcolor #333else if theme == 'dark'background-color #333color #fffelsebackground-color #f5f5f5color #555// Stylus循環
// for循環
for i in (1..5).col-{i}width 20% * i// each循環
social-colors = {facebook: #3b5998,twitter: #1da1f2,instagram: #e1306c
}for platform, color in social-colors.btn-{platform}background-color colorcolor white// while循環
i = 1
max = 5while i <= max.mt-{i}margin-top i * 0.25remi = i + 1

4. 實際應用場景

4.1 響應式網格系統

Sass
// Sass實現響應式網格系統
$grid-columns: 12;
$grid-gutter: 30px;
$breakpoints: (xs: 0,sm: 576px,md: 768px,lg: 992px,xl: 1200px
);.container {width: 100%;padding-right: $grid-gutter / 2;padding-left: $grid-gutter / 2;margin-right: auto;margin-left: auto;@each $breakpoint, $width in $breakpoints {@if $width > 0 {@media (min-width: $width) {max-width: $width;}}}
}.row {display: flex;flex-wrap: wrap;margin-right: -$grid-gutter / 2;margin-left: -$grid-gutter / 2;
}@each $breakpoint, $width in $breakpoints {$infix: if($breakpoint == 'xs', '', '-#{$breakpoint}');@media (min-width: $width) {@for $i from 1 through $grid-columns {.col#{$infix}-#{$i} {flex: 0 0 percentage($i / $grid-columns);max-width: percentage($i / $grid-columns);padding-right: $grid-gutter / 2;padding-left: $grid-gutter / 2;}}}
}
Less
// Less實現響應式網格系統
@grid-columns: 12;
@grid-gutter: 30px;
@breakpoint-xs: 0;
@breakpoint-sm: 576px;
@breakpoint-md: 768px;
@breakpoint-lg: 992px;
@breakpoint-xl: 1200px;.container {width: 100%;padding-right: @grid-gutter / 2;padding-left: @grid-gutter / 2;margin-right: auto;margin-left: auto;@media (min-width: @breakpoint-sm) {max-width: @breakpoint-sm;}@media (min-width: @breakpoint-md) {max-width: @breakpoint-md;}@media (min-width: @breakpoint-lg) {max-width: @breakpoint-lg;}@media (min-width: @breakpoint-xl) {max-width: @breakpoint-xl;}
}.row {display: flex;flex-wrap: wrap;margin-right: -@grid-gutter / 2;margin-left: -@grid-gutter / 2;
}.make-grid-columns(@prefix, @grid-columns) {.col-loop(@i) when (@i <= @grid-columns) {.col@{prefix}-@{i} {flex: 0 0 percentage(@i / @grid-columns);max-width: percentage(@i / @grid-columns);padding-right: @grid-gutter / 2;padding-left: @grid-gutter / 2;}.col-loop(@i + 1);}.col-loop(1);
}// XS breakpoint
.make-grid-columns('', @grid-columns);// SM breakpoint
@media (min-width: @breakpoint-sm) {.make-grid-columns('-sm', @grid-columns);
}// MD breakpoint
@media (min-width: @breakpoint-md) {.make-grid-columns('-md', @grid-columns);
}// LG breakpoint
@media (min-width: @breakpoint-lg) {.make-grid-columns('-lg', @grid-columns);
}// XL breakpoint
@media (min-width: @breakpoint-xl) {.make-grid-columns('-xl', @grid-columns);
}
Stylus
// Stylus實現響應式網格系統
grid-columns = 12
grid-gutter = 30px
breakpoints = {xs: 0,sm: 576px,md: 768px,lg: 992px,xl: 1200px
}.containerwidth 100%padding-right grid-gutter / 2padding-left grid-gutter / 2margin-right automargin-left autofor breakpoint, width in breakpointsif width > 0@media (min-width: width)max-width width.rowdisplay flexflex-wrap wrapmargin-right -(grid-gutter / 2)margin-left -(grid-gutter / 2)for breakpoint, width in breakpointsinfix = breakpoint == 'xs' ? '' : '-' + breakpoint@media (min-width: width)for i in (1..grid-columns).col{infix}-{i}flex 0 0 percentage(i / grid-columns)max-width percentage(i / grid-columns)padding-right grid-gutter / 2padding-left grid-gutter / 2

4.2 主題系統

Sass
// Sass主題系統
// _variables.scss
$themes: (light: (bg-color: #ffffff,text-color: #333333,primary-color: #4285f4,secondary-color: #fbbc05,border-color: #e0e0e0),dark: (bg-color: #121212,text-color: #f5f5f5,primary-color: #8ab4f8,secondary-color: #ffd04b,border-color: #333333)
);// _mixins.scss
@mixin themed() {@each $theme, $map in $themes {.theme-#{$theme} & {$theme-map: () !global;@each $key, $value in $map {$theme-map: map-merge($theme-map, ($key: $value)) !global;}@content;$theme-map: null !global;}}
}@function t($key) {@return map-get($theme-map, $key);
}// main.scss
@import 'variables';
@import 'mixins';body {margin: 0;font-family: Arial, sans-serif;transition: all 0.3s ease;
}.card {@include themed() {background-color: t('bg-color');color: t('text-color');border: 1px solid t('border-color');}border-radius: 8px;padding: 20px;margin: 10px;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}.button {@include themed() {background-color: t('primary-color');color: t('bg-color');border: 1px solid t('primary-color');&:hover {background-color: darken(t('primary-color'), 10%);}}padding: 10px 15px;border-radius: 4px;cursor: pointer;transition: all 0.2s ease;
}// 使用主題
.theme-light {// light theme is active
}.theme-dark {// dark theme is active
}
Less
// Less主題系統
// variables.less
@themes: {light: {bg-color: #ffffff;text-color: #333333;primary-color: #4285f4;secondary-color: #fbbc05;border-color: #e0e0e0;};dark: {bg-color: #121212;text-color: #f5f5f5;primary-color: #8ab4f8;secondary-color: #ffd04b;border-color: #333333;};
};// mixins.less
.themed-styles(@rules) {each(@themes, {.theme-@{key} & {@theme-props: @value;@rules();}});
}.t(@property) {@result: @theme-props[@@property];
}// main.less
@import 'variables.less';
@import 'mixins.less';body {margin: 0;font-family: Arial, sans-serif;transition: all 0.3s ease;
}.card {.themed-styles({background-color: .t(bg-color);color: .t(text-color);border: 1px solid .t(border-color);});border-radius: 8px;padding: 20px;margin: 10px;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}.button {.themed-styles({background-color: .t(primary-color);color: .t(bg-color);border: 1px solid .t(primary-color);&:hover {background-color: darken(.t(primary-color), 10%);}});padding: 10px 15px;border-radius: 4px;cursor: pointer;transition: all 0.2s ease;
}// 使用主題
.theme-light {// light theme is active
}.theme-dark {// dark theme is active
}
Stylus
// Stylus主題系統
// variables.styl
themes = {light: {bg-color: #ffffff,text-color: #333333,primary-color: #4285f4,secondary-color: #fbbc05,border-color: #e0e0e0},dark: {bg-color: #121212,text-color: #f5f5f5,primary-color: #8ab4f8,secondary-color: #ffd04b,border-color: #333333}
}// mixins.styl
themed()for theme, props in themes.theme-{theme} &theme-map = props{block}t(key)return theme-map[key]// main.styl
@import 'variables'
@import 'mixins'bodymargin 0font-family Arial, sans-seriftransition all 0.3s ease.card+themed()background-color t('bg-color')color t('text-color')border 1px solid t('border-color')border-radius 8pxpadding 20pxmargin 10pxbox-shadow 0 2px 5px rgba(0, 0, 0, 0.1).button+themed()background-color t('primary-color')color t('bg-color')border 1px solid t('primary-color')&:hoverbackground-color darken(t('primary-color'), 10%)padding 10px 15pxborder-radius 4pxcursor pointertransition all 0.2s ease// 使用主題
.theme-light// light theme is active.theme-dark// dark theme is active

5. 各預處理器的優缺點分析

5.1 Sass

優點：

  1. 功能最為強大完整，擁有最豐富的功能集
  2. 有兩種語法選擇：縮進式的.sass和兼容CSS的.scss
  3. 社區最大，資源最豐富，有大量現成的庫和框架（如Bootstrap、Foundation等）
  4. 最成熟的變量、函數和模塊系統
  5. 出色的錯誤報告和調試工具
  6. 可擴展性強，支持自定義函數和插件

缺點：

  1. 相比Less，安裝和配置稍微復雜一些
  2. 完整學習所有功能需要較長時間
  3. 編譯速度相對較慢，尤其是大型項目

5.2 Less

優點：

  1. 語法最接近CSS，學習曲線低
  2. 基于JavaScript，可以在瀏覽器端運行
  3. 安裝配置簡單，易于集成
  4. 與JavaScript結合緊密，便于Web開發者上手
  5. 編譯速度快，適合中小型項目

缺點：

  1. 功能不如Sass豐富，特別是在高級編程功能方面
  2. 沒有真正的函數功能，只能通過混合模擬
  3. 運行時錯誤處理不如Sass完善
  4. 擴展性相對較弱

5.3 Stylus

優點：

  1. 語法最為靈活，幾乎所有標點和括號都是可選的
  2. 具有強大的編程能力，接近JavaScript的表達能力
  3. 內置函數庫豐富
  4. 極簡主義風格，代碼最為簡潔
  5. 性能優秀，編譯速度快

缺點：

  1. 社區和生態系統相對較小
  2. 靈活的語法可能導致代碼風格不統一
  3. 學習曲線較陡峭，特別是對于CSS新手
  4. 文檔和資源不如Sass和Less豐富
  5. 主流框架和庫的支持較少

6. 實際項目選擇建議

根據上述對比和分析，以下是針對不同場景的CSS預處理器選擇建議：

6.1 何時選擇Sass

適合以下場景：

  • 大型復雜項目，需要完整的功能集
  • 團隊已有Sass經驗，或者項目與使用Sass的庫有集成需求
  • 需要使用高級功能，如模塊系統、占位選擇器等
  • 使用Ruby on Rails、Angular等已集成Sass的框架
  • 長期維護的企業級應用，需要良好的擴展性和模塊化

推薦使用Sass的情況：

// 如果你需要使用以下功能，推薦Sass
// 1. 模塊化系統
@use 'buttons';
@use 'forms';// 2. 占位選擇器
%shared-style {border: 1px solid #ccc;padding: 10px;
}.button {@extend %shared-style;// 更多樣式...
}// 3. 強大的內置函數
$colors: (primary: #3498db,secondary: #2ecc71
);@function color($name) {@return map-get($colors, $name);
}.element {color: color(primary);
}

6.2 何時選擇Less

適合以下場景：

  • 中小型項目，需要快速上手
  • 團隊主要由Web前端開發者組成，熟悉JavaScript
  • 項目與使用Less的庫集成（如早期的Bootstrap）
  • 希望配置簡單，構建速度快
  • 項目需要在瀏覽器中直接編譯CSS

推薦使用Less的情況：

// 如果你需要以下功能，推薦Less
// 1. 瀏覽器端編譯
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js"></script>// 2. 簡單的變量和混合
@main-color: #3498db;.button-style {background-color: @main-color;border-radius: 4px;
}.primary-button {.button-style();color: white;
}// 3. 與JavaScript結合緊密
@link-color: #428bca;
@link-color-hover: darken(@link-color, 15%);

6.3 何時選擇Stylus

適合以下場景：

  • 追求極簡語法和代碼簡潔
  • 有Node.js開發背景的團隊
  • 需要高性能編譯
  • 小型或實驗性項目
  • 喜歡靈活的編程風格

推薦使用Stylus的情況：

// 如果你喜歡以下特性，推薦Stylus
// 1. 極簡語法
bodyfont 14px/1.5 Arial, sans-serifbackground-color #f5f5f5// 2. 強大的內置函數和表達式
sum(a, b)a + bborder-radius()-webkit-border-radius arguments-moz-border-radius argumentsborder-radius argumentsboxwidth sum(10px, 20px)border-radius 5px// 3. 隱式混合調用
@import 'mixins'.elementbutton-style() // 無需使用特殊符號調用混合

7. 總結

每種CSS預處理器都有其獨特的優勢和使用場景：

Sass 是功能最完整、社區最龐大的選擇，適合大型項目和長期維護的應用。它提供了強大的模塊系統、函數和混合功能，同時支持兩種語法格式。雖然學習曲線較陡，但其強大的功能和生態系統使其成為當前最流行的CSS預處理器。

Less 以其接近原生CSS的語法和簡單的學習曲線脫穎而出，非常適合中小型項目或需要快速上手的團隊。它基于JavaScript，可以在瀏覽器端運行，配置簡單，構建速度快。

Stylus 提供了最靈活的語法和強大的編程能力，適合追求代碼簡潔性和表達力的開發者。它的語法幾乎完全自由，提供了豐富的內置函數，但社區相對較小，資源相對較少。

最終的選擇應該基于以下因素：

  • 項目規模和復雜度
  • 團隊經驗和技術棧
  • 與現有框架或庫的兼容性
  • 性能需求
  • 開發效率和維護性考慮

無論選擇哪種預處理器，它們都能顯著提高CSS的可維護性、可重用性和編寫效率，是現代前端開發不可或缺的工具。

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

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

相關文章

基于Docker、Kubernetes和Jenkins的百節點部署架構圖及信息流描述

基于Docker、Kubernetes和Jenkins的百節點部署架構圖及信息流描述

以下是基于Docker、Kubernetes和Jenkins的百節點部署架構圖及信息流描述，使用文本和Mermaid語法表示： 架構圖（Mermaid語法） #mermaid-svg-WWCAqL1oWjvRywVJ {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-WWCAq…
閱讀更多...
js中get，set用法

js中get，set用法

1、作為對象的訪問器屬性 //使用Object.definePropertylet obj {_a:123};Object.defineProperty(obj, "a", {get() {return this._a;},set(val) {this._aval},});console.log(obj.a); //123obj.a456console.log(obj.a) // 456 //使用對象字面量let obj {_a:123,ge…
閱讀更多...
Steam游戲服務器攻防全景解讀——如何構建游戲級抗DDoS防御體系？

Steam游戲服務器攻防全景解讀——如何構建游戲級抗DDoS防御體系？

Steam游戲服務器的DDoS攻防體系設計&#xff0c;從協議層漏洞利用到業務連續性保障&#xff0c;深度拆解反射型攻擊、TCP狀態耗盡等7類威脅場景。基于全球15個游戲廠商攻防實戰數據&#xff0c;提供包含邊緣節點調度、AI流量指紋識別、SteamCMD加固配置的三維防護方案&#xff…
閱讀更多...
【AI】SpringAI 第四彈：接入本地大模型 Ollama

【AI】SpringAI 第四彈：接入本地大模型 Ollama

Ollama 是一個開源的大型語言模型服務工具。它的主要作用是幫助用戶快速在本地運行大模型&#xff0c; 簡化了在 Docker 容器內部署和管理大語言模型&#xff08;LLM&#xff09;的過程。 1. 確保Ollama 已經啟動 # 查看幫助文檔 ollama -h# 自動下載并啟動 ollama run deeps…
閱讀更多...
大語言模型的評估指標

大語言模型的評估指標

目錄 一、混淆矩陣 1. 混淆矩陣的結構&#xff08;二分類為例&#xff09; 2.從混淆矩陣衍生的核心指標 3.多分類任務的擴展 4. 混淆矩陣的實戰應用 二、分類任務核心指標 1. Accuracy&#xff08;準確率&#xff09; 2. Precision&#xff08;精確率&#xff09; 3. …
閱讀更多...
SpringBoot Gradle插件：構建與打包配置

SpringBoot Gradle插件：構建與打包配置

文章目錄 引言一、Spring Boot Gradle插件基礎二、依賴管理與配置三、應用打包配置四、啟動腳本與運行配置五、多環境構建與配置六、集成Docker與云原生支持七、實踐案例&#xff1a;自定義Spring Boot應用構建總結 引言 在Java生態系統中&#xff0c;Gradle作為一種靈活且強大…
閱讀更多...
Vue3 組件通信與插槽

Vue3 組件通信與插槽

Vue3 組件通信方式全解&#xff08;10種方案&#xff09; 一、組件通信方式概覽 通信方式適用場景數據流向復雜度Props/自定義事件父子組件簡單通信父 ? 子?v-model 雙向綁定父子表單組件父 ? 子??Provide/Inject跨層級組件通信祖先 → 后代??事件總線任意組件間通信任…
閱讀更多...
【KWDB 創作者計劃】_嵌入式硬件篇---數字電子器件

【KWDB 創作者計劃】_嵌入式硬件篇---數字電子器件

文章目錄 前言一、系列前綴（如 "74" 或 "54"）74（商用級）54（工業級）二、邏輯家族（如 "LS"、"HC"、"HCT" 等）TTL（晶體管-晶體管邏輯）家族CMOS（互補金屬氧化物半導體）家族BiCMOS（雙極 CMOS）家族三、功能編號（如…
閱讀更多...
黃勇的《架構探險：從Java到大數據》內容詳解

黃勇的《架構探險：從Java到大數據》內容詳解

《架構探險&#xff1a;從Java到大數據》內容詳解 1. 書籍核心主題 黃勇的《架構探險&#xff1a;從Java到大數據》是一本系統性探討架構設計演進的著作&#xff0c;結合Java技術棧和大數據場景&#xff0c;深入分析了從單體架構到分布式、微服務、云原生的演進路徑&#xff0…
閱讀更多...
【動手學強化學習】番外8-IPPO應用框架學習與復現

【動手學強化學習】番外8-IPPO應用框架學習與復現

文章目錄 一、待解決問題1.1 問題描述1.2 解決方法 二、方法詳述2.1 必要說明&#xff08;1&#xff09;MAPPO 與 IPPO 算法的區別在于什么地方&#xff1f;&#xff08;2&#xff09;IPPO 算法應用框架主要參考來源 2.2 應用步驟2.2.1 搭建基礎環境2.2.2 IPPO 算法實例復現&am…
閱讀更多...
驅動開發硬核特訓 · Day 17：深入掌握中斷機制與驅動開發中的應用實戰

驅動開發硬核特訓 · Day 17：深入掌握中斷機制與驅動開發中的應用實戰

&#x1f3a5; 視頻教程請關注 B 站&#xff1a;“嵌入式 Jerry” 一、前言 在嵌入式驅動開發中&#xff0c;“中斷”幾乎無處不在。無論是 GPIO 按鍵、串口通信、網絡設備&#xff0c;還是 SoC 上的各種控制器&#xff0c;中斷都扮演著核心觸發機制的角色。對中斷機制掌握程度…
閱讀更多...
通過門店銷售明細表用PySpark得到每月每個門店的銷冠和按月的同比環比數據

通過門店銷售明細表用PySpark得到每月每個門店的銷冠和按月的同比環比數據

假設我在Amazon S3上有銷售表的Parquet數據文件的路徑&#xff0c;包含ID主鍵、門店ID、日期、銷售員姓名和銷售額&#xff0c;需要分別用PySpark的SparkSQL和Dataframe API統計出每個月所有門店和各門店銷售額最高的人&#xff0c;不一定是一個人&#xff0c;以及他所在的門店…
閱讀更多...
PostgreSQL 常用日志

PostgreSQL 常用日志

PostgreSQL 常用日志詳解 PostgreSQL 提供了多種日志類型&#xff0c;用于監控數據庫活動、排查問題和優化性能。以下是 PostgreSQL 中最常用的日志類型及其配置和使用方法。 一、主要日志類型 日志類型文件位置主要內容用途服務器日志postgresql-<日期>.log服務器運行…
閱讀更多...
MySQL 存儲過程：解鎖數據庫編程的高效密碼

MySQL 存儲過程：解鎖數據庫編程的高效密碼

目錄 一、什么是存儲過程？二、創建存儲過程示例 1：創建一個簡單的存儲過程示例 2：創建帶輸入參數的存儲過程示例 3：創建帶輸出參數的存儲過程三、調用存儲過程調用無參數存儲過程調用帶輸入參數的存儲過程調用帶輸出參數的存儲過程四、存儲過程中的流控制語句示例 1：使用 …
閱讀更多...
基于STM32的物流搬運機器人

基于STM32的物流搬運機器人

功能&#xff1a;智能循跡、定距夾取、顏色切換、自動跟隨、自動避障、聲音夾取、藍牙遙控、手柄遙控、顏色識別夾取、循跡避障、循跡定距…… 包含內容&#xff1a;完整源碼、使用手冊、原理圖、視頻演示、PPT、論文參考、其余資料 資料只私聊
閱讀更多...
pg_jieba 中文分詞

pg_jieba 中文分詞

os: centos 7.9.2009 pg: 14.7 pg_jieba 依賴 cppjieba、limonp pg_jieba 下載 su - postgreswget https://github.com/jaiminpan/pg_jieba/archive/refs/tags/vmaster.tar.gzunzip ./pg_jieba-master cd ~/pg_jieba-mastercppjieba、limonp 下載 su - postgrescd ~/pg_jie…
閱讀更多...
基于Python+Flask的MCP SDK響應式文檔展示系統設計與實現

基于Python+Flask的MCP SDK響應式文檔展示系統設計與實現

以下是使用Python Flask HTML實現的MCP文檔展示系統&#xff1a; # app.py from flask import Flask, render_templateapp Flask(__name__)app.route(/) def index():return render_template(index.html)app.route(/installation) def installation():return render_templa…
閱讀更多...
【“星睿O6”AI PC開發套件評測】GPU矩陣指令算力，GPU帶寬和NPU算力測試

【“星睿O6”AI PC開發套件評測】GPU矩陣指令算力，GPU帶寬和NPU算力測試

【“星睿O6”AI PC開發套件評測】GPU矩陣指令算力&#xff0c;GPU帶寬和NPU算力測試 安謀科技、此芯科技與瑞莎計算機聯合打造了面向AI PC、邊緣、機器人等不同場景的“星睿O6”開發套件 該套件異構集成了Armv9 CPU核心、Arm Immortalis? GPU以及安謀科技“周易”NPU 開箱和…
閱讀更多...
【Go語言】RPC 使用指南（初學者版）

【Go語言】RPC 使用指南（初學者版）

RPC&#xff08;Remote Procedure Call&#xff0c;遠程過程調用&#xff09;是一種計算機通信協議&#xff0c;允許程序調用另一臺計算機上的子程序&#xff0c;就像調用本地程序一樣。Go 語言內置了 RPC 支持&#xff0c;下面我會詳細介紹如何使用。 一、基本概念 在 Go 中&…
閱讀更多...
11、Refs：直接操控元素——React 19 DOM操作秘籍

11、Refs：直接操控元素——React 19 DOM操作秘籍

一、元素操控的魔法本質 "Refs是巫師與麻瓜世界的連接通道&#xff0c;讓開發者能像操控魔杖般精準控制DOM元素&#xff01;"魔杖工坊的奧利凡德先生輕撫著魔杖&#xff0c;React/Vue的refs能量在杖尖躍動。 ——以神秘事務司的量子糾纏理論為基&#xff0c;揭示DOM…
閱讀更多...
最新文章

Copyright @ 2022~2023