Sass @Importのルールと命名

Question

私はsassファイルをsassにインポートすることに関する多くの記事を読んできましたが、私はその頭を包んでいるようです。それをやる方法はいろいろあるようです。

私はこのようになりますフェローズセットアップコピーしようとしている：

global 
- style.scss 

Components 
- buttons.scss 
- colors.scss 
- fonts.scss 
- etc. 

Utils 
- normalize.scss 

それでは、これは私の設定であるとしましょうと。一部の人々は、各scssファイルにアンダースコアを付ける必要があると言います：_buttons.scss他の人はそれをしないと言いますが。

私がstyle.scssで働いている場合、私はいつもやったことのようにimport url("components.buttons.scss")を使用する必要がありますか？私が何かを逃していないなら、このセットアップと典型的なCSSセットアップの違いは何ですか？

Answer 1

を次のようにアンダースコアは、一般的に、それはdoesnのため、@import EDであることとされたファイルを理解していますことを意味して

<pre>stylesheets/ 
 
| 
 
|-- modules/    # Common modules 
 
| |-- _all.scss   # Include to get all modules 
 
| |-- _utility.scss  # Module name 
 
| |-- _colors.scss  # Etc... 
 
| ... 
 
| 
 
|-- partials/    # Partials 
 
| |-- _base.sass  # imports for all mixins + global project variables 
 
| |-- _buttons.scss  # buttons 
 
| |-- _figures.scss  # figures 
 
| |-- _grids.scss  # grids 
 
| |-- _typography.scss # typography 
 
| |-- _reset.scss  # reset 
 
| ... 
 
| 
 
|-- vendor/    # CSS or Sass from other projects 
 
| |-- _colorpicker.scss 
 
| |-- _jquery.ui.core.scss 
 
| ... 
 
| 
 
`-- main.scss   # primary Sass file 
 
</pre>

プライマリSASSファイルは次のようになりますスタンドアロンファイルとしてコンパイルする必要はありません（そしてこれはできません）。これは、ビルドシステムとあなたのお尻がどのようになっているかによって異なりますが最初にコンパイルされています。 the command lineからSASSを使用して

、あなたはファイルの以下のセット持っていると言う：style.scssが含まれている場合があります

stylesheets/ 
    _reset.scss 
    _fonts.scss 
    _header.scss 
    contact-page.scss 
    style.css 

を：

@import 'reset.scss'; 
@import 'fonts.scss'; 
@import 'header.scss'; 

（SASSをインポートするときに、あなたがする必要はありません

コンパイル後、新しいstylesheets/ディレクトリには、style.css aのみが含まれますnd contact-page.cssおよびstyle.scssは、reset,fontsおよびheaderのすべての内容を含むことになる。下線付きのファイルは単独ではコンパイルされません。

あなたはreset.scssとして_reset.scssの名前を変更した場合、それはreset.cssにコンパイルしますが、あなたは同様にそれを輸入しているため、その内容もstyle.cssに含まれることになります。

so：ファイルを単独で必要とせず、@import別のファイルに添付する場合は、ファイル名にアンダースコアを使用します。

Answer 2

これは、私たちがサスプロジェクトを構成する方法です。あなたのSASSファイルの命名

// Modules and Variables 
@import "partials/base"; 

// Partials 
@import "partials/reset"; 
@import "partials/typography"; 
@import "partials/buttons"; 
@import "partials/figures"; 
@import "partials/grids"; 

// Third-party 
@import "vendor/colorpicker"; 
@import "vendor/jquery.ui.core"; 

more info

Answer 3

ファイル名の先頭にアンダースコアを追加すると、Sassはファイル名をコンパイルしません。したがって、colors.scssをcolors.cssにコンパイルしたくない場合は、代わりに_colors.scssという名前を付けてください。この方法で名前が付けられたファイルは、Sass用語ではpartialsと呼ばれます。

詳細についてはhereをご覧ください。