GDS Digital Service Manual 中文翻譯網站 (beta)
by HPX-GOV 英國政府數位服務研究小組 GDS Study Group

Sass 共用模組 (Sass repositories)

A library of CSS mixins in the Sass format

Sass是一個用於建立文件樣式表,讓我們共享程式碼和技術的程式語言。GDS已經創建了一個名為儲存庫GOV.UK前端工具包 ,簡化服務並便於建立與GOV.UK具有一致外觀和感覺。該工具包可作為Gem ,便於納入Ruby專案。

Sass函式的分類

在該文件中的gem可分為四個主要部分:

  1. GOV.UK字體,顏色和圖片資源
  2. 函式的響應式設計
  3. 針對舊版本Internet Explorer的函式
  4. 函式用於跨瀏覽器的CSS

第一部分是,讓所有GOV.UK專案呈現熟悉的外觀。有預先定義的字體大小,我們就GOV.UK.使用同一函式的每個專案,例如heading-26 。這還包括文件的空白字元標準數值,以幫助在頁面上呈現良好的閱讀視覺與間距。

第二個是開發能夠支援不同尺寸顯示器的網站。

第三個是寫IE瀏覽器特定的CSS的文件樣式表,我們不使用駭客。

第四個是讓瀏覽器以特定的樣式來呈現我們的專案。我們封裝了新的且非標準化的CSS函式。透過這種方式,我們可以很容易地更新一個新的CSS屬性的所有實例,而不必做搜索和替換所有我們的專案。

響應式設計

一般建議用行動優先的態度寫你的標記。也就是說,添加桌面風格,以一個上下滑動的螢幕文件格式。通過這種方式,你只添加樣式的桌面,不重置桌面樣式的行動裝置。

跨瀏覽器

我們主要關心兩種主要類型跨瀏覽器的CSS首先用不同的技術來實現一致的效果,二來使用供應商的前綴申請一致行為的新功能。例如:

.related-box {
  float: left;
  @extend %contain-floats;
  @include border-radius(4px);
}

@extend %contain-floats採用了跨瀏覽器的技術,保證封裝它所有的浮動元素在元件中。這通常並不只存在於CSS,但也是我們經常需要做的,我們也不希望各種技術混雜而無所不在,它讓我們的程式碼保持一致性。

@include border-radius設計為使用不同的邊界半徑實現( -moz-border-radius-webkit-border-radius等)來創建跨瀏覽器一致的表現。

延伸閱讀

README.md檔案中GOV.UK前端工具包提供了更多資訊。

譯者:陳韻婷
校稿者:Amy Hsu, James Chu
原始出處:https://www.gov.uk/service-manual/user-centred-design/resources/sass-repositories

請留言

你的email信箱不會被發布出來. Required fields are marked *

*