Sassのよく使う基本機能まとめ | 大阪市天王寺区SOHOホームページ制作 | デザインサプライ-DesignSupply.-
0%

Programmingプログラミングナレッジ

Posted:2016.07.11

Sassのよく使う基本機能まとめ

CSSの拡張メタ言語であるSassですが、高機能でいろんなことができるため、使いどころがいまひとつ分からないということもあるかと思います。そこで今回は知っておくと便利なSassの基本機能をまとめてみました。インストール方法については前回記事【「Sass」&「Compass」のインストール方法まとめ(Mac OS X) 】をご覧ください。

 

Sassには「Sass記法」と「SCSS記法」の2種類があります。それぞれ拡張子が「.sass」と「.scss」になります。記述方法も異なり、SCSSではCSSとほとんど同じ記述方法になりますが、Sassではインデントと改行で記述します。本記事は全てSCSS記法で進めています。

 

【SCSS】

p {
  margin: 0;
  color: #999;
}

 

【Sass】

p
  margin: 0
  color: #999

 

それではまずSassで出来る主な機能についてです。

 

変数の定義

プロパティの値やセレクタ名などを変数に置き換えて使うことができます。$マークをつけて変数を定義します。セレクタ名などに変数を使う場合は、#{…}の中に変数を記述します。使用箇所の前に変数を定義します。

 

値を変数に

// SCSS
$primary-color: #336699;

div {
  background: $primary-color;
}

// CSS
div {
  background: #336699;
}

 

セレクタ名を変数に

// SCSS
$name: primary;

div.#{$name} {
  background: #fff;
}

// CSS
div.primary {
  background: #fff;
}

 

ネスト(入れ子)

HTMLのように要素間の親子関係をネストで記述することができます。セレクタ部分が長くならず、構造が直感的にわかります。ただし、階層が深くなりすぎると逆にわかりにくくなるので注意が必要です。

 

// SCSS
body {
  margin: 0 auto;
    h1 {
      font-size: 1.5rem;
    }
    p {
        font-size: 1rem;
    }
}

// CSS
body {
  margin: 0 auto;
}
body h1 {
  font-size: 1.5rem;
}
body p {
  font-size: 1rem;
}

 

親セレクタ継承

親セレクタを&で表記し、ネストの中で使用することができます。こちらもセレクタ部分の表記を省略できるのでスッキリさせることができます。

 

// SCSS
li {
  &:first-child { color: #f00; }
  &:last-child { color: #999; }
}

// CSS
li:first-child {
  color: #f00;
}
li:last-child {
  color: #999;
}

 

@mixin・@include

プログラミングの関数のような機能で、ひとかたまりのセクションを@mixinでミックスインとして定義し、@includeでミックスインを呼び出します。

 

// SCSS
@mixin style1 {
  margin: 0;
  padding: 0;
  color: #999;
}

p {
  @include style1;
}

// CSS
p {
  margin: 0;
  padding: 0;
  color: #999;
}

 

@content

ミックスイン(@mixin)で定義したブロック内で使用すると、@mixinに合わせた@includeのブロックを@contentの場所へ挿入することができます。メディアクエリーなどミックスインでブロックがネストするときなどにスッキリと記述することができます。

 

// SCSS
@mixin mobile {
  @media screen and (max-width: 480px) {
      @content;
  }
}

@include mobile {
  display: none;
}

// CSS
@media screen and (max-width: 480px) {
  display: none;
}

 

@extend

他のセレクタで定義したプロパティや値などの内容をそのまま使うことができます。

 

// SCSS
.textstyle {
  font-size: 1rem;
  margin: 0;
  padding: 5px;
}

header {
  @extend .textstyle;
  background-color: #ddff99;
}
footer {
  @extend .textstyle;
  background-color: #55ccbb;
}

// CSS
.textstyle, header, footer {
  font-size: 1rem;
  margin: 0;
  padding: 5px;
}
header {
  background-color: #ddff99;
}
footer {
  background-color: #55ccbb;
}

 

@import・パーティシャル

複数のファイルを@importで一つにまとめることができます。またファイルの先頭にアンダーバーを記述するとコンパイルの対象外(パーティシャル)になります。したがってコンパイルの必要がない@importされるファイルにはパーティシャルとして指定します。また@importのファイル指定ではアンダーバーと拡張子を省略することも可能です。

 

// SCSS(_font.scss)
h1 {
  font-size: 1.3rem;
  font-weight: bold;
  color: #555;
}

// SCSS(_layout.scss)
h1 {
  margin: 15px 0;
  padding: 5px ;
}

// SCSS(main.scss)
@import "_font.scss";
@import "_layout.scss";

// CSS
h1 {
  font-size: 1.3rem;
  font-weight: bold;
  color: #555;
  margin: 15px 0;
  padding: 5px ;
}

 

Sassのコンパイル方法

SassファイルやSCSSファイルはブラウザに認識させるためにCSSファイルに変換する必要があります。この作業をコンパイルと呼び、コマンドを入力することでコンパイルを行います。

 

Sassのコンパイルは次のように入力します。対象ファイルを指定することもできますし、フォルダ内のファイルを一括してコンパイルすることもできます。

 

// 特定のファイル指定
$ sass 変換前ファイル名.scss:変換後ファイル名.css

// 一括コンパイル
$ sass scss:css

 

【–style】オプション

–styleをつけることで、変換後の記述方法を指定することができます。改行やインデントを残した状態から、全て圧縮し最小化したものなどいくつかの形式が用意されています。

 

Nested:入れ子の状態をインデントで表示し出力

$ sass 変換前ファイル名.scss:変換後ファイル名.css --style nested

 

【CSS】

body {
  margin: 0; }
  body p {
      font-size: 1.2rem; }
      body p strong {
          font-weight: bold; }
  body footer {
      background: #44ddff; }

 

Expanded:インデントを詰めて通常のCSSのような表示で出力

$ sass 変換前ファイル名.scss:変換後ファイル名.css --style expanded

 

【CSS】

body {
  margin: 0;
}
body p {
  font-size: 1.2rem
}
body p strong {
  font-weight: bold;
}
body footer {
  background: #44ddff;
}

 

Compact:ブロック内の改行を無くして出力

$ sass 変換前ファイル名.scss:変換後ファイル名.css --style compact

 

【CSS】

body { margin: 0; }
body p { font-size: 1.2rem; }
body p strong { font-weight: bold; }
body footer { background: #44ddff; }

 

Compressed:全ての改行及び不要なスペースを無くして出力

$ sass 変換前ファイル名.scss:変換後ファイル名.css --style compressed

 

【CSS】

body{margin:0;}body p{font-size:1.2rem;}body p strong{font-weight:bold;}body footer{background:#44ddff;}

 

【–watch】オプション

–watchを設定すると、Sassを監視し内容の変更があった場合にCSSへ自動でコンパイルされます。

 

$ sass --watch 変換前ファイル名.scss:変換後ファイル名.css

 

 

このほかにも、関数が使えたり、if文やfor文などのプログラミング機能もあり、かなり幅広く使うことができます。とても便利なので、使いこなすとコーディングの効率もかなり上がるのではないでしょうか。

 

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】