sass – scss – 管理複雜的 z-index 方法

當圖層一多起來,要管理 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');
}

 

sass – scss 水平垂直致中的寫法

/**
水平垂直置中,.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 即可。

sass – scss – compass – 透過 Compass 將圖片精靈化(Sprite)的步驟以及懶人方法

 基本用法, 但建議了解進階用法後再決定

  1. 先查看 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 <---------------這裡我會拿掉註解,改用相對資源(相對路徑的算法)
  2. 在根目錄底下建立你的圖片路徑 『images/”必須要有一個資料夾名稱”』,例如取名『images/my-icons』 ,裡面放入你要合併的 PNG 圖檔,只支援PNG喔!
  3. 開一張例如 sprite.scss 檔案,寫入
    @import "compass/utilities/sprites";//需先引用compass的工具, 我試過沒寫也可以,可能預先已經加載了
    @import "my-icons/*.png"; //『my-icons』是你自訂的資料夾名稱, 這裡是範例
    @include all-my-icons-sprites; // 『all-』 後面接著的 『my-icons』也記得是你自訂的資料名稱
  4.  接著會產出 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圖片合併功能

  5. 如果看到產生錯誤『NoMethodError: undefined method `parent’ for nil:NilClass』,那就是你的圖片名稱用了不合法命名方式,例如用了數字當作開頭,例如『001save.png』『中文標題.png』這樣都不行喔。圖片命名記得開頭要英文喔。
  6. 最後你的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
    }
  7. 當然,這樣子看起來一定很麻煩,因為每使用一張圖片就要手動去查寬度跟高度,有沒有什麼方法可以把寬度高度也一次固定出來呢?有的,請加入這項參數
    $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』

  8. 如果你要使用 『<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中針圖片精靈的某些張圖片做個別調整,那麼使用進階方法比較適合喔。

 

sass – scss – susy – css – 排版速記表

@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); //左右貼齊, 中間平均分配

 參考

susy – scss – map 環境設定解說

//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
      )
);