sass

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

sass

f:id:yachin29:20190815141115j:plain

素材
http://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

<header>
<div class="header-inner">
<h1><img src="img/logo.png" alt=""></h1>
<nav class="g-nav">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">CONCEPT</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</div>
</header>
<div class="main">
<div class="key-visual">
<img src="img/main.jpg" alt="">
<h2>旬の素材を楽しむ</h2>
<p>THAI-NAMAはタイ風の家庭的な料理をご提供しているお店です。<br>
季節感を大切に、旬のものを使いつつ、楽しんで貰えるメニューを揃えています。</p>
</div>


<div class="wrapper">
<p class="food"><img src="img/sub1.jpg" alt=""></p>
<p class="food"><img src="img/sub2.jpg" alt=""></p>
<p class="food"><img src="img/sub3.jpg" alt=""></p>
</div>

<h3>NEWS</h3>
<dl class="news">
<dt>2019/08/15</dt>
<dd>夏季休暇のお知らせ。</dd>
<dt>2019/08/10</dt>
<dd>夏のカレー・フェアを開催中。</dd>
<dt>2019/07/12</dt>
<dd>夏のメニューを追加しました。</dd>
</dl>
</div>
<footer>
<nav>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">CONCEPT</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
<div class="footer-inner">
<div class="info">
<p class="tel">03-1234-4567</p>
<p class="mail">reservation@thai-nama.net</p>
</div>
<div class="address">
<p>〒150-0001 東京都渋谷区神宮前3-4-5 タイ生ビル1F</p>
<p>JR渋谷駅徒歩5分|JR原宿駅徒歩6分</p>
<p>副都心線、千代田線・明治神宮前徒歩7分</p>
</div>
</div>
<p class="copy"><small>Copyright 2019 THAI-NAMA</small></p>
</footer>


style.scss

@import "_reset.scss";
a {
  color: #222;
}
//変数セット
$main-color:#c94343;
$footer-color:#60911d;
$unit:8px;
$point-tablet: 959px;
$point-sp: 500px;


//mixinセット
@mixin tablet {
  @media (max-width:$point-tablet) {
    @content;
  }
}
@mixin sp {
  @media (max-width:$point-sp) {
    @content;
  }
}
//レイアウト
header {
  width: 100%;
  border-bottom:4px solid $main-color;
}
.header-inner {
  max-width: $unit*120;
  padding: $unit*2 0 $unit;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  @include tablet {
    display:block;
    h1 {
      text-align: center;
    }
  }
  img {
    max-width: 100%;
  }
}
.g-nav ul {
  display: flex;
  justify-content: space-between;
  li {
    margin: 0 $unit*2;
    @include sp{
      width: 25%;
      margin: 0;
    }
    a {
      display: block;
      font-weight: bold;
      padding: $unit*3;
      @include tablet {
        padding: $unit*1.5;
        font-size: 14px;
      }
      @include sp {
        padding:$unit*2 0;
        text-align: center;
      }
      &:hover {
        color:$main-color;
      }
    }
  }
}
.main {
  max-width: $unit*120;
  margin: 0 auto $unit*10;
  padding-top:$unit*3; 
  img {
    max-width: 100%;
  }
}

.key-visual{
  margin-bottom: $unit*6;
  text-align: center;
  h2 {
    font-size: 28px;
    margin:$unit*6 0 $unit*2;
  }
  p {
    padding: 0 $unit*5;
    line-height: 1.8;
    margin-bottom: $unit*3;
  }
}
.wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: $unit*8;
  @include sp {
    display:block;
    text-align: center;
  }
}
h3 {
  border-left: 20px solid $main-color;
  padding-left: $unit*3;
  margin-bottom: $unit*3;
  @include tablet{
    margin-left: $unit*2;
  }
}
dl {
  @include tablet{
    padding-left: $unit*2;
  }
}
.news dt {
  float: left;
  margin-bottom: $unit*1;
}
.news dd {
  padding-left: 8em;
  margin-bottom: $unit*1;
  text-decoration: underline;
  @include sp{
    padding:0 1em 0 7em;
  }
}
footer {
  background: $footer-color;
  color: #FFF;
  ul {
    padding-top:$unit*2;
    margin-bottom: $unit*4;
    display: flex;
    justify-content: center;
    li {
      border-right: 1px solid #FFF;
      @include sp{
        width: 25%;
        border-right:0;
        &:nth-of-type(-n+3) {
          border-right: 1px solid #FFF;
        }
      }
      &>a {
        display: block;
        text-align: center;
        font-weight: bold;
        padding: $unit*1 $unit*3;
        color: #FFF;
        @include sp{
          padding: $unit*1 0;
          font-size: 14px;
          font-weight: normal;
        }
        &:hover {
          text-decoration: underline;
        }
      }
    }
    li:first-of-type {
      border-left:1px solid #FFF;
      @include sp{
        border-left:0;
      }
    }
  }
}
.footer-inner {
  max-width: $unit*120;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  @include tablet{
    display:block;
    padding-left: $unit*2;
  }
  p {
    margin-bottom: $unit*1;
    i{
      font-size: $unit*3;
      margin-right: $unit*1; 
    }
  }
}
.copy {
    text-align: center;
    padding: $unit*3 0;
  }

