CODEWITHSUNDEEP
csssass
user1049430
user1049430

Reputation:

Sass @Import rules and naming

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

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.

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?

Upvotes: 1

Views: 2107

Answers (3)

Nesha Zoric
Nesha Zoric

Reputation: 6620

If you add an underscore to the start of the file name, Sass won’t compile it. So, if you don’t want colors.scss to compile to colors.css, name the file _colors.scss instead. Files named this way are called partials in Sass terminology.

More about it you can read here.

Upvotes: 0

essmahr
essmahr

Reputation: 676

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.

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

Where style.scss might contain:

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

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

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.

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.

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

Upvotes: 4

Vivekraj K R
Vivekraj K R

Reputation: 2548

This is how we structure a sass project. 

<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>

Primary sass file will be as follows 

// 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

Upvotes: 0

Related Questions