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

less than 1 minute read

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

.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開頭

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

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

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

編譯後

p {
  font-size: 1.25em;
}

結論

幾點需要注意:

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

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

Leave a Comment