More Related Content
Similar to Sassをはじめからていねいに<概要−基礎編> (20)
Sassをはじめからていねいに<概要−基礎編>
- 4. .box {
padding: 10px;
h1 {
width: 100px;
}
}
1
サスペンションの略語。
自動車などの機械の部品。
2
アウグスト3世サス - ポー
ランド国王。
3
Syntactically Awesome
Style Sheets - メタ言語。
- 5. .box {
padding: 10px;
h1 {
width: 100px;
}
}
1
サスペンションの略語。
自動車などの機械の部品。
2
アウグスト3世サス - ポー
ランド国王。
3
Syntactically Awesome
Style Sheets - メタ言語。
- 21. .box {
padding: 10px;
.hoge1 {
width: 100px;
}
.hoge2 {
width: 200px;
}
}
.box {
padding: 10px;
}
.box hoge1 {
width: 100px;
}
.box hoge2 {
width: 100px;
}
Sass CSS
Step1. ネスト
- 22. Step2. 演算
.hoge {
width: 10 + 10px;
height: 20px -‐‑‒ 10px;
padding: 5px * 5;
margin: (50px) / 5;
}
.hoge {
width: 20px;
height: 10px;
padding: 25px;
margin: 10px;
}
Sass CSS
- 25. Step4. &
.hoge {
background: #fff;
color: #000;
&:hover {
color: red;
}
&.hidden {
opacity: 0.5;
}
.ie-‐‑‒hack &{
display: none;
}
}
.hoge {
background: #fff;
color: #000;
}
.hoge:hover {
color: red;
}
.hoge.hidden {
opacity: 0.5;
}
.ie-‐‑‒hack .hoge {
display: none;
}
Sass CSS
- 29. • @for
• @each
• #{$hoge}
• Compass
• @mixin
• @include
• @content
• @extend
…etc