[SASS note.] CSS 逆向工程 Part 3

俗話說得好，事不過三，所以大抵上寫到 Part 3 就沒有什麼好說得了（揍飛）。其實 @mixin 的概念並不困難，他是很單純的可以當作是一個函式來用，也可以用 @include 來引入。而，使用 @include 引入的方式跟 @extend 與 Nested @import 其實很類似。

依照慣例，範例先上。

產出結果比較：

請注意輸出結果，基本上 Nested @import 跟 @mixin 的 @include 輸出的狀況非常類似，只是，輸出的先後順序是不一樣的，這會影響到 CSS 的繼承權重問題，所以在輸出使用上請特別小心。

接著，就是函式的應用，一樣，範例先上。

這就是結果：

上述的 @mixin 函式，是使用＋號來呼叫，然後傳入值是 $width，預設值是 960。如果你沒有傳入值，那麼他就會使用預設的數值帶入。這跟我們一般在寫函式呼叫的方式很像。然後，其實 Sass 有內建的函式可以用，不過這當然得是要去翻官方文件才有的東西。

http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html

文件也非常清楚。清楚到我覺得我應該沒有什麼好寫的了（揍飛）。

至於變數，就是 $ 開頭的東西。他有三種使用的方式：

/* 單純的數字
$width: 960
/* 加上單位的變數
$width: 960px
/* 字串
$width: "960px"

$width: 1000
$width1: 1000px
$width2: "1000px"
.your_class
  width: $width
  width: #{$width}
  width: $width1
  width: #{$width1}
  width: $width2
  width: #{$width2}

.your_class {
  width: 1000;
  width: 1000;
  width: 1000px;
  width: 1000px;
  width: "1000px";
  width: 1000px; }


$type: "white"
.my_class_#{$type}
    color: #{$type}

.my_class_white {
    color: white; }

$font_size: 12pt
$line_height: 1.8
.my_class
  font: $font_size/$line_height
  font: #{$font_size}/#{$line_height}

.my_class {
    font: 6.667pt;
    font: 12pt/1.8; }

至於數學運算的部份，請注意的地方是，不同單位的數值不可以混合運算，例如：

$font_size: 16pt
$line_height: 2em
.my_class
  font-size: $font_size/$line_height

<div>$ sass test.sass
Syntax error: 16pt/em isn't a valid CSS value.
        on line 5 of test.sass
  Use --trace for backtrace.</div>

$font_size: 16
$font_size2: 16pt
$line_height: 2
.my_class
  font-size: #{$font_size/$line_height}px
  font-size: $font_size2/$line_height

.my_class {
    font-size: 8px;
    font-size: 8pt; }

最後的最後，還是請大家多多翻閱 SASS 的官方文件，裡面有非常詳細的說明。

You might also like...