将Compass实现到现有的Sass项目中 [英] Implement Compass into an existing Sass project

问题描述

我一直在将Compass实现到现有的Sass项目中。

I've been looking at implementing Compass into an existing Sass project. However, I'm struggling to find out if it's even possible.

我一直在阅读文档，知道你可以使用 - sass -dir 和 - css-dir 定义它寻找的文件夹名称，但我似乎不能阻止Compass创建它自己项目结构在我自己的。我需要创建自定义配置文件吗？

I've been reading through the docs know you can use --sass-dir and --css-dir to define the folder names that it looks for but I can't seem to prevent Compass from creating it's own project structure within my own. Do I need to create a custom config file?

这里是结构：

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

希望此

推荐答案

是的，你需要做一个自定义config.rb并将其放在您的网站的根目录中。

Yes you need to make a custom config.rb and place it in the root directory of your site. It will look something like this.

# 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和breakpoint

Please note I use a few things like susy and breakpoint so if you dont use those remove the requires from the top of the config.rb file.

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

Since the config.rb file is in your root directory then your css, scss, js folders are all relative directories.

创建并保存后，只需转到终端导航到您的网站目录并运行罗盘手表。

Once you have created and saved this just go to your terminal navigate to your sites directory and run compass watch.

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

Please note you will have to take your CSS files you already have and place them in the scss folder. Otherwise compass will just overwrite your CSS and you will also have to rename them to .scss I would save backups first so you dont lose anything

这篇关于将Compass实现到现有的Sass项目中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！