『オブジェクト指向』の『継承』という考え方でボタン作成。
rensyu.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>scssでボタン作成</title>
<link rel="stylesheet" href="style02.css">
</head>
<body>
<ul>
<li><a href="#" class="foodButton yakiniku">焼肉</a></li>
<li><a href="#" class="foodButton gyouza">餃子</a></li>
<li><a href="#" class="foodButton ramen">拉麺</a></li>
<li><a href="#" class="foodButton osushi">寿司</a></li>
</ul>
</body>
</html>
style02.scss
li {
list-style:none;
display:inline-block;
}
.foodButton {
background: gray;
border-radius: 5px;
width:100px;
height:44px;
display:inline-block;
text-decoration:none;
line-height:44px;
text-align:center;
color:white;
&.yakiniku { background: orange; } //継承
&.gyouza { background: blue; } //継承
&.ramen { background: yellow; } //継承
&.osushi { background: green; } //継承
}
グローバル変数とローカル変数
$mainWidth: 560px; // グローバル変数①
.sample2 {
$mainWidth: 800px; // .sample2でローカル変数を作成。ローカル変数が使われる。
width: $mainWidth - 12px;
height: 50px + 10px;
padding: 12px * 12;
margin: (100px / 3);
}
.sample3 {
width: $mainWidth; //.sample3のなかでローカル変数を作ってないのでグローバル変数①が使われる。
}
@extend（継承）を使う
.box1 {
color: blue;
background-color: white;
}
.box2 {
@extend .box1;
width:300px;
}
style02.scssを@extendを使って記述
li {
list-style:none;
display:inline-block;
}
.foodButton {
background: gray;
border-radius: 5px;
width:100px;
height:44px;
display:inline-block;
text-decoration:none;
line-height:44px;
text-align:center;
color:white;
}
.yakiniku {
@extend .foodButton;
background: orange;
}
.gyouza {
@extend .foodButton;
background: blue;
}
.ramen {
@extend .foodButton;
background: yellow;
}
.osushi {
@extend .foodButton;
background: green;
}
@extendは継承したものを更に継承させることが可能
.foodButton {
background: gray;
border-radius: 5px;
width:100px;
height:44px;
display:inline-block;
text-decoration:none;
line-height:44px;
text-align:center;
color:white;
}
.yakiniku {
@extend .foodButton;
background: orange;
}
.gyouza {
@extend .foodButton;
background: blue;
}
.ramen {
@extend .foodButton;
background: yellow;
}
.osushi {
@extend .foodButton;
background: green;
}
.chahan {
@extend .osushi;
width: 200px;
}
ミックスイン
@mixin boxSet {
padding: 15px;
background: #ccc;
color: white;
}
.box3 {
@include boxSet;
}
@mixin clearfix {
content: " ";
display: block;
clear: both;
}
#content {
width: 960px;
:after {
@include clearfix;
}
}
ミックスインは引数も使える（ただし関数ではない。）
@mixin box4($value){
width: $value;
margin-right: $value + 100px;
}
#main {
@include box4(960px);
}
@mixin kadomaru($value){
border-radius: $value;
-moz-border-radius: $value;
}
.box5 {
@include kadomaru(5px 10px);
}
関数
lighten( ); ⇒ 明るくする関数
darken( ); ⇒ 暗くする関数
.yakiniku {
@extend .foodButton;
background: lighten(orange, 30%);
}
.gyouza {
@extend .foodButton;
background: darken(blue, 30%);
}
条件分岐
$torf: true;
@if $torf {
.box7 {
float:left;
}
}
