SCSS(Sassy CSS)是 Sass 的一種語法,它擴展了 CSS,提供了一些強大的功能,如變量、嵌套、Mixin、繼承、運算等,使樣式開發更加靈活和高效。SCSS 是 CSS 的超集,這表示所有有效的 CSS 代碼也是有效的 SCSS 代碼。
以下是 SCSS 語法的詳細介紹:
1. 變量 ($ 符號)
SCSS 支持變量,變量可以存儲顏色、字體、尺寸等值,並在樣式表中重複使用。
scss 範例:
$primary-color: #3498db;
$font-stack: Helvetica, sans-serif;
$base-margin: 10px;
body {
font-family: $font-stack;
color: $primary-color;
margin: $base-margin;
}
css 結果:
body {
font-family: Helvetica, sans-serif;
color: #3498db;
margin: 10px;
}
2. 嵌套
SCSS 支持選擇器的嵌套,這使得樣式層次結構更加清晰,並且可以模仿 HTML 結構進行樣式設計。
scss 範例:
nav {
ul {
list-style: none;
}
li {
display: inline-block;
}
a {
text-decoration: none;
color: $primary-color;
&:hover {
text-decoration: underline;
}
}
}
css 結果:
nav ul {
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
text-decoration: none;
color: #3498db;
}
nav a:hover {
text-decoration: underline;
}
3. 父選擇器引用 (& 符號)
在嵌套中,& 用來引用父選擇器。這在處理偽類、偽元素或修改父元素樣式時非常有用。
scss 範例:
.button {
display: inline-block;
padding: 10px 20px;
&:hover {
background-color: darken($primary-color, 10%);
}
&.active {
background-color: $primary-color;
}
}
css 結果:
.button {
display: inline-block;
padding: 10px 20px;
}
.button:hover {
background-color: #2980b9;
}
.button.active {
background-color: #3498db;
}
4. Mixin(混合)
Mixin 是一種可以重複使用的樣式塊,類似於函數。你可以通過 @mixin 來定義 Mixin,並使用 @include 來調用。
scss 範例:
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
.button {
@include border-radius(10px);
}
css 結果:
.button {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
5. 繼承 (@extend)
SCSS 支持繼承樣式,這樣可以讓一個選擇器繼承另一個選擇器的樣式。
scss 範例:
.message {
padding: 10px;
border: 1px solid #ddd;
color: #333;
}
.success {
@extend .message;
border-color: green;
}
.error {
@extend .message;
border-color: red;
}
css 結果:
.message, .success, .error {
padding: 10px;
border: 1px solid #ddd;
color: #333;
}
.success {
border-color: green;
}
.error {
border-color: red;
}
6. 運算
SCSS 支持數字、顏色、字串等運算,可以在樣式中進行加減乘除或顏色操作。
scss 數字運算:
$base-padding: 10px;
.container {
padding: $base-padding * 2;
}
css 結果:
.container {
padding: 20px;
}
scss 顏色運算:
$primary-color: #3498db;
.button {
background-color: lighten($primary-color, 10%);
}
.alert {
background-color: darken($primary-color, 10%);
}
css 結果:
.button {
background-color: #5dade2;
}
.alert {
background-color: #2980b9;
}
7. 條件與循環
SCSS 允許使用條件語句和循環來控制樣式的生成。
scss: @if 和 @else 條件:
$theme: light;
body {
@if $theme == light {
background-color: white;
color: black;
} @else {
background-color: black;
color: white;
}
}
css 結果:
body {
background-color: white;
color: black;
}
scss: @for 循環:
@for $i from 1 through 3 {
.col-#{$i} {
width: 100% / $i;
}
}
css 結果:
.col-1 {
width: 100%;
}
.col-2 {
width: 50%;
}
.col-3 {
width: 33.3333%;
}
8. 部分(Partials)與導入
SCSS 支持將樣式拆分成多個文件,然後使用 @import 導入它們。這樣可以讓代碼更具結構性。
假設你有一個 _variables.scss 文件:
scss
// _variables.scss
$primary-color: #3498db;
在主 SCSS 文件中導入:
scss
// styles.scss
@import 'variables';
body {
color: $primary-color;
}
css 結果:
body {
color: #3498db;
}
注意:使用 @import 時,導入的文件名需要以 _ 開頭,這樣它不會被單獨編譯成 CSS 文件。
9. 插值 (#{})
插值用來將變量或運算結果插入到選擇器或屬性中。
scss 範例:
$size: large;
.icon-#{$size} {
font-size: 32px;
}
css 結果:
.icon-large {
font-size: 32px;
}
10. 顏色函數
SCSS 提供了大量的內建顏色函數來操作顏色值,比如 lighten、darken、fade-in、fade-out 等。
scss 範例:
$primary-color: #3498db;
.button {
background-color: lighten($primary-color, 20%);
border-color: darken($primary-color, 10%);
}
小結
SCSS 提供了許多強大的功能,讓你可以以更具模組化和可維護性的方式來編寫樣式。這些功能包括:
變量:存儲重複使用的值。
嵌套:更清晰的層次結構。
Mixin 和繼承:重複使用樣式片段,避免代碼重複。
運算:在樣式中進行數值和顏色運算。
條件和循環:動態生成樣式。
這些功能幫助開發者更高效地管理樣式表,特別是在大型項目中,SCSS 可以顯著提高開發和維護的效率。如果你有更多問題,隨時告訴我!