Compass Blueprint mixins不编译？

我正在尝试使用我的Rails（3.1）项目来获取Blueprint（SCSS-Syntax）。为了保持它在第一个简单的我建立一个纯HTML文件的一些基本蓝图语法（我的Rails项目外），与安装指南针和创建基本SCSS文件后：Compass Blueprint mixins不编译？

compass install blueprint .

它与产生SASS目录

@import blueprint

中其他的东西，但样式表/ screen.css不含跨度-X的指令，因为我看指南针之后期待：一个真正的样式表框架由克里斯Eppstein的（包含screen.scss http://vimeo.com/4335944），最重要的是我的HTML看起来一直很平淡。

<html> 
<head> 
    <link href="stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> 
    <link href="stylesheets/print.css" media="print" rel="stylesheet" type="text/css" /> 
    <!--[if lt IE 8]> 
     <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" /> 
    <![endif]--> 
</head> 

    <body> 
     <div class="container"> 
      <div class="span-24"> 
       <center> 
       <h1 class="alt box">asdfhlakshf sdfgs dgf sdf sdfg fsd g</h1> 
       </center> 
      </div> 

      <div class="pre"> 
       asdfhlakshf 
      </div> 

      <div class="span-4 success colborder"> 
       WOW 
      </div> 

     </div> 
    </body> 


</html>

我screen.css看起来像这样（小节选）：

/* line 44, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.5/frameworks/blueprint/stylesheets/blueprint/_form.scss */ 
    form.bp input.text, form.bp input.title, form.bp input[type=email], form.bp input[type=text], form.bp input[type=password] { 
     width: 300px; 
    } 
    /* line 46, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.5/frameworks/blueprint/stylesheets/blueprint/_form.scss */ 
    form.bp textarea { 
     width: 390px; 
     height: 250px; 
    } 
    /* line 39, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.5/frameworks/blueprint/stylesheets/blueprint/_scaffolding.scss */ 
    form.bp .box { 
     padding: 1.5em; 
     margin-bottom: 1.5em; 
     background: #e5ecf9; 
    } 
    /* line 42, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.5/frameworks/blueprint/stylesheets/blueprint/_scaffolding.scss */ 
    form.bp .border { 
     padding-right: 4px; 
     margin-right: 5px; 
     border-right: 1px solid #dddddd; 
    } 
    /* line 45, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.5/frameworks/blueprint/stylesheets/blueprint/_scaffolding.scss */ 
    form.bp .colborder { 
     padding-right: 24px; 
     margin-right: 25px; 
     border-right: 1px solid #dddddd; 
    } 
    /* line 47, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.5/frameworks/blueprint/stylesheets/blueprint/_scaffolding.scss */ 
    form.bp hr { 
     background: #dddddd; 
     color: #dddddd; 
     clear: both; 
     float: none; 
     width: 100%; 
     height: 0.1em; 
     margin: 0 0 1.45em; 
     border: none; 
    }

调用

compass compile

只是告诉我，一切都保持不变。但是，一旦我添加，它就会执行某些操作。例如，我们添加了一个

@import "blueprint/grid"

。但仍然没有漂亮的HTML。

第二我复制一个预编译screen.css（从蓝图网站下载）到样式表文件夹一切工作就像一个魅力。这与我的rails项目里面一样。我可以在那里使用预编译的CSS没有问题。

我想我错过了一些基本的东西，我需要做的指南针编译魔术工作，但我无法弄清楚它是什么。

在此先感谢您的任何想法！

版本

罗盘0.11.5（心宿）
红宝石1.8.7（轨道项目之外）
红宝石1.9.2（与轨道项目）
使用RVM 1.6.21

安装haml 3.1.2和sass 3.1.4。虽然我认为这应该是不相关的，因为我用html和scss，对吧？

也许我应该更包括我screen.scss的：

// This import applies a global reset to any page that imports this stylesheet. 
@import "blueprint/reset"; 

// To configure blueprint, edit the partials/base.sass file. 
@import "partials/base"; 
@import "blueprint/grid"; 

// Import all the default blueprint modules so that we can access their mixins. 
@import "blueprint"; 

// Import the non-default scaffolding module. 
@import "blueprint/scaffolding"; 

// To generate css equivalent to the blueprint css but with your 
// configuration applied, uncomment: 
// @include blueprint 

// If you are doing a lot of stylesheet concatenation, it is suggested 
// that you scope your blueprint styles, so that you can better control 
// what pages use blueprint when stylesheets are concatenated together. 
body.bp { 
    @include blueprint-typography(true); 
    @include blueprint-utilities; 
    @include blueprint-debug; 
    @include blueprint-interaction; 
    // Remove the scaffolding when you're ready to start doing visual design. 
    // Or leave it in if you're happy with how blueprint looks out-of-the-box 
} 

form.bp { 
    @include blueprint-form; 
    // You'll probably want to remove the scaffolding once you start styling your site. 
    @include blueprint-scaffolding; } 

// Page layout can be done using mixins applied to your semantic classes and IDs: 
body.two-col { 
    #container { 
    @include container; } 
    #header, #footer { 
    @include column($blueprint-grid-columns); } 
    #sidebar { 
    // One third of the grid columns, rounding down. With 24 cols, this is 8. 
    $sidebar-columns: floor($blueprint-grid-columns/3); 
    @include column($sidebar-columns); } 
    #content { 
    // Two thirds of the grid columns, rounding up. 
    // With 24 cols, this is 16. 
    $content-columns: ceil(2 * $blueprint-grid-columns/3); 
    // true means it's the last column in the row 
    @include column($content-columns, true); } }

我也试图改变我的红宝石版本和重命名文件夹SASS给SCSS。我在这里用尽想法...

来源

2011-07-15 A5308Y

好的。这是基本的。我没有取消注释“@include blueprint”这一行，因为我认为@import blueprint应该足够了，并且我尝试了一个错误消息。原来的错误信息是通过在行尾添加分号来解决的。

也许应该在发货的screen.scss中添加smicolon。我会发邮件给作者。

来源

2011-07-18 15:44:00 A5308Y

感谢您关注自己的问题 - 我遇到了同样的问题。指南针的文档有点缺乏基本的细节，如： – mrampton

Compass Blueprint mixins不编译？

回答

相关问题