ユーザ用ツール

サイト用ツール


windows:sublime

Sublime Text 3 - sass/compass ビルド環境の構築方法

Sublime Text 3 のインストール

  1. Sublime Text 3よりWindows/Windows 64 bitをダウンロードする。
  2. Sublime Text Setup.exe を実行する。

Sublime Text 3 の日本語化

  1. Sublime Text 3 を起動する。
  2. Package Control をインストールする。
    1. [Ctrl + @] でコマンドパレットを開く。
    2. 以下のコードをコマンドパレットに貼り付けて実行する。
      import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener(urllib.request.build_opener(urllib.request.ProxyHandler())); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen('http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

      実行結果

      132375
      reloading plugin Package Control.Package Control
      found 2 files for base name Main.sublime-menu
      Package Control: No updated packages
    3. 以下のコードもコマンドパレットに貼り付けて実行する。(Installation - Package Control)
      import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

      実行結果

      132375
  3. [Ctrl + Shift + P]でPackage Controlを開く。
  4. 検索ボックスに「Pack」を入力して「Package Control:Install Package」を選択する。
  5. 検索ボックスに「japanize」を入力して「japanize」をインストールする。
    ※ここまででメニュー表面だけ日本語化される。メニュー階層すべてを日本語化する為に以下の手順を実行する。
  6. 更にメニュー階層すべてを日本語化する。
    以下のコマンドを実行する。
    mkdir "%USERPROFILE%\AppData\Roaming\Sublime Text 3\Packages\Default"
    cd "%USERPROFILE%\AppData\Roaming\Sublime Text 3\Packages"
    copy "Japanize\Context.sublime-menu.jp" "Default\Context.sublime-menu" /Y
    copy "Japanize\Indentation.sublime-menu.jp" "Default\Indentation.sublime-menu" /Y
    copy "Japanize\Main.sublime-menu.jp" "Default\Main.sublime-menu" /Y
    copy "Japanize\Side Bar Mount Point.sublime-menu.jp" "Default\Side Bar Mount Point.sublime-menu" /Y
    copy "Japanize\Side Bar.sublime-menu.jp" "Default\Side Bar.sublime-menu" /Y
    copy "Japanize\Tab Context.sublime-menu.jp" "Default\Tab Context.sublime-menu" /Y
    
    copy "Japanize\Main.sublime-menu" "User\Main.sublime-menu" /Y
  7. IME Support をインストールする。
    1. [Ctrl + Shift + P]でPackage Controlを開く。
    2. 検索ボックスに「Pack」を入力して「Package Control:Install Package」を選択する。
    3. 検索ボックスに「IME Support」を入力して「IME Support」をインストールする。

Sass/Compass ビルドパッケージのインストール

  1. [Ctrl + Shift + P]でPackage Controlを開く。
  2. 検索ボックスに「Pack」を入力して「Package Control:Install Package」を選択する。
    以下のパッケージをすべてインストールする。
    1. Sass
    2. SASS Build
    3. SCSS
    4. SCSS Snippets
    5. Compass

Sass/Compass プロジェクトの作り方

  1. プロジェクトフォルダを作成する。
    > mkdir D:\Sample
  2. Sublime Text のメニューの[プロジェクト]→[名前を付けてプロジェクトを保存]をクリックする。
  3. D:\Sample に sample.sublime-project ファイルを保存する。
  4. プロジェクトフォルダに sass フォルダを追加する。
    > d:
    > cd Sample
    > mkdir sass
  5. メニューの[プロジェクト]→[プロジェクトにフォルダを追加]をクリックする。
  6. 「フォルダーの選択」画面で sass を選択して[フォルダの選択]ボタンをクリックする。
  7. D:\Sample\sass に teat.scss を作成して保存する。
    #main {
    	width: 600px;
    	p {
    		margin: 0 0 1em;
    		em {
    			color: #f00;
    		}
    	}
    	small {
    		font-size: small;
    	}
    }
  8. D:\Sample に config.rb を作成して保存する。
    http_path = "/"
    css_dir = "css"
    sass_dir = "sass"
    images_dir = "image"
    javascripts_dir = "js"
    output_style = :nested
    line_comments = false
  9. Sublime Text で test.scss タブを選択して [Ctrl + B] を入力すると scss がビルドされる。
    1. D:\Sample\css フォルダが生成される。
    2. D:\Sample\css\test.css ファイルが生成される。

参考文献

windows/sublime.txt · 最終更新: 2019/05/18 02:23 (外部編集)