如何組織SASS文件，所以指南針包括他們在正確的順序

我建設使用最新的自耕農構建1.0.0beta3和指南針0.12.2如何組織SASS文件，所以指南針包括他們在正確的順序

單頁的應用程序在啓動compass:server我得到很多的錯誤，但在開發時間，我的瀏覽器似乎都可以。然後grunt build不會失敗，但是會生成不正確的CSS輸出，以至於瀏覽器中的佈局變得笨拙。也許這都是我的錯，是由誤會造成的。

我已經是一個main.sass文件，我所有的包括：

// compass 
@import 'compass' 
@import 'compass/reset' 
@import 'compass/css3' 
... and so on 

//custom includes in the right order 
@import 'base/dimensions' 
@import 'base/colors' 
@import 'base/layout'

文件base/dimensions現在定義：

// height of the footer 
$footer-height: 50px

而在base/layout（後來）我使用的是：

.content-bg 
    background-color: rgba(0, 0, 0, 0.05) 
    bottom: $footer-height 
    ... and more

現在啓動grunt和compass服務器時，以下錯誤：

Running "compass:server" (compass) task 
directory .tmp/styles/ 
    create .tmp/styles/avendor_font-awesome.css 
    create .tmp/styles/base_colors.css 
    create .tmp/styles/base_dimensions.css 
    error app/styles/base_layout.sass (Line 23: Undefined variable: "$footer-height".)

和很多類似的錯誤。（在開發時間頁腳高度確實可以。）

我不知道如何解決這個問題，我也不知道這是否會在構建運行後導致不正確的CSS。但是，當我通過發行grunt構建時，我在控制檯中看到相同的錯誤。

我應該提到，我做了一些修改Gruntfile.js，使.sass文件從/款式也子目錄加載：

grunt.initConfig({ 
    yeoman: yeomanConfig, 
    watch: { 
     coffee: { 
      files: ['<%= yeoman.app %>/scripts/{,*/}*.coffee'], 
      tasks: ['coffee:dist'] 
     }, 
     coffeeTest: { 
      files: ['test/spec/{,*/}*.coffee'], 
      tasks: ['coffee:test'] 
     }, 
     compass: { 
      **files: ['<%= yeoman.app %>/styles/{,**/}*.{scss,sass}'],** 
      tasks: ['compass'] 
     }, 
     livereload: { 
      files: [ 
       '<%= yeoman.app %>/*.html', 
       '{.tmp,<%= yeoman.app %>}/styles/{,*/}*.css', 
       **'{.tmp,<%= yeoman.app %>}/styles/{,**/}*.css',** 
       '{.tmp,<%= yeoman.app %>}/scripts/{,*/}*.js', 
       '<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,webp}' 
      ], 
      tasks: ['livereload'] 
     } 
    },

任何人都可以告訴我嗎？

問候菲利克斯

來源

2013-03-24 GeorgieF

對於每個人都面臨着同樣的問題：文件的命名的伎倆。每個文件都將被包含在你的main.css像這樣：

@include 'base/colors'

已被命名爲：中

_colors.sass

代替：

colors.sass

在該base目錄案件。我所做的也是，將main.css重命名爲main.css.sass

現在一切正常，我學會了另一件難事。

來源

2013-03-25 09:02:58 GeorgieF

然而，這與咕嚕聲或指南針本身無關。這就是SASS的運作方式：http：//sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#partials – 2013-05-31 04:00:09

Codekit編譯'un-underscored'SCSS沒有問題，CLI也是如此。使用grunt是我第一次遇到這個文件命名規則。 – swervo 2013-07-12 10:50:49

謝謝工作。我不知道背後的原因，但這是正確的答案 – AdityaSaxena 2014-02-27 03:36:59

如何組織SASS文件，所以指南針包括他們在正確的順序

回答

相關問題