Как упорядочить файлы sass, чтобы compass включал их в правильном порядке

Я создаю одностраничное приложение, используя самую последнюю сборку yoman 1.0.0beta3 и компас 0.12.2.

При запуске 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 также загружались из подкаталогов /styles:

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']
        }
    },

Кто-нибудь может просветить меня?

С уважением Феликс


gruntjs yeoman compass-sass
person GeorgieF    schedule 24.03.2013    source источник

Ответы (1)


arrow_upward
9
arrow_downward

Для всех, кто сталкивается с одной и той же проблемой: именование файлов делает свое дело. Каждый файл, который должен быть включен в ваш main.css, выглядит так:

@include 'base/colors'

должно быть названо:

_colors.sass

вместо:

colors.sass

в каталоге base в этом случае. Что я тоже сделал, так это переименовал main.css в main.css.sass

Теперь все работает правильно, и я узнал еще одну вещь на собственном горьком опыте.

person GeorgieF    schedule 25.03.2013
comment
Это, однако, не имеет ничего общего с хрюканьем или самим компасом. Именно так работает SASS: sass-lang.com/docs/yardoc /file.SASS_REFERENCE.html#partials - person Patrik Affentranger; 31.05.2013
comment
Codekit без проблем компилирует SCSS без подчеркивания, как и Compass из CLI. Использование grunt было первым разом, когда я столкнулся с этим правилом именования файлов. - person swervo; 12.07.2013
comment
Спасибо работал. Я не знаю причину этого, но это правильный ответ - person AdityaSaxena; 27.02.2014