Sassでショートハンドを使用しない書き方

2015.4.10

Sassは、コンパイルすると勝手にショートハンド(短縮プロパティ)で記述してくれます。
しかし、ショートハンドでの記述は便利な反面、バグの原因になることもあります。
一例をあげると、Androidの標準ブラウザでは背景画像をショートハンドで記述することで、表示されなくなったり、小さく表示されてしまうといったことがあるようです。

参考:Android標準ブラウザがbackground短縮プロパティでbackground-sizeを初期化してくれない

そのため、ショートハンドを使用しないことが望ましい場合もあります。

では、Sassでショートハンドを使用せず記述するにはどのように記述するかですが、Sassは、プロパティをネストすることができるので、下記のように記述します。

.sample {
	background:{
		image: url(sample.png);
		position: 0 0;
		repeat: no-repeat;
		size: cover;
	}
}

このように記述することで、コンパイル後もショートハンドにならず、
不要なバグを回避することができます。

Sass使用時にショートハンドが悪さをした際は、プロパティをネストできることを思い出してみてください。

Related Posts