Learning Less From Atom
08 Mar 2017atom style less前言
Atom 編輯器的其中一個最大的特色就是 “Hackable” 讓使用者可以使用 Web 技術來客制化 Atom
而在編輯器外觀方面也不例外，Atom 使用 CSS 來客制化樣式 編輯器的佈景主題也是由許多的樣式表組成
然而隨著時間，在習慣的佈景主題中， 總是會有一些小地方想要依照自己的喜好調整。
今天要介紹的是使用style.less – 官方提供的空白樣式表 作為輸入點，來修改現有的佈景主題
一方面分享自己喜愛的樣式調整，一方面也複習相關的scss 語法。
less import
首先看到的是使用@ 符號作為輸入外部檔案或定義變數 這裡我定了一些喜歡的顏色和字型大小，讓這份樣式表更為語意化。
// atom built-in@import"ui-variables";@import"syntax-variables";@_lightGreen:rgba(59,255,0,.85);@_greyGreen:hsl(95,38%,62%);@_atomGreen:#5FB57D;@_treeViewFontSize:@font-size+6px;// from ui-variablesTree View
首先客制化的是 tree-view ，Atom 用來顯示檔案的 side bar
改進一： 我覺得預設的字型太小了。所以套用了自訂的@_treeViewFontSize 改進二： 我希望滑鼠移到檔案圖示上時，可以有酷炫的放大效果，最好像蘋果電腦桌面那樣(遠望)。
有查到相關的文章，但是牽涉較多的計算與限制，所以目前只有先使用 csstransition 做。 這裡也有運用到了 less 的& 運算子，用來表示外部的選擇器，符合 DRY 精神。
.tree-view{// hover on itemfont-size:@_treeViewFontSize;// animation of file entry, folder entryli.file,.header.list-item{transition:padding1.5s,font-size1.5s;// HOVER-OFFpadding:0px;&:hover{transition:padding1s,font-size1s;// HOVER-ONpadding:15px0px;font-size:@_treeViewFontSizeHovered;}}}套用後的效果(請想像這是 hover 1.5 秒後的樣子)
Find and Replace
Find and Replace 是搜尋檔案用的套件， 搜尋結果會以樹狀的方式顯示，右上角頁面會有按鈕可以展開或合併樹狀圖的節點。
改進：覺得按鈕文字前方如果有圖示，就能夠更直覺的點選按鈕(對我真的常常會猶豫)。
遇到了一個挑戰：button 沒有套class 屬性，一時無法選到正確的元素。 之後發現還好 CSS 有提供first-of-type 和nth-of-type()
選擇器搭配使用了font-awesome 還是可以成功套用圖示
.preview-header{// search result summaryfont-size:@_projFindResFontSizeSummary;button.btn:first-of-type{// collapse all buttonfont-size:@_projFindResFontSizeMatchCount;&::before{content:"\f066\ ";}// fa-expand}button.btn:nth-of-type(2){// expand all buttonfont-size:@_projFindResFontSizeMatchCount;&::before{content:"\f065\ ";}// fa-compress}}同時調整了一些字型大小後的結果：
檔案編碼
狀態列中會有一個元素encoding-selector-status 顯示目前檔案的編碼， 我想要在其屬性data-encoding 不是utf8 的時候換成警告的顏色。
status-bar{encoding-selector-statusa:not([data-encoding="utf8"]){color:@text-color-warning;}}運用了:not 選擇器之後，看起來變成這樣
程式碼折疊
Atom 提供了程式碼折疊的功能，讓你把不想要注意的程式碼暫時 “藏起來”。 折疊起來的部份變成了一個.fold-marker，看起來會是這樣。
改進一：想要把這個span 換成顯眼的圖示，搭配顯眼的顏色，方便閱讀。
這裡使用了另一個 less 的功能mixin，讓你可以撰寫可重複使用的 “函數” 呼叫了 mixin 就會把該函數中的規則注入。你可以把常重複的選擇器包成 mixin，簡化代碼。
為了讓折疊後的樣式可以客制化，我提供了變數@content@color 給 mixin
._fold-marker-content(@content,@color){// folded function code&::after{content:@content;color:@color;font-size:1.25em;}}.fold-marker{// folded code._fold-marker-content("\f141",@text-color-success);}輸入了 font-awesome 圖示後，變得真的更清楚了！
結語
- DIY 改 Atom 很好玩，一邊練習 less 一邊改進自己的開發環境。
- Atom 的討論區會有人分享自己的 style sheet，有時會去上面找靈感。
- 有些元件實在是無法單純用 css 就能達到修改（沒有 class，元素屬性不會變動）
- 要用 DOM API 來完成
- 還好 Atom 提供了
init.coffee作為另一個客制化的位置- 可以讓外掛開發者以
coffeescript測試 Atom API
- 可以讓外掛開發者以
- 下次來分享自己的
init.coffee如何完成更多客制化