SASS庫集合及使用方式,喜歡的朋友就Star一下吧^ _ ^ 也歡迎其他朋友們一起跟我們分享更好的sass mixin跟給我們一些指教唷。感謝~
- Fork 這個項目
- 將您個人收藏的sass mixin新增至mixin資料夾中。
- 並將你新增的 mixin在 _sass-code.scss 引入進去。
- 分享一下如何使用mixin幫我們寫在README.md中。
- 保存並提交
- 新建一個 Pull Request
##使用方式
###引入sass-collection
@import "_sass-code.scss";
###bootstrap-grid 使用
####html架構
<div class="wrap">
<div class="row">
<div class="column"></div>
<div class="column"></div>
</div>
</div>
####include方式
gutter_custom可自行定義
- exp:@include container-fixed(30px);
- make-xs-column: 480px 以上切多少column
- make-sm-column: 768px 以上切多少column
- make-md-column: 992px 以上切多少column
- make-lg-column:1200px 以上切多少column
.wrap{
@include container-fixed(gutter_custom);
}
.row{
@include make-row(15px, 15px);//此範例左右margin:-15px
}
.column{
@include make-xs-column(6);//此範例視窗寬度大於480以上的時候變width:50%
@include gutter(30px,30px);//此範例左右padding:15px
}
以下範例針對四種視窗做設定
.column{
@include make-xs-column(2);//此範例視窗寬度大於480以上的時候切6塊
@include make-sm-column(3);//此範例視窗寬度大於768以上的時候切4塊
@include make-md-column(4);//此範例視窗寬度大於992以上的時候切3塊
@include make-lg-column(6);//此範例視窗寬度大於1200以上的時候切2塊
}
進階用法
可定義div要向左向右推多少column
.column{
@include make-sm-column-offset(2);
}
.column{
@include make-sm-column-push(2);
}
.column{
@include make-sm-column-pull(2);
}