sassの便利な機能を使う

sass

入れ子(ネスト)にできる

style.scss

header {
 width: 100%;
 height: 100px;
 background: #B6E3F4;
    h1 {
      text-align: center;
    }
}

style.css

header {
  width: 100%;
  height: 100px;
  background: #B6E3F4;
}
header h1 {
  text-align: center;
}
メデイアクエリーもネストで記述する事で、見通しが良くなります。

style.scss

body {
background: #F00;
  @media (max-width:640px) {
    background: #000;
  }
}

style.css

body {
  background: #F00;
}

@media (max-width: 640px) {
  body {
    background: #000;
  }
}

変数が使える

style.scss

$point-pc: 1240px;
$point-tablet: 960px;
$point-lsp: 768px;
$point-sp: 480px;

演算できる

style.scss

$space: 8px;

h1{
  margin-bottom:$space * 2;
}


style.css

h1 {
  margin-bottom: 16px;
}

関数で繰り返し等の処理が出来る

style.scss

 @for $i from 1 through 8 {
    $width: percentage(1 / $i);
    .col#{$i} {
      width: $width;
    }
  }


style.css

.col1 {
  width: 100%;
}

.col2 {
  width: 50%;
}

.col3 {
  width: 33.33333%;
}

.col4 {
  width: 25%;
}

.col5 {
  width: 20%;
}

.col6 {
  width: 16.66667%;
}

.col7 {
  width: 14.28571%;
}

.col8 {
  width: 12.5%;
}

@mixinと@include を使ってスタイルを定義して、後で呼び出せる

style.scss

$point-pc: 1240px;
$point-tablet: 960px;
$point-lsp: 768px;
$point-sp: 480px;


@mixin pc {
  @media (max-width:$point-pc) {
    @content;
  }
}

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

@mixin lsp {
  @media (max-width:$point-lsp) {
    @content;
  }
}

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

body {
  background: #aaa;
}
  @include pc {
    body{
      background: #000;
    }
  }

  body{
    @include tablet {
      background: #f00;
    }
  }

  body{
    @include lsp {
      background: #0F0;
   }
  }
  body{
    @include sp {
      background: #00F;
    }
  }

style.css

body {
  background: #aaa;
}

@media (max-width: 1240px) {
  body {
    background: #000;
  }
}

@media (max-width: 960px) {
  body {
    background: #f00;
  }
}

@media (max-width: 768px) {
  body {
    background: #0F0;
  }
}

@media (max-width: 480px) {
  body {
    background: #00F;
  }
}

@importを使って複数のファイルを同時に読み込む

@import "_import1-1.scss";
@import "_import2-2.scss";
@import "_import3-3.scss";
設定ファイル

liveSassCompilerでは書き出すCSSのフォーマットを「nested」、「expanded」、「compact」、「compressed」の4つの中から選ぶことができます。「nested」はネストを維持したまま出力されます。「expanded」は通常のスタイルシートのように出力されます。「compact」は通常のスタイルシートのように出力されますが、全ての指定が一行ずつになります。「compressed」は可読性は無くなりますが、もっとも軽量化された出力になります。

sassを使ってみる

sassを使ってみる

SASS

Sassとは?

Sass(Syntactically Awesome Stylesheets)とはcssメタ言語で、簡単にいうとcssの機能を拡張した高機能版cssといった感じです。

