Hike News
Hike News

Sass

CSS, 功能

簡介

在編寫 CSS 時常會為了一個效果而寫一大長串的樣式、編排，又或者是使用了許多幾乎有著相同文字效果的元素，讓整個 CSS 檔案很龐大之外，在之後的修改維護也十分的不方便。

  • Sass 是什麼呢?
    • 是一種 Pre-Processor 預處理器的語言
      • 編寫並透過預處理器編譯，產生可以被瀏覽器讀取的純 CSS 語言
      • 多數 CSS 預處理器都會添加純 CSS 所沒有的功能，例如：mixin、巢狀選擇器、繼承選擇器等
      • 讓 CSS 結構在編寫時可以更快速專注、可讀性更高、日後的維護修改更方便
    • 副檔名分 .scss 和 .sass
      • Sass 和 SCSS 最大的不同是 SCSS 還保留著大括號 { } 和分號 ; ，Sass 則不需要

計算

這功能在 Sass 和 SCSS 使用，方便也大大的減少計算的時間。

計算單位可以用 px、pt、in、cm、mm 互相加減，但不能用在乘、除計算

而 em, rem 不是固定的單位所以不能使用

加、減

可以和不同的單位計算

1
2
$width: 10cm + 60px
$height: 160px - 60pt

乘、除

和 加、減 不同，不能是兩個都帶有單位的值作計算，必需有一個是數字

1
2
$height: 50px * 20px
$height: 50px / 25px

上方的兩個例子都是不行的

因為乘法會得到

1000px*px isn't a valid CSS value.

單位變成了 px*px 不是能用的值

除法是因為 px/px 結果等於是沒單位的數字

所以要改為用

1
$height: 50px * 2

才能正確得到 100px

另外因為除法的結果是正確的數字，以是沒有單位

所以可以在 小括號內的先除 在外面加上 乘或除法 得到的值就會是沒問題可以使用的

1
$height: 50px * (50px/25px)

可以用在 乘、除 的單位就是包括 em, rem 都可以使用

1
2
$width: 100px
$height: $width * 2

顏色計算

用 HEX 的計算

1
color: #290a8f-#012345

Variable 變數

定義變數的方式是使用 $ 加變數名稱，而且不能有空格。

預先定義會用到的主要樣式

1
2
$font-size: 18px
$title-font: "Arial"

顏色

1
$text-color: #f00

以及文字計算

1
$text-l: $text-m * 1.5

顏色的處理

1
2
color: $text-color
box-shadow: 5px 5px 10px darken($text-color, 20%)

都是十分的方便

@mixin 和 @include

這就像在使用 function bluebox () { } 的作法

打包用 @mixin 把全部的樣式都放進來

1
2
3
@mixin bluebox 
  color: #FFF
  background-color: blue

要使用時是用 @include 把包在裡面的置入

1
2
.box
  @include bluebox

而且還可以加上變數配合計算產生使用

1
2
3
4
5
6
@mixin color($color, $size)
  color: $color
  font-size: $size *1.5

.box
  @include color(#f00, 16px)

@content

這和前一個的使用方式類似，@mixin 是置入的方式，而使用 @content 則是在指定的位置加上新的屬性和值並置入

1
2
3
4
5
6
7
8
@mixin color($color, $size)
  color: $color
  font-size: $size *1.5
  @content

.box
  @include color(#f00, 16px)
  	border: 1px solid #333

若只是用一樣的使用方式只會得到相同的結果，看不出差異

如果在 @mixin 內再加一層

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@mixin link-active
  &:active
    @content

@mixin link-hover
  &:hover
    @content

.box
  color: #000
  @include link-active
    color: #f00
  @include link-hover
    color: #0f0

轉成 CSS 時

1
2
3
4
5
6
7
8
9
.box {
  color: #000;
}
.box:active {
  color: #f00;
}
.box:hover {
  color: #0f0;
}

就會發現會先把新的值放到 @mixin 內，才再把 @mixin 的內容放到 @include 的位置

@import

最後還可以參考 Bootstrap 的方式，為了方便整理把各類的樣式、變數拆分成多個 Sass / CSS 檔案後，再用 @import 加檔案名和副檔名 匯入，而副檔名也可省略。

1
2
3
@import "functions";
@import "variables";
@import "CSSreset";