ユーザ用ツール

サイト用ツール


windows:sublime

差分

この文書の現在のバージョンと選択したバージョンの差分を表示します。

この比較画面にリンクする

windows:sublime [2019/05/18 02:23] (現在)
ライン 1: ライン 1:
 +====== Sublime Text 3 - sass/​compass ビルド環境の構築方法 ======
  
 +===== Sublime Text 3 のインストール =====
 +  - [[http://​www.sublimetext.com/​3|Sublime Text 3]]より[[http://​c758482.r82.cf2.rackcdn.com/​Sublime%20Text%20Build%203059%20Setup.exe|Windows]]/​[[http://​c758482.r82.cf2.rackcdn.com/​Sublime%20Text%20Build%203059%20x64%20Setup.exe|Windows 64 bit]]をダウンロードする。
 +  - Sublime Text Setup.exe を実行する。
 +
 +===== Sublime Text 3 の日本語化 =====
 +  - Sublime Text 3 を起動する。
 +  - Package Control をインストールする。
 +    - [Ctrl + @] でコマンドパレットを開く。
 +    - 以下のコードをコマンドパレットに貼り付けて実行する。<​code python>
 +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())
 +</​code>​実行結果<​code>​
 +132375
 +reloading plugin Package Control.Package Control
 +found 2 files for base name Main.sublime-menu
 +Package Control: No updated packages
 +</​code>​
 +    - 以下のコードもコマンドパレットに貼り付けて実行する。([[https://​sublime.wbond.net/​installation|Installation - Package Control]])<​code python>
 +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)
 +</​code>​実行結果<​code>​
 +132375
 +</​code>​
 +  - [Ctrl + Shift + P]でPackage Controlを開く。
 +  - 検索ボックスに「Pack」を入力して「Package Control:​Install Package」を選択する。
 +  - 検索ボックスに「japanize」を入力して「japanize」をインストールする。\\ ※ここまででメニュー表面だけ日本語化される。メニュー階層すべてを日本語化する為に以下の手順を実行する。
 +  - 更にメニュー階層すべてを日本語化する。\\ 以下のコマンドを実行する。<​code>​
 +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
 +</​code>​
 +  - IME Support をインストールする。
 +    - [Ctrl + Shift + P]でPackage Controlを開く。
 +    - 検索ボックスに「Pack」を入力して「Package Control:​Install Package」を選択する。
 +    - 検索ボックスに「IME Support」を入力して「IME Support」をインストールする。
 +
 +===== Sass/​Compass ビルドパッケージのインストール =====
 +  - [Ctrl + Shift + P]でPackage Controlを開く。
 +  - 検索ボックスに「Pack」を入力して「Package Control:​Install Package」を選択する。\\ 以下のパッケージをすべてインストールする。
 +    - Sass
 +    - SASS Build
 +    - SCSS
 +    - SCSS Snippets
 +    - Compass
 +
 +===== Sass/​Compass プロジェクトの作り方 =====
 +  - プロジェクトフォルダを作成する。<​code>​
 +> mkdir D:\Sample
 +</​code>​
 +  - Sublime Text のメニューの[プロジェクト]->​[名前を付けてプロジェクトを保存]をクリックする。
 +  - D:\Sample に sample.sublime-project ファイルを保存する。
 +  - プロジェクトフォルダに sass フォルダを追加する。<​code>​
 +> d:
 +> cd Sample
 +> mkdir sass
 +</​code>​
 +  - メニューの[プロジェクト]->​[プロジェクトにフォルダを追加]をクリックする。
 +  - 「フォルダーの選択」画面で sass を選択して[フォルダの選択]ボタンをクリックする。
 +  - D:​\Sample\sass に teat.scss を作成して保存する。<​code css>
 +#main {
 + width: 600px;
 + p {
 + margin: 0 0 1em;
 + em {
 + color: #f00;
 + }
 + }
 + small {
 + font-size:​ small;
 + }
 +}
 +</​code>​
 +  - D:\Sample に config.rb を作成して保存する。<​code ruby>
 +http_path = "/"​
 +css_dir = "​css"​
 +sass_dir = "​sass"​
 +images_dir = "​image"​
 +javascripts_dir = "​js"​
 +output_style = :nested
 +line_comments = false
 +</​code>​
 +  - Sublime Text で test.scss タブを選択して [Ctrl + B] を入力すると scss がビルドされる。
 +    - D:​\Sample\css フォルダが生成される。
 +    - D:​\Sample\css\test.css ファイルが生成される。
 +
 +
 +===== 参考文献 =====
 +[[http://​luna-plate.com/​archives/​4637|Sublime Text 3 - 日本語化]]\\
 +[[http://​www.shirokuro331.net/​cobalt/?​p=712|Sublime Text 2 で Sass/​compass のコンパイルができるパッケージ 『Compass』]]\\
 +[[http://​book.scss.jp/​about/​c7/​editor/​st.html|SublimeText(Windows、Mac)をSassで使いやすい設定にする | Web制作者のためのSassの教科書 - 公式サポートサイト]]\\
windows/sublime.txt · 最終更新: 2019/05/18 02:23 (外部編集)