SassSass

No Image

Sassで使用する変数のスコープについて確認したのでメモ。
特にグローバル変数の上書きについては、覚えておきたい。

Sassの変数のスコープ

Sassの変数には、他のプログラミング言語等と同じくスコープ(有効な範囲) ...

Gulpの基礎知識Gulp

No Image

Gulpでpackage.jsonにないプラグインを削除する方法のメモ。

npm install コマンドと合わせて使うと、Gulpのプラグイン管理がとても楽になります。

package.jsonにないプラグインを削 ...

Gulpの基礎知識Gulp

No Image

Gulpは様々なプラグインで機能を追加することができます。
しかし、普段使用するプラグインが増えれば増えるほど、別のプロジェクトでGulpを使用するとき、毎回一からプラグインをインストールするのに手間がかかります。
そ ...

SassSass

No Image

Sass便利だなぁと思いつつ使っていない機能とかが結構あるので、あらためてSassでできることを確認。

基本事項Sassとは「Syntactically Awesome StyleSheet」の略。
sass記法とscss ...

SassSass, CSS, BEM

No Image

優れた命名方法である一方、どうしても長ったらしいクラス名になってしまう難点を持つBEM。
そんなBEMですが、Sassの「&」を使うことでBEMの長いクラス名を簡単に書くことができます。

ちょっと感動するく ...

Atomのパッケージ(プラグイン)Atom, Gulp

GulpをAtomから起動・停止可能にするパッケージ「gulp-control」を紹介します。

「gulp-control」パッケージの特徴

まずは「gulp-control」パッケージの特徴とメリットの紹介から。

導 ...

Atomのパッケージ(プラグイン)Atom

No Image

Atomの「tool-bar」「flex-tool-bar」パッケージがいい感じなので紹介。
ショートカットアイコンを自由に設置可能なツールバーを作成するパッケージです。

各パッケージの概要

まずは、今回紹介するパッ ...

Gulpの基礎知識Gulp, Sass, EJS, CSS

No Image

基本的なGulpのタスクをコード付きでまとめて紹介します。
技術的なこと、基礎としての記述方法の紹介などはすでに充実した記事がネット上にあるため、ここでは実際のタスク紹介をメインで扱います。

実際に使用・動作してい ...

BEMSass, CSS, BEM

No Image

CSSはサイトの長期運営・規模拡大に伴って複雑化し非常に壊れやすいものです。
壊れにくいCSSを作成するには、明確なルールが必要不可欠です。今回は、CSSの設計に有用な方法論であるBEMについて紹介するとともに、BEMを理解す ...

GulpプラグインGulp

No Image

優れたプラグインが多いGulpですが、似たような機能を持つプラグインが複数あったりもして、最初はどのプラグインがいいかわからないのではないでしょうか。

このページでは、私が実際に使用した中で、個人的に使用頻度が高く、かつ導 ...