如何组织 sass 文件,以便 compass 以正确的顺序包含它们

2024-03-21

我正在使用最新的 yeoman build 1.0.0beta3 和 compass 0.12.2 构建单页应用程序

启动时compass:server我遇到很多错误,但在开发期间,我的浏览器似乎一切正常。grunt buildthen 不会失败,但会构建不正确的 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 做了一些更改,以便也从 /styles 的子目录加载 .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']
        }
    },

谁能启发我吗?

问候 菲利克斯


对于面临同样问题的每个人:文件的命名可以解决问题。每个要包含在 main.css 中的文件如下所示:

@include 'base/colors'

必须命名:

_colors.sass

代替:

colors.sass

in the base在这种情况下的目录。我也做了什么,就是重命名main.css to main.css.sass

现在一切正常,我通过艰难的方式学到了另一件事。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何组织 sass 文件,以便 compass 以正确的顺序包含它们 的相关文章

  • npm install grunt --save-dev 中的 --save-dev 是什么意思?

    我刚刚开始使用Grunt http gruntjs com 设置起来非常困难 我正在创建一个package json file 按照此tutorial https web archive org web 20130918061104 htt
  • 在 Windows 上配置指南针

    我在 Windows 上 并且 SASS 在我的项目中成功运行 现在 我想包含指南针 这样我就可以利用预先编写的 mixins 等 首先 我只是在我的工作 sass 文件中尝试了这个语句 import compass css3 transf
  • 漂亮打印 HTML 的模块?

    我正在开发一个 grunt 构建文件 它会点击 URL 并将输出写入静态 HTML 文件 我点击的 url 已压缩 HTML 我想在写入静态文件之前将其打印出来 有什么好的模块可以做到这一点吗 我环顾四周 似乎 Max Ogden 的 ht
  • Karma/Jasmine/PhantomJs:未定义不是构造函数

    我有一个应用程序在运行测试时引发奇怪的错误 错误如下 TypeError undefined is not a constructor evaluating allKeys i match 0 9 in node modules jasmi
  • Linux 上的 .NET Core 支持 Visual Basic 吗?

    我搜索了所有 Microsoft 文档 但找不到任何明确说明 Linux 上的 NET Core 是否支持 Visual Basic 的内容 那么 Linux 上的 NET Core 是否支持 Visual Basic 并且是否有适用于 V
  • @include 容器是什么意思?

    我正在开始使用 Compass 和 Susy 我的目标是让我的布局适应手机 平板电脑和桌面屏幕尺寸 在 Susy 的例子中 susy oddbird net http susy oddbird net guides reference re
  • 如何从 Compass 输出压缩的 CSS?

    如何配置指南针以输出较小或压缩的 CSS 文件 我试过compass s compressed但这没有用 In your config rb file output style compressed More at http compass
  • 如何从与根项目不同的文件夹运行 grunt

    有没有办法告诉 grunt 使用哪个 grunt js 文件 我有一个f a b tools包含的文件夹grunt cmd node exe 我的实际网络应用程序GruntFile js以及所有当地的node modules is in f
  • 来自全新 Yeoman 安装的 gruntserve 返回 - 警告:未找到任务“serve”

    运行后yo angular进而cd进入应用程序的根文件夹 与应用程序文件夹处于同一级别 gruntfile package json等 我尝试grunt serve我收到上述错误 Grunt 不会为我启动服务器 我到处寻找但找不到说要跑np
  • 使用 url 的 sass 背景 mixins [重复]

    这个问题在这里已经有答案了 伙计们 我想创建一个背景 mixin 而不是编写重复的 url mixin bgimage name url images name png background url url 并且 它从不接受 name 变量
  • 生成精灵时指南针添加前斜线

    我刚刚生成了一个带有指南针的精灵 但由于某种原因 它在生成的类 url 中添加了一个前导斜杠 是否可以覆盖这个或者我的 config rb 中有什么错误 谢谢你的帮助 Joe 配置 rb gt http path css dir sass
  • 可以在 SASS / Compass 中创建随机数吗?

    我正在开发一个使用 SASS 和 Compass 的项目 并且需要以某种方式在 CSS 文件中得出一些随机数 具体来说 我需要一些 0 到 1 之间的浮点数 单独使用 SASS 和 Compass 可以吗 如果您创建一个 sass 函数 这
  • 指南针手表编译一次,无法注意到进一步的变化

    我在 Windows 7 上使用 SASS Compass 我最近将 SASS 从 3 2 10 升级到 3 4 2 将 Compass 从 0 12 2 升级到 1 0 1 我通过卸载旧版本并在命令提示符中使用 gem uninstall
  • 是什么原因导致 grunt.js 中的 /*global module: false*/

    许多 grunt js 脚本以以下内容开头 global module false module exports function grunt 但是第一行注释的原因是什么 它是 JSLint 或 JSHint 的指令 它告诉 JSLint
  • 设置Webstorm/PHPStorm文件刷新时间

    这可能只是一些我似乎找不到的简单设置 事情是这样的 我有一个带有一些 Compass Sass CSS 的 Web 项目 当我修改 Sass 文件时 Compass 会自动为我创建相应的 CSS 文件 如果文件发生更改 Webstorm 会
  • 无法在 Karma 中安装 phantomJS

    WARN config config configure is deprecated please use config set instead WARN plugin Cannot find plugin karma phantomjs
  • grunt-bower-task 和 Polymer

    我似乎找不到简单的复制方法all文件来自Polymer使用咕噜鲍尔任务 grunt initConfig bower install options targetDir wwwroot lib layout byComponent inst
  • 我可以用 SASS \ Compass 计算和使用元素高度吗

    我在 RoR 项目中使用 sass 和 compass 我需要分配给top元素的 CSS 属性值 即元素高度除以 2 我可以用 SASS Compass 来做吗 你似乎已经得到了XY问题 https meta stackexchange c
  • 在多个 Compass 项目中加载全局 SASS 文件

    我想创建一个多个 Compass 项目将访问的 SASS 文件目录 该目录将包含许多具有相似样式 表单元素 clearfixes 重置等 的常见元素的 SASS 文件 我希望在多个项目中访问和使用这些元素 如何在多个项目中包含这个全局 SA
  • Vagrant 提供,无法启动 grunt

    我正在尝试让 vagrant 安装 nodejs 正常运行所需的所有内容 然后在节点项目的根文件夹上执行 nohup grunt server 之后 我期望服务器在端口 3030 上侦听 但事实并非如此 如果在配置后我这样做 流浪者 ssh

随机推荐