Zi 字媒體
2017-07-25T20:27:27+00:00
Compass是sass延伸出來的工具，可以將sass或scss的語法compile成CSS語法
使用sass的好處就是可以以程式的角度去撰寫CSS(變數、巢狀、迴圈、繼承)
由於Compass是用Ruby開發的，所以需要先安裝Ruby
接著再用gem安裝Compass
gem install compass
建立Compass專案
compass create project_name
建立完後，Compass會產生一些檔案，其中config.rb是專案的設定檔，產生完後先手動把設定檔裡的資料夾建一建
接著就可以在sass目錄裡開發(注意：如果使用scss的人，檔案名稱必須命名為xxx.scss，而sass則要命名為sass，不然compile會出錯)
編輯完後到專案根目錄下compile
compass compile
成功後config.rb的css路徑裡就會有css檔產生出來囉
scss基本語法
變數及運算
$width : 100px;
$height : 100px;
#sass {
width:$width - 50px;
height:$height;
}
巢狀
$width : 100px;
$height : 100px;
#doc {
width:$width;
height:$height;
background:red;
.doc_inner {
width:$width - 50px;
height:$height - 50px;
background:blue;
}
}
父選擇器(Parent Selector)
a {
color:red;
&:hover { color:blue; }
}
Mixins
@mixin hover-link {
color:red;
&:hover { color:blue; }
}
a { @include hover-link; }
Mixins加入參數
@mixin hover-link($color1:red, $color2:blue) {
color:$color1;
&:hover { color:$color2 }
}
a { @include hover-link($color2:green); }
官方的Mixins
繼承
$width : 100px;
$height : 100px;
#sass {
width:$width;
height:$height;
background:red;
}
#css {
@extend #sass;
條件判斷
$width : 100px;
$height : 100px;
#sass {
@if $width == 10px {
background:red;
}
@else {
background:green;
}
width:$width;
height:$height;
}
迴圈
@for $i from 1 through 5 {
.item-#{$i} {
width: 100px * $i;
}
}
$i : 1;
@while $i <= 5 {
.item-#{$i} {
width: 100px * $i;
}
$i : $i + 1;
}
引入(import)
a.scss
#sass {
background:red;
}
b.scss
#sass {
width:100px;
height:100px;
}
test.scss
@import "a","b";
Categories: CSS
分類
Android
AngularJS
API Blueprint
Chrome
Database
MySQL
DataStructure
Editor
Vim
Firefox
Git
Hadoop
Language
Go
Java
JavaScript
jQuery
jQueryChart
Node.js
Vue
PHP
Laravel
ZendFramework
Python
Mac
Network
Cisco
DLink
Juniper
Oauth
Server
Apache
Share
Unix
FreeBSD
Linux
WebDesign
Bootstrap
CSS
HTML
Wordpress
Search
搜尋:
寫了
5860316篇文章，獲得
23313次喜歡