2015-06-01所有文章 Luka

SASS 的 @import @mixin @content @extend 與 @function

1.Import

SASS在檔名前面加上底線時，不會直接編譯成CSS，使用@import引入後，才會編譯。

2. Mixins

常見的mixin作法，要傳入的引數前面需加上$字號。

/* Mixins */
@mixin border-radius($radius: 10px) {
	-webkit-border-radius: $radius;
	-moz-border-radius: $radius;
	border-radius: $radius;
}

@mixin large-font {
	font-size: 200%;
}

使用時，輸入@include mixins_name即可引入CSS程式碼。

nested mixin

mixin中也可以＠include mixin

@mixin hero-unit {
	@include border-radius;
	@include large-font;
}

實際來用用看

.box {
	@include hero-unit;
}

.container {
	@include border-radius(5px);
}

撰寫可以傳入不定數量引數(arguments)的mixin

使用$args...作為參數就可以傳入不定數量的arguments。

/* Mixins with variable arguments... */
@mixin box-shadow($args...) {
	-webkit-box-shadow: $args;
	-moz-box-shadow: $args;
	box-shadow: $args;
}

現在你可以用@include mixin來節省程式碼了:D

1
2
3

.box-2 {
	@include box-shadow(0 0 3px #333, inset 5px 5px 5px red);
}

3. content

@content 的功用讓mixin可以撰寫自定的程式碼

4. Functions

@function與@mixin的不同之處在於@function只會回傳一個值，而@mixin是回傳一段CSS程式碼。宣告Function時以@function開頭：

1
2
3

@function pxToEm($px, $base: 16) {
  @return ($px / $base) * 1em;
}

使用Function時前面不需要加上@。

1
2
3

p{
    font-size:pxToEm(20);
}

編譯後

1
2
3

p {
  font-size: 1.25em;
}

結論

幾點需要注意：

@import用來引入開頭為底線的SCSS檔案。如：_layout.scss。
mixin可以傳入配變數，使用時語法為@include mixins_name使用。
mixin搭配@content使用，讓mixin可以輸入自定的程式碼。
@extend用來讓重複的程式碼只需要撰寫一次，裡面不可以傳入變數。
function使用時不需加上@，不熟悉的話可能會與CSS原本的property搞錯，需要特別注意。

有了這些基本知識就可以進一步的學習SASS與Compass了！

#HTML SCSS