Sassでショートハンドを使用しない書き方
Sassは、コンパイルすると勝手にショートハンド(短縮プロパティ)で記述してくれます。
しかし、ショートハンドでの記述は便利な反面、バグの原因になることもあります。
一例をあげると、Androidの標準ブラウザでは背景画像をショートハンドで記述することで、表示されなくなったり、小さく表示されてしまうといったことがあるようです。
参考:Android標準ブラウザがbackground短縮プロパティでbackground-sizeを初期化してくれない
そのため、ショートハンドを使用しないことが望ましい場合もあります。
では、Sassでショートハンドを使用せず記述するにはどのように記述するかですが、Sassは、プロパティをネストすることができるので、下記のように記述します。
.sample {
background:{
image: url(sample.png);
position: 0 0;
repeat: no-repeat;
size: cover;
}
}
このように記述することで、コンパイル後もショートハンドにならず、
不要なバグを回避することができます。
Sass使用時にショートハンドが悪さをした際は、プロパティをネストできることを思い出してみてください。