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 :
 
  The partials directory is where the meat of my CSS is constructed. A lot of folks like to break their stylesheets into 
  
  header, content, sidebar, and footer components (and a few others). As I'm more of a SMACSS guy myself, I like to break 
  
  things down into much finer categories (typography, buttons, textboxes, selectboxes, etc…).
  
 ### Vendors : 
 
 The vendor directory is for third-party CSS. This is handy when using prepackaged components developed by other people (or
 
 for your own components that are maintained in another project). jQuery UI and a color picker are examples of CSS that you 
 
 might want to place in the vendor directory.
 
 ### One step further :
 
     stylesheets/
    |
    |-- admin/           # Admin sub-project
    |   |-- modules/
    |   |-- partials/
    |   `-- _base.scss
    |
    |-- account/         # Account sub-project
    |   |-- modules/
    |   |-- partials/
    |   `-- _base.scss
    |
    |-- site/            # Site sub-project
    |   |-- modules/
    |   |-- partials/
    |   `-- _base.scss
    |
    |-- vendor/          # CSS or Sass from other projects
    |   |-- _colorpicker-1.1.scss
    |   |-- _jquery.ui.core-1.9.1.scss
    |   ...
    |
    |-- admin.scss       # Primary stylesheets for each project
    |-- account.scss
    `-- site.scss