Susy 和 Wordpress - 页面布局答案

【问题标题】：Susy and Wordpress - page layoutSusy 和 Wordpress - 页面布局
【发布时间】：2013-06-27 02:03:04
【问题描述】：

wordpress 返回基本上是这样的：

<div id="main">
   <div id="content"></div>
   <div id="sidebar-primary"></div>
   <div id="sidebar-secondary"></div>
</div>

取决于我选择的布局 - 我喜欢 1 列（仅内容）、2 列（内容和一个侧边栏）或 3 列侧边栏侧边栏内容、侧边栏内容侧边栏或内容-sidebar-sidebar。

有人知道如何使用 Susy 进行设置吗？提前感谢您的意见。

【问题讨论】：

标签： wordpress susy-compass

【解决方案1】：

Susy 几乎可以处理任何事情。 Wordpress 的问题是您需要在主题目录的根目录中有一个 style.css 文件。

我将创建一个包含 susy 的新 theme.scss 文件，然后在您的 style.scss 文件中包含您刚刚创建的新 theme.scss 文件。您可以将所有样式放在 theme.scss 文件中。

styles.scss

/*!
Theme Name: Your Theme Name
Theme URI: http://domain.com 
Description: Your Theme Description.
Author: Your Name 
Author URI: http://domain.com/ 
Version: 1.0 
*/

@import "compass/reset";
@import "theme";

主题.scss

@import "susy";
....other styles would go here for your theme

config.rb

http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "images"
javascripts_dir = "js"

output_style = :compressed
environment = :development

# Move styles.css up one directory as required by Wordpress
require 'fileutils'
on_stylesheet_saved do |file|
  if File.exists?(file) && File.basename(file) == "style.css"
    puts "Moving: #{file}"
    FileUtils.mv(file, File.dirname(file) + "/../" + File.basename(file))
  end
end

我在我的主题文件夹中有一个指南针手表设置，因此每次我进行更改和保存时都会编译 sass 文件并移动到 style.css。此解决方案假定您已安装 susy 和 compass。祝你好运！

【讨论】：