Vue

SCSS 入門：變數、巢狀、混入、繼承

& ,> ,+,~

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.onclick{
  //自己
  &.onclick{
      color:green;
     cursor: pointer;
  }
  //children-必須是親生的才可以
  > .icon{
    color:#2196f3;
  }
  //同一階的第一個
  + .content {     
    color:red; 
  } 
  //~，同一階-弟弟妹妹們都獲選
  ~ .test{
    color:blue;
  }

&

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.menu {
  .open & {
   display:flex;
   color:green;
   font-size:38px; 
  }
}
//
編譯後
.menu {
  .open & {
   display:flex;
   color:green;
   font-size:38px;
  }
}

&

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
scss
.list {
 color: red;

  &__item {
    color: cornflowerblue;

    &--active {
      color: blue;
    }
  }
}
/*編譯後
.list {
  display: flex;
}

.list__item {
  color: red;
}

.list__item--active {
  color: blue;
}

變數 Variables:$開頭

Scss

1
2
3
4
5
6
7
$font-stack:  Helvetica, sans-serif;
$primary-color: #2196f3;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

變數編譯後Css

1
2
3
4
5
body {
  font: 100% Helvetica, sans-serif;
  color: #2196f3;
}

巢狀

Scss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
    &:hover {
      color: red;
    }
  }
}

巢狀編譯後Css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}
nav a:hover {
  color: red;
}

混入 Mixins

@mixin，@include

Scss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 經常重複使用的樣式
@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}

// 需要套用樣式的程式碼
.box { 
  @include transform(rotate(30deg));
}
.avatar { 
  @include transform(rotate(90deg));
}

混入 Mixins編譯後Css

1
2
3
4
5
6
7
8
9
10
.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}
.avatar {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

混繼承 Extent/Inderitance

@mixin，@include

Scss

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
/* This CSS will print because %message-shared is extended. */
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

// This CSS won't print because %equal-heights is never extended.
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}

%flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.header {
  @extend %flex-center;
  background-color: red;
}

.section {
  @extend %flex-center;
  background-color: blue;
}

.footer {
  @extend %flex-center;
  background-color: green;
}

混繼承 Extent編譯後Css

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
32
33
34
35
36
/* This CSS will print because %message-shared is extended. */
.message, .success, .error, .warning {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

.header, .section, .footer {
  display: flex;
  justify-content: center;
  align-items: center;
}

.header {
  background-color: red;
}

.section {
  background-color: blue;
}

.footer {
  background-color: green;
}

@mixin 和 @extend 使用

@mixin 的好處:減少重複撰寫樣式，卻也可能造成編譯後的 CSS 樣式大量重複，使檔案異常肥大。

@mixin 和 @extend 兩者的使用時機與差異

是否需傳遞參數
是否需考慮編譯後 CSS 大小

模組 Modules

編譯前 SCSS：要作為模組載入的 SCSS 檔案，名稱必須帶有底線，例如 _base.scss。