Sassを使ってレスポンシブサイトをコーディングしてみる

f:id:CHOCOtan:20220412085528j:plain

素材
https://school.yachin29.com/0815test.zip

レスポンシブサイトを作る際にはメディアクエリーが必須ですが、これもSassのmixinを使う事で見通しの良い記述に変える事が出来ます。
またブレイクポイントやメインのカラーコードを変数化する事で効率化が図れます。

さらに、今回はmarginやpaddingの値を8pxの倍数に設定します。

変数の設定

$point-tablet: 959px;
$point-sp: 767px;

mixinの使い方

@mixin 名前 {
  @media (max-width:$point-tablet) {
    @content;
  }
}
@mixin sp {
  @media (max-width:$point-sp) {
    @content;
  }
}

body {
  background: #222;
  @include tablet {
      background: #f00;
  }
   @include sp {
      background: #df9e3d;
  }
}

index.html

<body>
<header>
<div class="inner">
<h1>THAI-NAMA</h1>
<nav class="g-nav">
<ul>
    <li><a href="#">CONCEPT</a></li>
    <li><a href="#">MENU</a></li>
    <li><a href="#">ACCESS</a></li>
    <li><a href="#">CONTACT</a></li>
</ul>
</nav>
</div>
</header>
    
<div class="main-visual">
<picture>
<source media="(min-width:641px)" srcset="img/main.jpg 980w" sizes="100%">
<source media="(max-width:640px)" srcset="img/main-sp-l.jpg 1280w" sizes="100%">
<img src="img/main.jpg" alt="">
</picture>
</div>
<p class="main-copy">THAI-NAMAは<br>
タイ風の家庭的な料理をご提供しているお店です。<br>
季節感を大切に、旬のものを使いつつ、楽しんで貰えるメニューを揃えています。</p>

<ul class="food">
<li><img src="img/sub1.jpg" alt=""></li>
<li><img src="img/sub2.jpg" alt=""></li>
<li><img src="img/sub3.jpg" alt=""></li>
</ul>

<div class="news">
<h2>NEWS</h2>
<dl>
<dt>2020/03/03</dt>
<dd>春のメニューを追加しました</dd>
</dl>
</div> 

<footer>
<ul class="footer-nav">
    <li><a href="#">CONCEPT</a></li>
    <li><a href="#">MENU</a></li>
    <li><a href="#">ACCESS</a></li>
    <li><a href="#">CONTACT</a></li>
</ul>
<div class="footer-wrapper">
<div class="footer-info">
<p class="tel"><a href="tel:03-1234-4567">03-1234-4567</a></p>
<p class="mail">reservation@thai-nama.net</p>
</div>
<div class="footer-address">
<p class="address-txt">〒150-0001 東京都渋谷区神宮前3-4-5 タイ生ビル1F</p>
<p class="jr">JR渋谷駅徒歩5分</p>
<p class="jr">JR原宿駅徒歩6分</p>
<p class="subway">副都心線、千代田線明治神宮前徒歩7分</p>
</div><!-- /.footer-address -->
</div><!-- /.footer-wrapper -->
<p class="copy-right"><small>Copyright 2020 THAI-NAMA</small></p>
</footer>
</body>

scssファイルを分割管理

今回はパーシャルファイルを使って変数や関数別に細かく分割管理していきます。

f:id:CHOCOtan:20220413075415j:plain

style.scss

@use "reset";
@use "var";


//pcレイアウト
header{
border-bottom: 2px solid var.$main-color;
}

.inner{
max-width: 980px;
margin: 0 auto;
padding: var.$unit*2 0;
display: flex;
justify-content: space-between;
@include var.tablet{
display: block;
}
h1{
width: 280px;
height: 42px;
background: url(../img/logo.png) no-repeat center center/contain;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
@include var.tablet{
margin: var.$unit*2 auto;
}
}
}

.g-nav{
width: 60%;
@include var.tablet{
width: 100%;
}
ul{
display: flex;
justify-content: center;
height: 42px;
align-items: center;
li{
margin: 0 var.$unit*3;
@include var.sp-l{
margin: 0 var.$unit;
}
@include var.sp-s{
margin: 0;
}


a{
color: #222;
padding: 10px;
&:hover{
text-decoration: underline 3px var.$footer-color;
}
}
}
}
}

main{
max-width: 980px;
margin: 0 auto;
}

.main-visual{
max-width: 980px;
margin:0 auto var.$unit*12;
}
.main-copy{
text-align: center;
font-size: var.$unit*2.5;
line-height: 2.5;
margin-bottom: var.$unit*10;
@include var.tablet{
padding: 0 var.$unit*2;
}
}

.food{
display: flex;
justify-content: space-between;
margin-bottom: var.$unit*10;
@include var.tablet{
padding: 0 var.$unit*2;
}
@include var.sp-l{
display: block;
}
li{
width: 32%;
@include var.sp-l{
width: 100%;
text-align: center;
margin-bottom: 30px;
}
}
}

