| 前のリビジョン |
— | windows:sublime [2019/05/18 02:23] (現在) – 外部編集 非ログインユーザー |
---|
| ====== 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の教科書 - 公式サポートサイト]]\\ |