Más contenido relacionado
La actualidad más candente (20)
Similar a WebデザイナーのためのSass/Compass入門 (20)
Más de Koji Ishimoto (16)
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継承したセレクタ