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