CSS – SCSS – SUSY2 – 配合 map, 自訂 breakpoint 斷點的 mixin

2014-10-28 / JSN / 0 Comments / 242 次瀏覽

可以用 map 設定你需要的屏幕

    //設定三種尺寸
    $break_layout : 
    (
        mobile: 
        (
            break:  0px,
            layout: 4
        ), 
        pad: 
        (
            break:  640px,
            layout: 8
        ), 
        desktop: 
        (
            break:  1280px,
            layout: 12
        )

    );

 

接著套上 mixin

    //方便撰寫的自訂 mixin 斷點樣式
    @mixin _break($screen: mobile)
    {
        $map  :  map-get($break_layout, $screen);
        $break:  map-get($map, "break");
        $layout: map-get($map, "layout");

        @include susy-breakpoint($break, $layout)
        {
            @content;
        }
    }

 

然後在 SCSS 裡面就可以這麼寫了

    .container 
    {
        @include _break("mobile")
        {
            @include container();
            height: 100%;
        }    
        @include _break("pad")
        {
            @include container();
        }    
        @include _break("desktop")
        {
            @include container();
        }    
    }

 

css – scss – map的應用方式

2014-10-28 / JSN / 0 Comments / 69 次瀏覽

其實就是CSS的陣列囉

$color : (
    a: "red",
    b: "blue"
);


body 
{
    color: map-get($color, a); // => color: "red";
}

 

sublimetext – php – scss – susy – jQuery – 我安裝的外掛、設定、同步備份安裝檔

2014-09-29 / JSN / 0 Comments / 1,903 次瀏覽

這裡記錄我在 Sublimetext 3  上面安裝的外掛~

外掛元件

  • IMESupport：打中文可以在游標處直接顯示；而不會像預設的在編輯器之外顯示中文。
  • JavaScript Completions： JavaScript 輔助片段
  • BracketHighlighter：讓你的 { } 有高亮效果
  • Alignment：自動對齊功能，例如讓等號自動對齊
  • CodeIgniter Snippets：php 的 CodeIgniter 片段
  • ColorPicker：色彩選擇器
  • DocBlockr：快速編輯註解功能
  • Emmet：快速編輯 html 的工具
  • jQuery： jQuery片段
  • LiveStyle：配合 Chrome 的即時顯示CSS
  • SASS Snippets：寫SASS的片段
  • Sass：SASS 的支援
  • SCSS Snippets：寫SCSS的片段
  • SCSS：寫 SCSS 的片段
  • Compass：使用Compass的片段
  • SideBarEnhancements：擴充側邊欄的功能，豐富一些常用的指令，例如複製、貼上、重新命名、顯示資料夾等等。
  • SublimeLinter：偵錯的總裝置，須要先安裝。可以偵錯其他語言，但要額外安裝。
  • SublimeLinter-php：擴充偵錯PHP。記得先安裝 SublimeLinter 。
    (103/10/10 今天似乎有更新，在XAMPP已經可以正常使用了，無需做任何設定)
  • Susy Snippets：SUSY ONE 的片段。
  • Boxy Theme：好看的 Theme。
  • SFTP：付費，可試用只是會跳出購買訊息。可以一邊編輯文件，存檔並上傳到FTP。
  • SublimeCodeIntel：可以顯示如 php 的結構。
    因為在 HTML 的時候，我需要用 Emmet 快速切版，每次鍵盤一按下就跳出自動完成選單，當按tab就會選到不是自己要的Emmet自動完成，所以我會把 SublimeCodeIntel 的設定修改成只有 PHP 使用。這樣HTML打任何字時才不會跳出惱人的自動完成候選單。

    /*
   An array of language names which are enabled.
*/
"codeintel_enabled_languages":
[
   "PHP"
],

     

  • TortoiseGIT：在Windows可以使用快捷鍵，呼叫 Git commit 指令。滿方便的。 
    {
    // Auto close update dialog when no errors, conflicts and merges
    "autoCloseUpdateDialog": false,
    "tortoiseproc_path": "C:\\Program Files\\TortoiseGit\\bin\\TortoiseGitProc.exe" //你的 TortoiseGit 執行位置
}
  • ASCII Decorator：可以產生英文大圖字，當程式碼很長的時候用在編輯器右側 minimap 可以很明顯的標註位置。例如…
    擷取

    // 先打英文字
