• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
mocurot nort

mocurot nort

  • Contents
  • About
  • Contact

Sassで@import

2018-03-23 by mocurot コメントを書く

CSSで使える@importを拡張したSassの「@import」について見ていきます。
Sassの「@import」はファイルを複数に分割してメンテナンス性を高めたり、ミックスインをパーシャルファイルにしてライブラリ的に扱ったりと、Sassを利用して得られる最も重要な恩恵のひとつです。
※ パーシャルファイル = Sassで分割されたファイル

@importのルール

基本的な@importのルールはCSSと同じですが、条件によってSassの@importか、CSSの@importかが分かれます。
CSSではインポートすると、@importで指定したファイルを読み込みますが、Sassの場合はコンパイル時にインポートしたSassファイル内にコードが展開され、ひとつのCSSファイルとして出力してくれます。


ファイルの重複?

SassファイルからSassファイルのインポートする場合、インポートされる側はインポートされながらも、自身もCSSファイルを出力します。
多くの場合は、インポートしたSassファイルのCSSは不要になるため、インポートしたSassファイルのCSSファイルを生成しないようにする必要があります。


CSSを生成しない

インポートするSassのファイル名の先頭に「_(アンダースコア)」を付けることでコンパイルしてもCSSを生成しなくなります。
この複数のファイルに分割する機能をパーシャル(partial)といいます。
※パーシャルは「一部の、部分的な、」的な意味です。


パーシャルファイルを@importする

CSSを生成しないパーシャルファイルをインポートする場合は、先頭の_(アンダースコア)と拡張子省力してファイルを指定します。
例えば「_default.scss」をインポートするには次のように書きます。

@import "default";

複数のパーシャルファイルを読み込みにはカンマ区切りで指定することもできます。「_default.scss」、「_mobile.scss」、「_print.scss」をインポートするには次のように書きます。

/* 複数のファイルをインポート */
@import "default";
@import "mobile";
@import "print";

/* カンマ区切りで指定できる */
@import "default", "mobile", "print";

@importをネストする

Sassでは、ルールセット構造内で@importを利用することもできます。
例えば、「_mobile.scss」を画面サイズ37.5em以下の場合に読み込む場合は次のように書きます。

@media screen and (max-width:37.5em) {@import "mobile"}

おわりに

前回のネスト機能と今回のパーシャル機能までが、Sassの基本的な使い方となります。(と思っている?)
まずはSassのネストとパーシャルを通じてSassに触れてみれば、CSS記法には戻れなくなるくらいSassが便利であることがおわかりいただけると思います。

次回は「@extend」や「@mixin」などの高度な機能に触れていきましょう。


次回「 @extend」

0
この記事に興味を持っていただけたら
をクリックしてもらえると励みになります!

Filed Under: Sass 関連タグ:CSS, SASS

Reader Interactions

コメントを残す コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

最初のサイドバー

Author

NAME : mocurot
mocurot noteの管理人。フロントエンドエンジニア、バックエンドも少々。
Mac、iPhone、Kindle、Guitar、NINTENDO、SONY、FromSoftwareに関心を示します。

  • GitHub
  • RSS
  • Tumblr
  • Twitter
  • Youtube

Recommended Articles

  • 6ヶ月プロテインダイエットをしてみて
    6ヶ月プロテインダイエットをしてみて
  • MacでVPN接続してもグローバルIPが変わらない時に見なおす設定
    MacでVPN接続してもグローバルIPが変わらない時に見なおす設定
  • CatalinaでEmacsのファイルアクセスを許可する方法
    CatalinaでEmacsのファイルアクセスを許可する方法
  • さくらのVPSで80/443ポートに繋がらない
    さくらのVPSで80/443ポートに繋がらない
  • input,textareaのCSSをリセット -iOS Safari -
    input,textareaのCSSをリセット -iOS Safari -
  • SassでCompassを使う
    SassでCompassを使う
  • Sassで@import
    Sassで@import
  • LEMP環境の構築[ルートログインからSSHデーモンの設定]
    LEMP環境の構築[ルートログインからSSHデーモンの設定]

タグ

AMAZON ANKER APPLE APPLE WATCH APPS CAMERA CENT OS COMPASS CSS DARK SOULS DB DESIGN DIET GADGET GIT GITHUB GUITAR GULP HTML IPHONE KINDLE LEMP MAC NGINX NODE.JS NOTE PHP PS4 SASS SCSS SEKIRO SERVER WORDPRESS _s
プライバシーと Cookie: このサイトは Cookie を使用しています。このサイトの使用を継続することで、その使用に同意したとみなされます。
Cookie のコントロール方法を含む詳細についてはこちらをご覧ください。 Cookie ポリシー

Copyright © 2021 mocurot ・ ログイン