邏輯性的CSS─SASS

SassMeister(http://sassmeister.com/)是SASS編譯CSS的線上編譯網站，免像 Atom一樣安裝，也支援版本控制的Github。

假設我們要將300多個CSS的寬度和左邊位置做同樣的處理，就可以使用SASS來撰寫規則程式。


@function width($w) {
@return $w *2;
}

=> 是將寬度都乘以兩倍。


@function left($l) {
  @if ($l >= 50%) {
    @return $l *2 - 100%;
  } @else {
    @return $l *2;
  }
}

=> 作為兩個判斷式，假使左邊位置超過50%，就乘以2減掉100%，否則乘以2。

完整程式如下：

@function width($w) {
@return $w *2;
}

@function left($l) {
  @if ($l >= 50%) {
    @return $l *2 - 100%;
  } @else {
    @return $l *2;
  }
}

.link-0101{
 background: url("no.png") no-repeat;
 position:absolute;
 width:width(50%);
 height: 100%;
 top:0;
 left:left(70%);
 z-index: 999;
 cursor:pointer;
 border: 1px solid red;
 opacity: 0;
 filter: alpha(opacity=0);
}

編譯出的CSS：

.link-0101 {
  background: url("no.png") no-repeat;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 40%;
  z-index: 999;
  cursor: pointer;
  border: 1px solid red;
  opacity: 0;
  filter: alpha(opacity=0);
}

如下圖所示範：