Ellie's Blog
0%

SASS 變數命名的方法

發表於

版權聲明

本篇是將文章內容整理濃縮，作為學習之用，下文會一一附上原文連結，如有侵權，經告知之後會立即撤下

引用文章

sass 命名變數 快速提示 模組化命名 SASS 變數

Sass 的顏色變數命名方式

筆記

怎樣是好的命名方式?

  • 這是我看完文章後的總結 有不準確之處煩請指教
  • 大範圍的寫出特徵 方便查找
  • 例如: 命名顏色
    • 用在哪裡 boder
    • 會出現的通用字 color
    • 想要的顏色 blue
    • 想要深淺 light

命名顏色 怎樣才不會混亂?

  • 先命名 顏色
    • RGBA 變成 敘述
    • #AEB8C3 變成 $color-light-gray
  • 應用到元件
    • $boder-color: $color-light-gray

常見的變數名稱 -針對元件

Sass 變數(Variables)

1
2
3
4
5
6
7
8
9
$theme-color: #fff;
$text-color: black;
$table-color: rgba(0, 0, 0, .25);
$link-hover-color: darken(#fff,20%);

$font-md：18px-2px;
$font-lg: 16px * 1.5 ;
$font-lg: $font-md * 1.5 ;

常見的變數名稱- 針對顏色

1
2
3
4
5
6
7
8
$primary: $blue !default;
$secondary: $gray-600 !default;
$success: $green !default;
$info: $cyan !default;
$warning: $yellow !default;
$danger: $red !default;
$light: $gray-100 !default;
$dark: $gray-900 !default;

參考bootstrap 實用的變數名稱

bootstrap/_variables.scss at main · twbs/bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
$body-bg: $white !default;
$body-color: $gray-900 !default;
$body-text-align: null !default;

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px,
) !default;

$border-widths: (
  1: 1px,
  2: 2px,
  3: 3px,
  4: 4px,
  5: 5px,
) !default;

$font-size-root: null !default;
$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
$font-size-sm: $font-size-base * 0.875 !default;
$font-size-lg: $font-size-base * 1.25 !default;

$h1-font-size: $font-size-base * 2.5 !default;
$h2-font-size: $font-size-base * 2 !default;
$h3-font-size: $font-size-base * 1.75 !default;
$h4-font-size: $font-size-base * 1.5 !default;
$h5-font-size: $font-size-base * 1.25 !default;
$h6-font-size: $font-size-base !default;