.news{
margin-bottom: var.$unit*10;
@include var.tablet{
padding: 0 var.$unit*2;
}
h2{
font-size: var.$unit*3;
margin-bottom: var.$unit*2;
}
dl{
display: flex;
flex-wrap: wrap;
@include var.sp-s{
display: block;
}
dt{
width: 30%;
@include var.sp-s{
width: 100%;
margin-bottom: var.$unit*2;
}
&::before{
display: inline-block;
content: "";
width: var.$unit*2;
height: var.$unit*2;
background-color:var.$main-color;
margin-right: var.$unit*2;
border-radius: 4px;
}
}
dd{
width: 70%;
padding-left: var.$unit*2;
@include var.sp-s{
width: 100%;
padding-left: 0;
}
}
}
}
footer{
background-color: var.$footer-color;
color: #FFF;
@include var.tablet{
padding: 0 var.$unit*2;
}
.footer-nav{
display: flex;
justify-content: center;
padding: var.$unit*5 0;
li{
margin: 0 var.$unit*3;
@include var.sp-s{
margin: 0 var.$unit;
}
a{
color: #FFF;
padding: var.$unit*3 0;
&:hover{
text-decoration: underline 2px;
text-underline-offset: 3px;
}
}
}
}
.footer-wrapper{
max-width: 800px;
margin: var.$unit*3 auto;
display: flex;
padding: var.$unit*3;
@include var.sp-l{
display: block;
}
.footer-info{
width: 50%;
@include var.sp-l{
width: 100%;
margin-bottom: var.$unit*5;
}
p{
margin-bottom: 20px;
a{
color: #FFF;
}
}
}
.footer-address{
width: 50%;
@include var.sp-l{
width: 100%;
}
}
}
.copy-right{
text-align: center;
padding: var.$unit*3 0;
font-size: var.$unit*2.5;
}
}

_color.scss

//カラーの登録
$main-color:#c94343;
$footer-color:#60911d;

_break-point.scss

//ブレイクポイント
$point-tablet:979px;
$point-sp-l:640px;
$point-sp-s:480px;
$unit:8px;

_minxin.scss

@use "break-point" as var;

//mixinの登録
@mixin tablet {
  @media (max-width:var.$point-tablet){
  @content;
  }
}
@mixin sp-l {
  @media (max-width:var.$point-sp-l){
  @content;
  }
}
@mixin sp-s {
  @media (max-width:var.$point-sp-s){
  @content;
  }
}

_var.scss

@forward "color";
@forward "break-point";
@forward "mixin";

分割せずに１つにまとめたstyle.scss

@use "reset";

//カラーの登録
$main-color:#c94343;
$footer-color:#60911d;

//ブレイクポイント
$point-tablet:979px;
$point-sp-l:640px;
$point-sp-s:480px;
$unit:8px;

//mixinの登録
@mixin tablet {
  @media (max-width:$point-tablet){
  @content;
  }
}
@mixin sp-l {
  @media (max-width:$point-sp-l){
  @content;
  }
}
@mixin sp-s {
  @media (max-width:$point-sp-s){
  @content;
  }
}

//pcレイアウト
header{
border-bottom: 2px solid $main-color;
}

.inner{
max-width: 980px;
margin: 0 auto;
padding: $unit*2 0;
display: flex;
justify-content: space-between;
@include tablet{
display: block;
}
h1{
width: 280px;
height: 42px;
background: url(../img/logo.png) no-repeat center center/contain;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
@include tablet{
margin: $unit*2 auto;
}
}
}

.g-nav{
width: 60%;
@include tablet{
width: 100%;
}
ul{
display: flex;
justify-content: center;
height: 42px;
align-items: center;
li{
margin: 0 $unit*3;
@include sp-l{
margin: 0 $unit;
}
@include sp-s{
margin: 0;
}


a{
color: #222;
padding: 10px;
&:hover{
text-decoration: underline 3px $footer-color;
}
}
}
}
}

main{
max-width: 980px;
margin: 0 auto;
}

.main-visual{
max-width: 980px;
margin:0 auto $unit*12;
}
.main-copy{
text-align: center;
font-size: $unit*2.5;
line-height: 2.5;
margin-bottom: $unit*10;
@include tablet{
padding: 0 $unit*2;
}
}

.food{
display: flex;
justify-content: space-between;
margin-bottom: $unit*10;
@include tablet{
padding: 0 $unit*2;
}
@include sp-l{
display: block;
}
li{
width: 32%;
@include sp-l{
width: 100%;
text-align: center;
margin-bottom: 30px;
}
}
}

.news{
margin-bottom: $unit*10;
@include tablet{
padding: 0 $unit*2;
}
h2{
font-size: $unit*3;
margin-bottom: $unit*2;
}
dl{
display: flex;
flex-wrap: wrap;
@include sp-s{
display: block;
}
dt{
width: 30%;
@include sp-s{
width: 100%;
margin-bottom: $unit*2;
}
&::before{
display: inline-block;
content: "";
width: $unit*2;
height: $unit*2;
background-color:$main-color;
margin-right: $unit*2;
border-radius: 4px;
}
}
dd{
width: 70%;
padding-left: $unit*2;
@include sp-s{
width: 100%;
padding-left: 0;
}
}
}
}
footer{
background-color: $footer-color;
color: #FFF;
@include tablet{
padding: 0 $unit*2;
}
.footer-nav{
display: flex;
justify-content: center;
padding: $unit*5 0;
li{
margin: 0 $unit*3;
@include sp-s{
margin: 0 $unit;
}
a{
color: #FFF;
padding: $unit*3 0;
&:hover{
text-decoration: underline 2px;
text-underline-offset: 3px;
}
}
}
}
.footer-wrapper{
max-width: 800px;
margin: $unit*3 auto;
display: flex;
padding: $unit*3;
@include sp-l{
display: block;
}
.footer-info{
width: 50%;
@include sp-l{
width: 100%;
margin-bottom: $unit*5;
}
p{
margin-bottom: 20px;
a{
color: #FFF;
}
}
}
.footer-address{
width: 50%;
@include sp-l{
width: 100%;
}
}
}
.copy-right{
text-align: center;
padding: $unit*3 0;
font-size: $unit*2.5;
}
}