个人中心
gpt4 book ai didi

css - Compass Blueprint mixins 没有编译？

转载 作者：行者123 更新时间：2023-11-28 12:25:45 25 4
gpt4 key购买 nike

我正在尝试让蓝图(SCSS 语法)与我的 Rails (3.1) 元素一起工作。一开始为了简单起见，在安装 compass 并创建基本的 scss 文件后，我使用一些基本的蓝图语法设置了一个纯 HTML 文件(在我的 rails 元素之外):

compass install blueprint .

它生成一个带有 screen.scss 的 sass 目录，其中包含:

@import blueprint

在其他内容中，但是 stylesheets/screen.css 不包含 span-x 指令，正如我在观看 Compass 之后所期待的那样:Chris Eppstein (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。

我想我在这里遗漏了一些基本的东西，我需要做一些基本的事情才能让 compass 编译魔法起作用，但我不知道它是什么。

提前感谢您的任何想法!

版本

  • compass 0.11.5(心大星)
  • ruby 1.8.7(在 rails 元素之外)
  • ruby 1.9.2(与 rails 元素)
  • 使用 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); } }

我还尝试更改我的 ruby​​ 版本并将 sass 文件夹重命名为 scss。我的想法已经用完了...

最佳答案

好的。这是基本的东西。我没有取消对“@include blueprint”行的注释，因为我认为@import blueprint 应该足够了，当我尝试时出现错误消息。结果是通过在行尾添加分号解决了错误消息。

也许应该在附带的 screen.scss 中添加分号。我会向作者发送电子邮件。

关于css - Compass Blueprint mixins 没有编译？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6710556/

25 4 0
文章推荐： css - 当 LTR 和 RTL 混合时更正字体大小
文章推荐： javascript - JavaScript 函数如何运行
文章推荐： javascript - Jquery:通过委托(delegate)事件触发时更改下拉列表的值
文章推荐： css - 清理和合并内联 CSS 样式
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com