More Related Content
Similar to WebデザイナーのためのSass/Compass入門 先生:石本 光司 (20)
More from schoowebcampus (20)
WebデザイナーのためのSass/Compass入門 先生:石本 光司
- 1. Introduction to Sass/Compass for Web Designer
Webデザイナーのための
Sass/Compass 入門
Ameba Headquarters Game Division
Web Developer Koji Ishimoto
2013.09.27
- 6. <- イマココ
2012/06 ~
Web Developer
Development, HTML/CSS/JavaScript
Web Director
Direction, Google Analytics
Web Designer
Design, HTML/CSS
- 9. Sass makes CSS fun again.
Sass is an extension of CSS3,
adding nested rules, variables, mixins,
selector inheritance, and more.
- 88. .box {
border: 1px #000 solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
CSS
- 89. .box {
border: 1px #000 solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
ミックスインが展開された部分
CSS
- 97. .message-box {
padding: 5px 10px;
border: 1px black solid;
font-size: 14px;
font-weight: bold;
}
.alert-box {
@extend .message-box;
border: 1px red solid;
color: red;
}
Sass
- 98. .message-box {
padding: 5px 10px;
border: 1px black solid;
font-size: 14px;
font-weight: bold;
}
.alert-box {
@extend .message-box;
border: 1px red solid;
color: red;
}
Sass
継承元を指定
- 100. .message-box, .alert-box {
padding: 5px 10px;
border: 1px black solid;
font-size: 14px;
font-weight: bold;
}
.alert-box {
border: 1px red solid;
color: red;
}
CSS継承したセレクタ