markdown 如何构建Sass项目

Posted 2021-05-05

# How to structure a Sass project :

  ### Basic directory structure :
  
    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
    
  ### Primary stylesheet :
  
    // 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";
     
  
   As you can see this divides my project into three basic types of files. Modules, partials, 
   
   and vendored stylesheets.
   
 #### Module : 
    
   The modules directory is reserved for Sass code that doesn't cause Sass to actually output CSS. Things like mixin declarations, 
   
   functions, and variables.
   
 #### Partials :