css – scss – 使用 &:hover 改變class 樣式
格式
『父元素:hover 子元素 {}』
//當.parent發生hover的時候，會改變底下的.child 樣式
.parent:hover .child
{
//發生變化
}
sass – scss – compass – susy2 – ruby – 解決中文註解發生錯誤
2015/11/11 補充
新的 SASS/SCSS 不會有這個問題了。今天測試時不更改任何系統設定，就可以完成編譯有中文的文件。所以大家也把系統使用指令
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 的最後一個後面，加入這行
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 打開，在最前端添加
Encoding.default_external = 'utf-8'
這樣重新 compass watch 就可以了。本來使用在scss最前方添加
@charset "UTF-8";
雖然也是可以解決噴錯誤的問題。但有一個缺點就是假設有兩支scss，裡面都有中文註解如
a.scss
@charset "UTF-8";
//中文註解
.container {
font-family: "微軟正黑體";
@import "b"; //若非得在使處引用_b.scss
}
_b.scss
@charset "UTF-8";
.box {
//中文註解
}
那就會噴出錯誤
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), 打以下指令
gem install sass gem install compass gem install susy gem install breakpoint //提供給susy使用的外掛
當在使用安裝 “gem install” 或更新 “gem update” 的時候如果發生錯誤，出現SSL相關錯誤的話，可以先執行安裝這些
gem source -r https://rubygems.org/ gem source -a http://rubygems.org/ gem install cocoapods
安裝好以後再做安裝或升級的動作就可以了。參考這裡
- 若要檢查安裝了那些，打上 gem list 就可以列出所有安裝名稱與版本
- 建立專案前，需要先到當前路徑。如想建立 D:\susy 就要先移動到路徑 D:\ 在打上
compass create 你想要的專案名稱如susy
之後會成功建立檔案。
- 打開建立好的如 susy 資料夾可以看到設定檔 config.rb 開頭添加
Encoding.default_external = 'utf-8' require 'susy' require 'breakpoint'
- 進入你建立的專案資料夾如susy, 打上指令
compass watch
讓 compass 不斷的監控SASS/SCSS變化，並自動編譯為CSS。
SUSY2 – SCSS – CSS – 依照高度不同做不同的顯示
一般在做SUSY的時候，我們通常響應的是螢幕「寬度」。但假如要針對不同的螢幕高度做調整，該怎麼做呢？
若使用 breakpoint
.box
{
$height: (min-height 100px);
@include breakpoint($height) {
color:red;
}
}
產出CSS
@media (min-height: 100px) {
.box {
color: red;
}
}
若使用 susy-breakpoint
*susy-breakpoint 的第二個參數 $layout 自 v2.2.1 之後，就可以為非必填參數了，所以下面的null也可以不用填寫。參考
.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
@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，我們使用這個指令
@import "my-icons/*.png"; @include all-my-icons-sprites;
卻發生了錯誤
NoMethodError: undefined method `parent' for nil:NilClass
後來才發現原來圖片底下的 png 檔，其中不能有任何一個是以數字為開頭命名。應該是 ruby 的程式語言 Class 不能以數字為開頭的規範吧~ 修改檔名為英文開頭後就沒問題了