6.プロパティのネスト ー フロントエンドエンジニアのための「Sass」講座
Sassではセレクタだけでなく、プロパティもネストして書くことができます。
例えば、marginやborderなどショートハンドが存在するプロパティは、ハイフンのところで区切ってネストができます。
CSSで上下左右のマージンを別々に書くと、このようになります。
|
1 2 3 4 5 6 |
.box { margin-left: 20px; margin-right: 20px; margin-top: 0; margin-bottom: 40px; } |
これを、ネストして書くとこうなります。
|
1 2 3 4 5 6 7 8 |
.box { margin: { left: 20px; right: 20px; top: 0; bottom: 40px; } } |
「margin」の後ろに「:（コロン）」がついているのがポイントです。
【動画講座】 フロントエンドエンジニアのための「Sass」講座 ~基礎から実践まで~
HTML5とCSS3の基本的な知識があれば、Sassの知識はゼロからでも大丈夫!Udemyの動画講座なら、約5時間の動画でWeb開発の現場で使える技術を身につけることができます！
このブログから申し込むと定価1,2000円のところ、
90%OFFの1,200円で受講できるクーポンをプレゼント！
Books
平澤 隆,森田 壮 インプレス 2017-09-15
