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

    pooh

    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);

    Related Posts

    發表迴響