Sass @导入规则和命名 [英] Sass @Import rules and naming

问题描述

我读过许多有关在sass中导入sass文件的文章，但我似乎无法全神贯注.似乎有很多不同的方法.

I have read many articles about importing sass files in sass but I can't seem to wrap my head around it. There seems to be many different ways of doing it.

我尝试过复制如下所示的小伙子设置:

I have tried copying a fellas setup which looks like this:

global
- style.scss

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

Utils
- normalize.scss

所以我们说这是我的设置.有人说我应该给每个scss文件加上下划线: _buttons.scss ，而其他人则说不要这样做.

So let's say this is my setup. Some people say I should name each scss file with an underscore: _buttons.scss while others say NOT to do it.

如果我以自己的 style.scss 工作，我仍然需要使用 import url("components.buttons.scss")我想念什么吗?如果我没有错过任何内容，那么此设置和典型的CSS设置之间有什么区别?

If I work in my style.scss I still need to use a import url("components.buttons.scss")like I've always done or am I missing something? If I'm not missing something what's the difference between this setup and a typical css setup?

推荐答案

用下划线命名您的sass文件通常意味着可以理解该文件是 @import 的，因此不需要被(也不会被！)编译为独立文件-尽管这可能取决于您的构建系统以及sass的编译方式.

Naming your sass files with an underscore generally means that it's understood the file is being @imported and therefore doesn't need to be (and won't be!) compiled as a standalone file -- though this may depend on your build system and how your sass is being compiled in the first place.

在命令行中使用sass，说您拥有以下内容文件集:

Using sass from the command line, say you have the following set of files:

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

style.scss 可能包含的位置:

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

(请注意，在使用sass导入时，不需要包括下划线)

(Note that when importing with sass you don't need to include the underscores)

编译后，新的 stylesheets/目录将仅包含 style.css 和 contact-page.css 和 style.scss 将包含 reset ， fonts 和 header 的所有内容.带下划线的文件将无法自行编译.

After compile, your new stylesheets/ directory will contain only style.css and contact-page.css, and style.scss will include all the contents of reset, fonts, and header. The underscored files will not compile by themselves.

如果要将 _reset.scss 重命名为 reset.scss ，它将编译为 reset.css ，但是其内容也将包含在 style.css 中，因为您也正在导入它.

If you were to rename _reset.scss as reset.scss, it would compile to reset.css, but its contents would also be included in style.css because you're importing it as well.

因此:如果您自己不需要文件，并且正在将其 @import 放入另一个文件中，请在文件名中使用下划线.

So: use underscores in your file names if you don't need the file by itself and are @importing it into another.

这篇关于Sass @导入规则和命名的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！