css - 将 Compass 实现到现有的 Sass 元素中

Question

我一直在考虑将 Compass 实现到现有的 Sass 元素中。但是，我正在努力寻找它是否可能。

我一直在阅读文档，知道您可以使用 --sass-dir 和 --css-dir 来定义它要查找的文件夹名称，但是我似乎无法阻止 Compass 在我自己的元素结构中创建它自己的元素结构。我需要创建自定义配置文件吗？

结构如下:

js
|_//js here

img
|_//images here

css
-main.css //combined from main.scss
-main.min.scss //combined and minified from main.scss
|_sass
  |_base
    -//scss files in this folder
  |_components
    -//scss files in this folder
  |_layouts
    -//scss files in this folder
  |_utilities
    -//scss files in this folder
  -main.scss // where the imports are

希望这是有道理的，我们将不胜感激关于这是否可行的任何建议。

Answer 1

是的，您需要制作一个自定义的 config.rb 并将其放在您站点的根目录中。它看起来像这样。

# Require any additional compass plugins here.
require "susy"
require "sass-globbing"
require "breakpoint"

#Folder settings
project_type = :stand_alone
http_path = "/"
relative_assets = true      #because we're not working from the root
css_dir = "css"          #where the CSS will saved
sass_dir = "scss"           #where our .scss files are
images_dir = "img"    #the folder with your images
javascripts_dir = "js"

# You can select your preferred output style here (can be overridden via the command line):
output_style = :expanded # After dev :compressed

# To disable debugging comments that display the original location of your selectors. Uncomment:
line_comments = false

# Obviously
preferred_syntax = :scss

# Sourcemaps for Chrome DevTools

sass_options = {:sourcemap => true}
# sass_options = {:debug_info => true}
sourcemap = true

请注意我使用了一些东西，比如 susy 和断点，所以如果你不使用它们，请从 config.rb 文件的顶部删除要求。

因为config.rb文件在你的根目录下，所以你的css、scss、js文件夹都是相对目录。

创建并保存后，只需转到您的终端，导航到您的站点目录并运行 compass watch 。

请注意，您必须将已有的 CSS 文件放在 scss 文件夹中。否则 compass 将覆盖你的 CSS，你还必须将它们重命名为 .scss 我会先保存备份，这样你就不会丢失任何东西