scss 轉 css 在線轉換

https://33tool.com/scss_to_css/

變量

$primary-color: #000;

.main1 {
  background-color: $primary-color;
}

一、嵌套

1.1 父選擇器 & (Referencing Parent Selectors: &)

在嵌套 CSS 規則時，有時也需要直接使用嵌套外層的父選擇器，例如，當給某個元素設定 hover 樣式時，或者當 body 元素有某個 classname 時，可以用 & 代表嵌套規則外層的父選擇器。

出錯：

.main1 {
  a {
    :hover {
      color: red;
    }
  }
}

這樣直接轉換的時候生成的css

//這裏a和:hover中間有空格
.main1 a :hover { 
	color: red;
}

修復：下面使用&

.main1 {
  a {
    &:hover {
      color: red;
    }
  }
}

生成的CSS

.main1 a:hover {
	color: red;
}

1.2 屬性嵌套 (Nested Properties)

CSS

.funky {
	font: 20px/24px;
	font-family: fantasy;
	font-weight: bold;
}

scss

.funky {
  font: 20px/24px {
    family: fantasy;
    weight: bold;
  }
}

二、混合指令（@mixin）

混合指令（Mixin）用於定義可重複使用的樣式，避免了使用無語意的 class，比如 .float-left。混合指令可以包含所有的 CSS 規則，絕大部分 Sass 規則，甚至通過參數功能引入變量，輸出多樣化的樣式。

//@mixin 定義
@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

//@include 使用
.page-title {
  @include large-text; 
  padding: 4px;
  margin-top: 10px;
}

css

.page-title {
	font-family: Arial;
	font-size: 20px;
	font-weight: bold;
	color: #ff0000;
	padding: 4px;
	margin-top: 10px;
}

2.1 給混合器傳參

@mixin link-colors($normal, $hover, $visited) {
  color: $normal;

  &:hover {
    color: $hover;
  }

  &:visited {
    color: $visited;
  }
}

.main1 {
  a {
     @include link-colors(blue, red, green);
  }
}

生成

.main1 a {
	color: blue;
}
.main1 a:hover {
	color: red;
}
.main1 a:visited {
	color: green;
}

當你@include混合器時，有時候可能會很難區分每個參數是什麼意思，參數之間是一個什麼樣的順序。為了解決這個問題，sass允許通過語法$name: value的形式指定每個參數的值。這種形式的傳參，參數順序就不必再在乎了，只需要保證沒有漏掉參數即可：

a {
    @include link-colors(
      $normal: blue,
      $visited: green,
      $hover: red
  );
}

三、繼承和擴展 （@extend）

選擇器繼承是説一個選擇器可以繼承為另一個選擇器定義的所有樣式。這個通過@extend語法實現，如下代碼:

繼承類下面的類，也會被繼承

四、數據類型

SassScript 支持 6 種主要的數據類型：

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

插值語句 #{} (Interpolation: #{})

過 #{} 插值語句可以在選擇器或屬性名中使用變量：

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

css

p.foo {
  border-color: blue; 
}

五、控制指令 (Control Directives)

@if

當 @if 的表達式返回值不是 false 或者 null 時，條件成立，輸出 {} 內的代碼：

@if 聲明後面可以跟多個 @else if 聲明，或者一個 @else 聲明。如果 @if 聲明失敗，Sass 將逐條執行 @else if 聲明，如果全部失敗，最後執行 @else 聲明，例如：

@for

@for 指令可以在限制的範圍內重複輸出格式，每次按要求（變量的值）對輸出結果做出變動。這個指令包含兩種格式：

@for $var from <start> through <end>，或者 @for $var from <start> to <end>

區別在於 through 與 to 的含義：當使用 through 時，條件範圍包含 <start> 與 <end> 的值，而使用 to 時條件範圍只包含 <start> 的值不包含 <end> 的值。

另外，$var 可以是任何變量，比如 $i；<start> 和 <end> 必須是整數值。

@each

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

@each 將變量 $var 作用於值列表中的每一個項目，然後輸出結果，例如：

@while

@while 指令重複輸出格式直到表達式返回結果為 false。這樣可以實現比 @for 更復雜的循環，只是很少會用到。例如：

六、函數指令 (Function Directives)

@function 與 mixin 相同，也可以傳遞若干個全局變量給函數作為參數。一個函數可以含有多條語句，需要調用 @return 輸出結果。

七、Dart Sass 內置函數

https://sass-lang.com/documentation/modules/

從 Dart Sass 3.0.0 開始，全局內置函數（如 map-get、lighten 等）將被移除，必須通過模塊化語法 @use 導入 sass:xxx 模塊後才能使用。以下是基於新規範的分類整理，包含各模塊的常用函數及使用示例：

一、核心模塊（sass:core）

包含最基礎的工具函數（無需顯式導入，部分函數默認可用，但建議顯式導入）。

二、列表模塊（sass:list）

處理列表（有序值集合）的函數，需通過 @use "sass:list" 導入。

使用示例：

@use "sass:list";

$sizes: 10px 20px 30px;
@debug list.length($sizes); // 輸出 3
@debug list.nth($sizes, 2); // 輸出 20px

三、映射模塊（sass:map）

處理鍵值對映射的函數，需通過 @use "sass:map" 導入。

使用示例：

@use "sass:map";

$theme: (primary: #42b983, secondary: #35495e);
@debug map.get($theme, primary); // 輸出 #42b983
@debug map.keys($theme); // 輸出 (primary, secondary)

四、顏色模塊（sass:color）

處理顏色的函數，需通過 @use "sass:color" 導入。

使用示例：

@use "sass:color";

$primary: #42b983;
@debug color.lighten($primary, 10%); // 輸出 #5fca99
@debug color.rgba($primary, 0.8); // 輸出 rgba(66, 185, 131, 0.8)

五、數字模塊（sass:math）

處理數值計算的函數，需通過 @use "sass:math" 導入（注意：math 模塊需顯式啓用 precision 等配置）。

使用示例：

@use "sass:math";

$width: 150px;
@debug math.div($width, 2); // 輸出 75px（替代 / 運算）
@debug math.percentage(0.3); // 輸出 30%

六、字符串模塊（sass:string）

處理字符串的函數，需通過 @use "sass:string" 導入。

使用示例：

@use "sass:string";

$className: "active";
@debug string.length($className); // 輸出 6
@debug string.to-upper-case($className); // 輸出 "ACTIVE"

七、選擇器模塊（sass:selector）

處理 CSS 選擇器的函數，需通過 @use "sass:selector" 導入。

使用示例：

@use "sass:selector";

@debug selector.nest(".parent", ".child") → ".parent .child";
@debug selector.append(".btn", "--primary") → ".btn--primary";

模塊化語法注意事項

1. 導入方式：通過 @use "sass:模塊名" 導入（如 @use "sass:color"），函數需通過 模塊名.函數名 調用（如 color.lighten(...)）。
2. 別名設置：可通過 @use "sass:color" as c; 簡化調用（如 c.lighten(...)）。
3. 兼容性：Dart Sass 3.0.0+ 強制要求模塊化導入，舊版全局函數將失效，建議儘快遷移。

完整的模塊及函數列表可參考官方文檔：Sass 模塊化函數。

vue 中安裝scss

npm install sass --save-dev

vue 中 vite全局導入

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue(), vueDevTools()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/assets/style.scss";`,
      },
    },
  },
})