読者です 読者をやめる 読者になる 読者になる

Sass 継承など

html/css関連

オブジェクト指向』の『継承』という考え方でボタン作成。

f:id:ts0818:20150422193941p:plain

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;
  }
}

広告を非表示にする