// 反白後，按下 ctrl+shift+p 選擇 ASCII Decorator: Font Selector 可以選擇你要的字型
  • phpfmt：自動格式化 php。我的設定 
    {
	"autocomplete": true,
	"disable_auto_align": true,
	"format_on_save": true,
	"merge_else_if": true,
	"php_bin": "C:/xampp/php/php.exe",
	"psr1": false,
	"psr2": true,
	"smart_linebreak_after_curly": true,
	"visibility_order": true,
	"yoda": false
}
  • Colorsublime：快速查看 package control 上已經發佈的 color scheme。
  • ColorSchemeEditor：使用 Shift + F12 編輯你當前 Color Scheme 的色彩。PHP 用戶有個推薦的色彩樣式，點我。

設定

讓正在編輯的程式碼區塊左側，從開始到結束之間的側邊線高亮；如果體有替換主體(theme)，注意有些主題的顏色不明顯喔。

"indent_guide_options":
[
	"draw_normal",
	"draw_active"
]

快捷鍵

  • Ctrl + K, Ctrl + V：可以跳出黏貼板
  • Ctrl+Shift+[ 或 Ctrl+Shift+] ：摺疊代碼
  • Ctrl+k, Ctrl+1/2/3/… 可折疊階層代碼
  • 若有安裝 Emmet,
    Ctrl+Shift+U 改變上層HTML標籤
    Ctrl+Shift+G 在上一層加入HTML包圍起來

多台主機同步方法

注意：我是下載免安裝的版本。路徑不確定跟安裝板是否相同。

第一台主機，先製作同步到Dropbox

複製『Data\Packages\User』到『你的Dropbox某個資料夾』。

這裡其實只複製記錄你有那些安裝包，並不是直接複製安裝包的安裝檔。因為直接複製安裝檔，在不同主機同步時會有可能發生相容問題(如同時 Windowx、Mac、Linux….)，所以應該由ST辨識有哪些安裝名稱，由ST自動去下載你該台主機適合的版本或解決相容問題。

第二台主機，取得個人設定與安裝包設定檔

直接複製『你的Dropbox某個資料夾\User』取代掉『Data\Packages\User』，然後重新開ST就可以了。如果你的Sublimetext 3 是剛下載下來，記得要先去安裝 Package Control喔，這樣重開ST的時候才會偵測並下載到你的編輯器裡。

Laravel – Webpack – 使用 Laravel-mix 在 Build 的時間太長的解法

2020-03-30 / JSN / 0 Comments / 288 次瀏覽

目前在 Laravel-mix 5.4 (package.json 找得到) 下指令 npm run dev 會跑上好幾分鐘，解決這個辦法可以在 webpack.mix.json 加入已下指令，運行飛快。

mix.options({ processCssUrls: false });

參考來源：https://github.com/JeffreyWay/laravel-mix/issues/287、JeffreyWay/laravel-mix#287 (comment)

NPM – Webpack – 使用 import 的絕對路徑方法

2019-03-25 / JSN / 0 Comments / 759 次瀏覽

預設的時候通常使用相對路徑，可是會很不容易管理，例如

import '../compoments/tabs'
import '../../template/helloWorld'

這時我們只要在 webpack.config.js 使用模塊的解析方式 “resolve” 來設定別名，就能在 import 的時候簡寫來能省去計算相對位置的麻煩，例如

module.exports = {
    //...
    resolve: {
        alias: {
            '@compoments': path.resolve(__dirname, 'assets/src/javascript/compoments'),
            '@template': path.resolve(__dirname, 'assets/src/javascript/template'),
            '@scss': path.resolve(__dirname, 'assets/src/scss'),
        }
    }
    
}

修改成

import '@compoments/tabs'
import '@template/helloWorld'
import '@scss/app.scss'

當然開頭的 @ 是我習慣自訂用來區別純單字的符號，你也可以不要使用，更多方法可以參考官網說明。

參考官方網站

1 2 3 4 5