2016-12-08 / JSN / 0 Comments / 181 次瀏覽
當圖層一多起來,要管理 z-index 是很麻煩的一件事。但是可以透過這個方法來管理:
依照 z-index 的大小做順序排列
$z-index:
(
container,
'.header',
"#title"
);
然後利用 SASS 的 index() 方法來自動取得 z-index
// z-index:1
.container {
z-index: index($z-index, container);
}
// z-index:2
.header {
z-index: index($z-index, '.header');
}
// z-index:3
#title {
z-index: index($z-index, '#title');
}
2015-02-09 / JSN / 0 Comments / 340 次瀏覽
/**
水平垂直置中,.outer 務必添加width與height
範例
<div class="herver_center outer">
<div class="herver_center inner">置中元素</div>
</div>
*/
.herver_center
{
//外圍
&.outer
{
text-align: center;
margin: 0 auto;
&:before, &:after
{
content: '';
display: inline-block;
vertical-align: middle ;
height: 100%;
}
}
//內圍
.inner
{
display: inline-block;
vertical-align: middle;
}
}
利用:before 與 :after 的方法。
基本上不寫成 mixin了,把這段作成model, 要用時直接指定 class 即可。
2015-01-30 / JSN / 0 Comments / 1,797 次瀏覽
基本用法, 但建議了解進階用法後再決定
- 先查看 SCSS 設定檔 config.rb ,確定你的圖片設定位置,預設叫做 images
Encoding.default_external = 'utf-8'
require 'compass/import-once/activate'
# Require any additional compass plugins here.
require 'susy'
require 'breakpoint'
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images" <---------------這裡!!
javascripts_dir = "javascripts"
# To enable relative paths to assets via compass helper functions. Uncomment:
relative_assets = true <---------------這裡我會拿掉註解,改用相對資源(相對路徑的算法)
- 在根目錄底下建立你的圖片路徑 『images/”必須要有一個資料夾名稱”』,例如取名『images/my-icons』 ,裡面放入你要合併的 PNG 圖檔,只支援PNG喔!
- 開一張例如 sprite.scss 檔案,寫入
@import "compass/utilities/sprites";//需先引用compass的工具, 我試過沒寫也可以,可能預先已經加載了
@import "my-icons/*.png"; //『my-icons』是你自訂的資料夾名稱, 這裡是範例
@include all-my-icons-sprites; // 『all-』 後面接著的 『my-icons』也記得是你自訂的資料名稱
- 接著會產出 sprite.css 你也許可以看到例如這樣子
.my-icons-sprite,
.my-icons-delete,
.my-icons-edit,
.my-icons-new,
.my-icons-save { background: url('/images/my-icons-s34fe0604ab.png') no-repeat; }
.my-icons-delete { background-position: 0 0; }
.my-icons-edit { background-position: 0 -32px; }
.my-icons-new { background-position: 0 -64px; }
.my-icons-save { background-position: 0 -96px; }
我們看到如『.my-icons-save』,其實就是Class利用一張背景圖+位移,來達到圖片的放置效果。我們看這個範例的命名如『.my-icons-』後面的名稱『save』,其實他代表的就是你原始圖檔名稱為『save.png』。參考Compass圖片合併功能
- 如果看到產生錯誤『NoMethodError: undefined method `parent’ for nil:NilClass』,那就是你的圖片名稱用了不合法命名方式,例如用了數字當作開頭,例如『001save.png』『中文標題.png』這樣都不行喔。圖片命名記得開頭要英文喔。
- 最後你的Class可能會這麼寫
.textbg {
@include my-icons-sprite(textbg); //裡面指定你的圖檔名稱
width: image-width("my-icons/textbg.png"); //圖檔的寬
height: image-height("my-icons/textbg.png"); //圖檔的高
@include inline-block; //用在<a>或<i>的時候,可以讓她display:inline-block
}
- 當然,這樣子看起來一定很麻煩,因為每使用一張圖片就要手動去查寬度跟高度,有沒有什麼方法可以把寬度高度也一次固定出來呢?有的,請加入這項參數
$my-icons-sprite-dimensions: true; //預設false
這樣子就可以自動產生寬與高度囉!例如
.all-menu1-1 {
background-position: 0 -603px;
height: 30px; //自動抓出來
width: 66px; //自動抓出來
}
.all-menu1-2 {
background-position: 0 -633px;
height: 30px;
width: 66px;
}
.all-menu2-1 {
background-position: 0 -663px;
height: 30px;
width: 66px;
}
這能讓你直接在HTML中直接標記要使用的class完全不用再寫CSS!
參考這裡的討論、官網關於『$<map>-sprite-dimensions』
- 如果你要使用 『<i class=”你的sprite自動產生的類別名稱”></i>』,那麼預設是看不到的。此時我們要修改display屬性為『inline-block』或是『block』,但是我們不希望再個別指定,怎麼做呢?很簡單,善用模型(model)概念
.inline_block {
display: inline-block;
}
所以你套用圖片,會長類似這樣
<i class="all-top1_1search inline_block"></i>
當然你可以自己取名你習慣的簡短名稱。
* 我在CSS習慣使用『 _ 』來當作連接字元,是因為方便滑鼠點兩下就可以選取+PHP習慣。若用『 – 』連接,遇到class名稱叫做 “inline-block” 滑鼠點兩下就只能選取局部了。這是因為我常常需要選取class名稱方便搜尋修改囉!
上述可參考官方網站 。其中有些細部設定,可以參考這裡。下面是範例,記住把下面的『my-icons』換成你的資料夾名稱。
@import "compass/utilities/sprites";
//連結符號
$default-sprite-separator: "_";
//改用垂直
$my-icons-layout: horizontal;
//若想讓合併的icon鬆散一點
$my-icons-spacing: 10px;
@import "my-icons/*.png";
@include all-my-icons-sprites;
如果有巢狀結構,就是很多層的資料夾,那注意例如
@import "themes/orange/*.png";
@include all-orange-sprites; //『all-』後面接的是你png圖檔上一層的名稱喔!
進階用法
其中有 function 叫做 sprite-map 與 sprite 我們可以先了解一下。可以參考官方解說。
sprite-map(“你要合併的資料夾/*.png”)
例如
$icons: sprite-map("my-icons/*.png");
這會自動幫你建立一張sprite圖檔,並將這項資源返回給變數 $icons。
background: sprite(你的sprite-map資源, 你要使用的原圖檔檔名);
例如
background: sprite($icon, textbg);
避免每次都要重複動作,還要手動填寫圖片的寬與高度,我想我們可以用mixin包裝起來。
//自動取得sprite圖片中你指定的圖檔位置
//
//$folder 合併圖檔的所屬資料夾
//$icon 要取得的圖檔的原始名稱
@mixin divimg_sprite($folder, $icon_name) {
$icons: sprite-map("#{$folder}/*.png");
& {
background: sprite($icons, $icon_name);
@include inline-block;
width: image-width("#{$folder}/#{$icon_name}.png");
height: image-height("#{$folder}/#{$icon_name}.png");
}
}
用法
//我們只要分別指定圖檔所屬的資料夾名稱,與你要使用的圖檔名稱就可以囉。
//這會自動判斷sprite圖檔不存在,會建立。下次再呼叫的時候,因為sprite圖檔已經存在,就不會再重新花時間建立了。
.textbg {
@include divimg_sprite(my-icons, textbg);
}
如果有多層的話就…
.textbg {
@include divimg_sprite("my-icons/web2/menu_change", menu1);
}
選擇
上面介紹了基本方法、進階方法,適合用在不同需求。一般而言,如果只是單純呼叫圖片精靈的某張圖片,那麼基本方法就夠用了;如果常常要在SCSS中針圖片精靈的某些張圖片做個別調整,那麼使用進階方法比較適合喔。
2014-12-02 / JSN / 1 Comment / 397 次瀏覽
@include container() //渲染
@include span($span) //指定所需柵欄數量
@include gutter($span) //對應當總柵欄數量的1 gutter 寬度
@include pre($span) //margin-left
@include post($span) //margin-rigt
@include squish($pre,$post) //同時使用 margin-left margin-rigt
@include pull() // margin-left: -$span(負值)
@include prefix()、suffix()、pad() // padding 的概念
@include bleed()、bleed-x()、bleed-y() // 出血
@include gallery($span); //左右貼齊, 中間平均分配
參考
2014-11-30 / JSN / 0 Comments / 685 次瀏覽
//susy 環境設定
$susy: (
flow: ltr, // 左至右rtl | 右至左 ltr
math: fluid,// fluid 流變% | static 固定單位,會依照 column-width 設定的單位是px 或em
output: float, // float 使用浮動概念 | isolate 為隔離獨立的概念,會產生重疊的可能。未來會提供 flexbox 或 grid 或其他方式
gutter-position: after , // before 在前方使用margin | after 在後方使用margin | split 在前後使用margin | inside 在前後使用 padding 但網格的邊緣不會被刪除,當math: fluid的時候維持流變 | inside-static 在前後使用 padding 但網格的邊緣不會被刪除,當math: fluid的時候仍使用static固定單位
container: auto, // 指定總寬度 | auto 自動計算
container-position: center, // left 靠左 | center 置中 | right 靠右
columns: 12, // 欄位數量, 若是手機優先,那代表的是手機的柵欄數量
gutters: 1/3, // 溝相對於欄位的幾分之幾
column-width: 60px, // 指定柵欄寬度 | false/null 自動計算, 但必須要當 math: fluid 流變的時候
global-box-sizing: border-box, // 全域的。border-box 可以當使用padding的時候不會超出總寬度,也就是CSS的 "box-sizing: border-box;" | content-box 一般狀況
last-flow: to, // from 當排列最後一個元素如 @include span(last 1 of 12); 時會從起始處往結尾排列過去,所以會造成往前一個元素靠,也就是套用 float:left 而不是 float:right | to 反之
location: null, // null | first/alpha | last/omega | 數字
box-sizing: null, // null | border-box | content-box
spread: null, // null | narrow 單一欄位寬度 | wide 單一欄位寬+單側gutter | wider 單一欄位寬+兩側gutter
gutter-override: null, // null | no-gutters/no-gutter 無溝, 如使用 span() 會不使用gutter做配合 | 獨立於整體背景欄位的 gutters: 1/3, 可自訂一個gutter數量如50px
role: nest, // null | nest
debug: (
image: show, // show | hide | show-columns | show-baseline
color: rgba(#66f, .25), // 柵欄色彩
output: background, // background 柵欄出現在背景 | overlay 出現浮動鈕,移過去才會顯示柵欄
toggle: top right, // right | left and top | bottom 若使用 output: overlay 出現浮動鈕的位置
),
use-custom: (
background-image: true, // 是否使用背景欄位圖片
background-options: true, // 是否啟用背景欄位選用功能
box-sizing: true, // false 輸出相容語法如 -moz 或 -webkit | true 視存在的mixin box-sizing 來套用
clearfix: false, // false 使用內部的 mixin | true 視存在的mixin clearfix 套用,若不存在會套用內部的 micro-clearfix
rem: true, // false 長度(length)會直接使用 css | true 視存在的 mixin rem
)
);