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不編譯？

回答

相關問題