SCSS 語法使用方法(@mixin @extend @function)

Estimated read time 2 min read

SCSS 是用來開發CSS而發明的一種擴展語言,CSS 既非標準程式語言,也不是標記語言, 而是一種風格頁面語言(style sheet language),比起SCSS來說CSS在開發雖然不難但如果開發專案太過膨大,就會發現它很多贅詞,且不好閱讀。

標準CSS

p {
  color: red;
}

引用到頁面

<link href="styles/style.css" rel="stylesheet" type="text/css" />
<style>
p {
  color: red;
}
</style>
<p style="color:red;">text</p>

SCSS基本語法介紹

SCSS 一開始是叫做SASS,SASS去除了全部多餘的符號大誇號分號等等,階層用空白來判斷類似python,直觀起來比CSS要乾淨不少,最重要的是它是使用巢狀結構來編寫,巢狀結構使得SASS愈來愈多人使用,維護專案因為是不同人寫得常常要花很多時間了解前人再寫甚麼,才有辦法維護,CSS的繼承的特性很方便同時也能很汙染,巢狀結構的好用過就知道。

HTML

<div class="bg_box">
<p class="o1">test1</p>
<p class="o2">test2</p>
</div>

CSS

.bg_box .o1{
	color:#000;
}
.bg_box .o1:hover{
	color:#ccc;
}
.bg_box .o2{
	color:#0f0;
}

SCSS

.bg_box{
	.o1{
		color:#000;
		&:hover{
			color:#ccc;
		}
	}
	.o2{
		color:#0f0;
	}
}

SCSS 變數


$font_color: #333;
$bg_color: #eee;
$size: 10px;


.test {
    color: $font_color;
    background: $bg_color;
    width: $size;
    height: $size;
}

四則運算


$big-width: $width + $padding;
$subtraction-width: $width - $padding;
$multiplication-width: $width * $padding;
$column-width: $total-width / $columns;
$division-width: $width % $padding;

@mixin

@mixin font_color_01{
   color:#000;
}

// 使用混合
.element {
  @include font_color_01;
}

// 定義接受參數
@mixin font_color_02($font-size, $color) {
  font-size: $font-size;
  color: $color;
  line-height: 1.5;
}

.element {
  @include font_color_02(18px, #3498db);
}

@extend

前面加上”%”的樣式不會被編譯。

%font_color_01{
  font-weight: bold;
  color: red;
}

//引入
.my-class {
  @extend %font_color_01;
  background-color: yellow;
}

@function

SCSS內置了許多有用的內置函數 詳細參考:Sass: Built-In Modules (sass-lang.com)

@function fn_name($pa_1, $pa_2) {
	$all_num: $pa_1 + $pa_2;
  @return $all_num;
}

$num_all: fn_name(5, 3);

You May Also Like

More From Author

+ There are no comments

Add yours

發表迴響