Sassを使うメリット
  • 変数などプログラム的な使い方が可能
  • メンテナンス性が高い
  • 記述量を減らし、データの圧縮が可能

他にも挙げればキリが無いですが、特にcssが数千行〜1万行くらいになってしまう場合や、頻繁に更新が入るサイトなどには必須と言って良いと思います。
ただ、今までのcssを全てsassに打ち直すわけではなく、今までのcssプラスアルファsassの便利な機能を使っていく、という形で良いと思います。

Sassを使う準備

Sassはcssと違って、そのままではブラウザーが理解出来ないのでコンパイル(変換)する必要があります。rubyを使ってコンパイルするのが一般的ですが、授業では「VS Code」というIDE統合開発環境)を使って、その場でSassをcssコンパイルしながら使っていきます。

IDE統合開発環境)とは

IDE とは、従来、コンパイラテキストエディタ、デバッガなどがばらばらで利用していたものをひとつの対話型操作環境から利用できるようにしたもの。

以下からVS Codeをダウンロードします
code.visualstudio.com

VS Codeにダウンロードするプラグイン
Live Sass Compilerの設定

設定ファイルをいじる事で、コンパイルするcssファイルの「記述形式」「cssファイルの拡張子」「cssファイルの保存場所」等を設定出来ます。


{
    "workbench.colorTheme": "Visual Studio Light",
    "git.ignoreMissingGitWarning": true,
    "window.zoomLevel": 0,
    "editor.fontSize": 26,
    "liveSassCompile.settings.formats": [
        {
            "format": "compressed",
            "extensionName": ".css",
            "savePath": "/css"
            
        }
    ],
    "liveServer.settings.donotShowInfoMsg": true,
    "editor.minimap.enabled": false,
    "workbench.iconTheme": "simple-icons",
    "workbench.startupEditor": "newUntitledFile",
    "editor.renderWhitespace": "all"
}

記述形式は以下の4種類があり、

  • nested: ネストされた状態
  • expanded: 手書きに近い
  • compressed: スペース、改行、コメントを除いた形式に出力する
  • compact: 読みやすさをある程度保持しつつデータサイズが小さくなるような形で出力
 "liveSassCompile.settings.formats": [
        {
            "format": "compressed",
            "extensionName": ".css",
            "savePath": "~/../css/"
            
        }
    ]
表示言語を日本語にする

VS Codeは基本的には日本語に対応しているので自動で日本語表示になりますが、アップデートをしたりすると英語表記に戻ってしまう事があるので、その場合の手動での設定方法を覚えましょう。

VSCode上で「Ctrl+Shift+P」を押してコマンドパレットを開き、

>Configure Language

と入力し、言語設定をjaに変えます。

f:id:yachin29:20190813134318p:plain

Sassの記述方法

SassにはSASS記法(style.sass)とSCSS記法(style.scss)という2つの書き方があります。どちらの記法を使用するかでファイルの拡張子が変わるので注意しましょう。
cssを習得している人にとってはSCSS記法(style.scss)の方が書きやすいので、授業ではSCSS記法(style.scss)で進めていきます。

HTML

<div class="box">
<p>初めての<span>Sass</span></p>
</div>
従来のcss記法
.box {
background: #000;
padding:50px;
}
.box>p {
  color: #F00;
}
.box>p>span {
  font-weight: bold;
}
SCSS記法
.box {
background: #000;
padding:50px;

  p {
    color: #F00;

    .box>p>span {
       font-weight: bold;
     }
  }
}

といったようにネスト状に書いていくのがSCSS記法の特徴です。

SASS記法
.box 
background: #000
padding:50px

  p 
    color: #F00

    .box>p>span 
       font-weight: bold

ちなみにSASS記法ではセミコロンと括弧が省略出来るためもっとシンプルな形になります。

f:id:yachin29:20190814025512p:plain

scssフォルダーを作り、その中のstyle.scssに必要な記述をしたら保存し、「Watch Sass」というボタンを押しcssコンパイルさせます。

設定ファイルの “savePath”のところを “~/../css/”というように設定していれば、scssフォルダーと同じ階層に「cssフォルダー」が作られ、その中に「style.css」が作成されます。なので、そのコンパイルされたcssファイルをいつものようにhtmlファイルにリンクさせます。

f:id:yachin29:20190814030142p:plain