Kのプログラミング勉強ブログ

プログラミング勉強中のKです。できるだけ簡潔に、勉強したことをブログに載せていこうと思います。

2015-09-06から1日間の記事一覧

【Sass】Sassファイルの変更内容をcssファイルに自動更新させたい

Sassファイルは便利だけど、いちいちコンパイルしなければ画面内容を見れないのがしんどいですよね。そんな時に役にたつのが、自動更新してくれるコマンド sass --watch test.scss:test.css これでずっと自動更新しつづけてくれる。例えばtest.scssを更新す…

【Sass】CSSファイルの最後の改行を付ける方法

現状、sassファイル(test.scss)を以下のコマンドでコンパイルすると 以下のように最後の「 } 」の前の改行がなくなってしまう。 $ sass test.scss:test.csstest.css ul li { font-size: 15px; } この改行を付けるためには、以下のコマンドにすればいい。 $ s…

【Sass】Sassとは?CSSをより美しく書く。(使い方編)

【導入】 Sassファイルとは、CSSの拡張ファイルです。 例えば、以下の様な記法をすることができます。test.scss .test { p { font-size:15px; } } これはCSSでいう、以下の記述と同じです。 .test p { font-size: 15px; } 例えば、こんな書き方ができると 「…

【SublimeText】複数ファイルを表示させながら作業したい

例えばHTMLとCSSを同時に編集する時、同時に見ていたいですよね。こんな時にもSublime Textなら解決できます。例えば2ファイルをみたい時には、以下のコマンド。Command + Option + 2 例えばCSSファイルを右にしたければ、あとは右にタブをドラック&ドロップ…

【SublimeText】スニペットを使ってテンプレートを呼び出す

いっつも入力する様な当たり前の表記。例えばHTMLの <html> <head> <title></title> </head> <body> </body> </html> のくだり。書くの面倒くさいですよね。これがスニペットを使うと解消されます。 ① Command + Shift + P でコマンドパレットを呼び出します。 ② ここに「snippet html」と打ってみましょう。 ③そし…

【Sublime Text】ショートカットキーを覚えたい!(コマンドパレット)

SublimeTextって便利ですけど、機能が色々あり過ぎて覚えられないですよね…でも色々知って、より有効に使いたい! でもキャッチアップする時間をまるまる取るのは御免!そんな人(私とかw)のためにあるのがコマンドパレットです。Command + Shift + P例えば以…

【Sublime Text】同じ文字列を一括編集する方法

以下のテキスト中で「test」⇨「hogehoge」と変換していきます。(Mac版) ① Command + F で検索画面にし(下部に検索機能が出力されます)、「test」と入力します。 ②「Find All」を押下すると、testの部分すべてにカーソルがあたります。 ③あとはタイピングして…

【Sublime Text】エディターの背景色を変えたい

基本設定(n) > カラースキーマ から設定できる模様。英語だと以下の様です。 Settings(n) > Color Schemeメモメモ。