This domain may be for sale!
This domain may be for sale!
はじめに このシリーズ「すぐに使えるSCSS入門シリーズ」ではScoutを使ってコンパイルしてきました。 最近Sublime Text 2のライセンスも買って、本格的に使い始めました。 そこで、今回はSublime Text 2(Windows, Mac)を使ってコンパイルする方法を調べたので、まとめて紹介したいと思います。 この記事ではデザイナーに苦手な人が多いかもしれない黒い画面「コマンドプロンプトとターミナル」を利用します。 難しいんじゃないかと思うかもしれませんが、是非挑戦してみてください。そのうち大したことしてないじゃんと思えるようになります。 主な流れ 主な流れはこんな感じで、最初に黒い画面でコマンドを入力していきます。 それが終わればSublime Text 2の設定を行い、コンパイルを試します。 Rybyのインストール インストールの確認とコンソール Sassのインストール
HOME>Web>「Sublime Text」のみでCompassとSass(Scss)を使えるようセッティングしてみたのでその手順と参考にした記事まとめ Compass、Sass(Scss)とは? Sass(Scss)とは? Sass(Scss)とは、CSSを記述するために開発されたメタ言語のこと。長くなりがちなコードを短くできたり、関数などを使用してより便利にスタイルシートが書けるという代物です。CSSの管理が非常に楽になります:) Sassには、プログラムのような書き方をする「Sass」と、よりCSSに近い記述が可能な「Scss」とがあるのですが、根本的には変わりありません。(記述方法が違う) ちなみに、私はScssを利用しております。 どんなことができるの ではちょいと実例をば。ScssではCSSを簡単に書くためのルールがたくさん用意されておりますのでさっくりとご紹介。 [css]
Sublime Textのさまざまなパッケージの中から、利用シーン別におすすめのものを紹介。また、Sublime Textのパッケージの基本的な使い方として導入方法や有効化/無効化、削除の方法も説明する。 ← 前回 連載 INDEX 今回はSublime Textのさまざまなパッケージの中から、特におすすめのものを紹介する。 Sublime Textのパッケージ Sublime Text自体はオープンソース・ソフトウェアではないが、内部機能を操作するためのAPI(API Reference - Sublime Text 3 Documentation)が公開されている。また、メジャーなスクリプト言語であるPythonのランタイムが搭載されているので、誰でもパッケージを作成できる。 そのため、パッケージの作成は盛んで、2014年12月時点登録されている公式パッケージは2600以上となっている
Expand Selection to WordでのTipsをいくつか紹介する。 例えば1つおきに編集したい場合などは、Ctrl(Win)/Command(Mac)+Kキーで選択がスキップできる(図2.1)。また、Ctrl(Win)/Command(Mac)+Dキーを入力しすぎて、想定よりも多く選択してしまった場合は、Ctrl(Win)/Command(Mac)+Uキーで、選択をUndoできる。ちなみに、Ctrl(Win)/Command(Mac)+Uキーは、Ctrl(Win)/Command(Mac)+ZキーではUndoできないものをサポートしているので、ここで解説している例だけでなく、例えば複数行選択で↓キーを押しすぎた場合などでも利用できる。 また、同じ文字列を一気に複数選択する場合は、Alt+F3キー(Win)/Ctrl+Command+Gキー(Mac)で行える。 Expand S
上記の記事にもあるように、Sublime Text 2は次の3つのディレクトリ Packages Installed Packages Pristine Packages 内のファイルで設定を行っている。 これら3つのディレクトリをDropboxで同期し、本来あるべき場所からシンボリックリンクを張ることで設定を同期することができる。 その本来あるべき場所はそれぞれ次のとおり。 Windows: C:\Users\(ユーザー名)\AppData\Roaming\Sublime Text 2\ Mac: /Users/(ユーザー名)/Library/Application Support/Sublime Text 2/ Ubuntu: /home/(ユーザー名)/.config/sublime-text-2/
via Impress Japan: Web制作者のためのSublime Textの教科書 今すぐ最高のエディタを使いこなすプロのノウハウ サンプルPDF4章の目次より ※説明は私の調べたものなのでかなり適当です。 SideBarEnhancements サイドバー右クリックのメニューを拡張 titoBouzout/SideBarEnhancements LineEndings 改行コードの変更。 SublimeText/LineEndings ※現状、SublimeText3で動かないです。143Pのコラムで動かし方について言及がある模様。 TrailingSpaces 行末の半角スペースを削除。 SublimeText/TrailingSpaces Focus Last Tab Sublime Text 2 では、Chrome などのタブブラウザーと同じように command + 1
Command Palette Open the command palette Win/Linux: ctrl+shift+p, Mac: cmd+shift+p Type Install Package Control, press enter This will download the latest version of Package Control and verify it using public key cryptography. If an error occurs, use the manual method instead. Manual If the command palette/menu method is not possible due to a proxy on your network or using an old version of Sublim
Mac上で動くいい感じのdiffツールがない マシンをWinからMacに乗り換えて必要なツール群をひと通りそろえようとしたら、もっとよくなった物もあるし、Mac版もあってそのまま持ってこれた物もある。ただしdiffツールはイマイチいいのがない。 WinではDFとか、winmergeなどの強烈に使いやすいツールがあったけれど、Macでは驚くほど見つからない。そもそも選択肢が少ないうえ、日本語が入ったファイルでの差分比較がうまく動作しないなどを始めとして、問題が多すぎた。最有力候補であったP4mergeはスクロールが重すぎるのと、フォントの問題で表示が崩れたりした。残念。 結局、sublime text 2のパッケージを使ってとりあえずファイル間の差分はいい感じに取れるようになったので使い方を書いておく。 sublimerge proのインストール PackageControlは導入済みで
複数のファイル内から文字列を検索して、一括置換する staticなhtmlだろうとテンプレートエンジンだろうと、膨大なファイルに書かれた文字列を対して全て修正しなくてはならない局面に当たることがある。たとえば「電話番号が変わったのでサイト内の表記を全部直したい」だとか、「CSSのクラス名の英語が誤字ってる・・・」だとか、「このパーツのマークアップ構造を変更したい」だとか、そんなとき。 1ファイル開いて検索して書き換えて、次、とやるのはとてもじゃないが御免被り。修正対象がいったいいくつあるかも定かではないのに。それで威力を発揮するのがgrep。複数のファイル内を走査して対象の文字列を検索できる。linuxに明るい人ならターミナルでぺちぺちとやってしまえるし、IDEを使っていればそういう機能はだいたい入っていると思うけど、僕はIED嫌いのGUI大好き人間なのでイマイチやりたくない。 ブログでも
この記事は、 Vim Advent Calendar 2012 の83日目(!)の記事です。 昨日の記事は ujihisa さんの「unite.vimのfile_recで無視リストを追加する」。 — こんばんは。 目に優しい黒背景が大好きなcocoponです。 エディタの配色って大事ですよね。 見やすさは、コーディングの速度に直結します。 黒背景のvimを全画面表示にすれば、自然とテンションも上がってきますね。 一生ついていくと決めていた「jellybeans」黒背景のカラースキームといえば、迷うことなく「jellybeans」をオススメしてきました。 クールながらも落ち着いた、絶妙な配色。 はじめて出会ったときは、その完成度に圧倒されたまま「一生ついていく」と心に決めたスキームでありました。 しかし、気になる点もいくつかありました。 例えば、JavaScriptの正規表現。 黒背景に濃い
Sublime Text 2にインストールしたプラグイン、しばらく使ってみるとアンインストールしたほうが効率がいいってときありますよね。 そんな場合はもちろんアンインストールすることになるんですが、インストール方法の記事はいっぱいあってもアンインストール方法をまとめた記事が無かったので書いてみました。 (そんなの調べなくてもわかるでしょって雰囲気は気にしないでいきますよ!) パッケージコントロールを導入している場合 Sublime Text 2のプラグインを管理するのにとっても便利なPackage Controlですが、こいつを入れている場合は、Package Controlを使ったプラグインのインストールと同様な感じでアンインストールしてあげればOKです。 Ctrl+Shift+P ↓ 「Package Control: Remove Package」と入力して… ↓ 任意のプラグインを
Code: NoSuchKey Message: The specified key does not exist. Key: memo/archives/【sublime-text-2】mac-os-xで日本語入力のタブ変換ができなくな.html RequestId: 9303700AB36677A3 HostId: +7Xp9+kozhVgdmnPxnR946Fqw0mZUwCQwX5k4nKV+Il5zSfcFEBYcKkcKzZ9iPI6eF6/98DdIH4= An Error Occurred While Attempting to Retrieve a Custom Error Document Code: NoSuchKey Message: The specified key does not exist. Key: /memo/404.html
2012年12月4日:Vim化について指摘と参考になる情報をいただいたので追記しました。 こんにちは、僕はVimユーザーです(ちなみにVimを完璧に使いこなしているわけではありません)。 今更ながら「Sublime Text 2」というナウでヤングなエディタも使いこなせるようになりたいと思い、Sublime Textの基本設定からプラグインやスニペットの作り方まで調べた内容をこの記事にまとめることにしました。 細かい情報までまとめることはできなかったので、より詳しい内容を紹介してくださっているブログやサイトへのリンクを設けています。 この情報以外にもSublime Text 2をVimに近づけるプラグインやカスタマイズ方法があればコメントいただけるとうれしいです。 また、間違いがあればコメントいただければすぐに直します。よろしくお願いします! Sublime Text 2は有料($59)の
Sublime Text 2に、括弧を強調表示するパッケージ「Bracket Highlighter」を導入しました。括弧の強調表示の他にもいろいろと便利な機能があります。使い方をまとめました。 インストール方法 Package Controlを使って、[Install Package]→[Bracket Highlighter]とするのが一番手軽です。Package Controlを使わない場合は「Bracket Highlighter」のGithubからファイルをダウンロードして、Sublime Text 2のPackageフォルダにコピーします。 括弧、タグの強調表示 Bracket Highlighterをインストールすると、現在のカーソル位置を囲む位置にある括弧 () / {}/ “” / ” が色付けして表示されるようになります。 HTMLやXHTMLの場合、タグにカーソルを合
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く