css – scss – 使用 &:hover 改變class 樣式
格式
『父元素:hover 子元素 {}』
|
1 2 3 4 5 6 7 |
//當.parent發生hover的時候，會改變底下的.child 樣式 .parent:hover .child { //發生變化 } |
sass – scss – compass – susy2 – ruby – 解決中文註解發生錯誤
2015/11/11 補充
新的 SASS/SCSS 不會有這個問題了。今天測試時不更改任何系統設定，就可以完成編譯有中文的文件。所以大家也把系統使用指令
|
1 2 3 4 |
npm update npm clean |
更新吧！這是我目前的版本
- ruby 2.1.5p273 (2014-11-13 version 48405)
- compass 1.0.3
- sass 3.4.19
- susy 2.2.6
直接修改 Ruby 設定
參考，可以到 Ruby 的安裝目錄，找到如我的『C:\Ruby21-x64\lib\ruby\gems\2.1.0\gems\sass-3.4.19\lib\sass.rb』，打開後，在所有 require 的最後一個後面，加入這行
|
1 2 3 4 5 6 |
require ... require 'sass/features' Encoding.default_external = Encoding.find('utf-8') <----這行 |
再重新編譯即可。
如果使用compass 監控 scss 的時候噴出錯誤 Invalid CP950 character, 那就是因為Ruby的預設語言不認得UTF-8格式。有一陣子因為使用 fire.app 的關係就不會有UTF-8問題，但前兩天因為大量使用compass/css3, 在跑 fire.app 編譯速度太慢的問題，想說測試原生compass監控看會不會比較快，剛好就遇到這個問題。
參考了國外網站 ，只要在你的專案底下把設定檔 config.rb 打開，在最前端添加
|
1 2 3 |
Encoding.default_external = 'utf-8' |
這樣重新 compass watch 就可以了。本來使用在scss最前方添加
|
1 2 3 |
@charset "UTF-8"; |
雖然也是可以解決噴錯誤的問題。但有一個缺點就是假設有兩支scss，裡面都有中文註解如
a.scss
|
1 2 3 4 5 6 7 8 9 |
@charset "UTF-8"; //中文註解 .container { font-family: "微軟正黑體"; @import "b"; //若非得在使處引用_b.scss } |
_b.scss
|
1 2 3 4 5 6 7 |
@charset "UTF-8"; .box { //中文註解 } |
那就會噴出錯誤
|
1 2 3 |
Error: @charset may only be used at the root of a document. |
告訴你 @charset 指令必須使用在檔案最前方。而因為_b.scss 不使用 @charset “UTF-8”; 會發生錯誤，所以還是建議改全域設定檔 config.rb 比較好。
若有配合使用 SUSY2，須要額外添加 require，可參考：sass – scss – compass – susy – windows 底下安裝
sass – scss – compass – susy – windows 底下安裝
- Windows先行安裝Ruby，前往下載 RubyInstaller, 三個核曲鈕都勾選。
- 打開命令提示字元 (cmd), 打以下指令
123456gem install sassgem install compassgem install susygem install breakpoint //提供給susy使用的外掛
當在使用安裝 “gem install” 或更新 “gem update” 的時候如果發生錯誤，出現SSL相關錯誤的話，可以先執行安裝這些
12345gem source -r https://rubygems.org/gem source -a http://rubygems.org/gem install cocoapods
安裝好以後再做安裝或升級的動作就可以了。參考這裡 - 若要檢查安裝了那些，打上 gem list 就可以列出所有安裝名稱與版本
- 建立專案前，需要先到當前路徑。如想建立 D:\susy 就要先移動到路徑 D:\ 在打上
123compass create 你想要的專案名稱如susy
之後會成功建立檔案。 - 打開建立好的如 susy 資料夾可以看到設定檔 config.rb 開頭添加
12345Encoding.default_external = 'utf-8'require 'susy'require 'breakpoint'
強制使用 UTF-8 可以避免在寫中文註解或是打 “微軟正黑體” 的時候發生錯誤。 - 進入你建立的專案資料夾如susy, 打上指令
123compass watch
讓 compass 不斷的監控SASS/SCSS變化，並自動編譯為CSS。
SUSY2 – SCSS – CSS – 依照高度不同做不同的顯示
一般在做SUSY的時候，我們通常響應的是螢幕「寬度」。但假如要針對不同的螢幕高度做調整，該怎麼做呢？
若使用 breakpoint
|
1 2 3 4 5 6 7 8 9 |
.box { $height: (min-height 100px); @include breakpoint($height) { color:red; } } |
產出CSS
|
1 2 3 4 5 6 7 |
@media (min-height: 100px) { .box { color: red; } } |
若使用 susy-breakpoint
*susy-breakpoint 的第二個參數 $layout 自 v2.2.1 之後，就可以為非必填參數了，所以下面的null也可以不用填寫。參考
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.box { //0~200px @include susy-breakpoint((min-height: 0px), null) { background: red; } //200~500px @include susy-breakpoint((min-height: 200px), null) { background: green; } //500px以上 @include susy-breakpoint((min-height: 500px), null) { background: blue; } } |
產出CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
@media (min-height: 0px) { .container .box { background: red; } } @media (min-height: 200px) { .container .box { background: green; } } @media (min-height: 500px) { .container .box { background: blue; } } |
線上範例，使用 susy-breakpoint。請嘗試改變畫面高度
css – scss – compass – 製作sprite出現錯誤
使用 Compass 製作的時候，
在路徑 images/my-icons/ 底下有多張png，我們使用這個指令
|
1 2 3 4 |
@import "my-icons/*.png"; @include all-my-icons-sprites; |
卻發生了錯誤
|
1 2 3 |
NoMethodError: undefined method `parent' for nil:NilClass |
後來才發現原來圖片底下的 png 檔，其中不能有任何一個是以數字為開頭命名。應該是 ruby 的程式語言 Class 不能以數字為開頭的規範吧~ 修改檔名為英文開頭後就沒問題了