Css 指南针蓝图混合不编译?
我正试图让Blueprint(SCSS语法)与我的Rails(3.1)项目一起工作。 为了保持简单,在安装compass并创建基本的scss文件后,我首先使用一些基本的blueprint语法设置了一个简单的HTML文件(在rails项目之外):Css 指南针蓝图混合不编译?,css,compass-sass,sass,blueprint-css,Css,Compass Sass,Sass,Blueprint Css,我正试图让Blueprint(SCSS语法)与我的Rails(3.1)项目一起工作。 为了保持简单,在安装compass并创建基本的scss文件后,我首先使用一些基本的blueprint语法设置了一个简单的HTML文件(在rails项目之外): compass install blueprint . 它生成一个包含screen.scss的sass目录,其中包含: @import blueprint 除其他内容外,stylesheets/screen.css不包含span-x指令,正如我在观看
compass install blueprint .
它生成一个包含screen.scss的sass目录,其中包含:
@import blueprint
除其他内容外,stylesheets/screen.css不包含span-x指令,正如我在观看了Chris Eppstein的《Compass:一个真正的样式表框架》之后所期待的那样(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>
召唤
compass compile
告诉我一切都没变。但一旦我加上它就会起作用
@import "blueprint/grid"
比如说。但仍然没有漂亮的html
第二次,我将一个预编译的screen.css(从blueprint网站下载)复制到stylesheets文件夹中,一切都像一个符咒。在我的rails项目中也是如此。我可以在那里毫无问题地使用预编译的css
我想我错过了一些基本的东西,我需要做的罗盘编译魔术工作,但我不知道它是什么
提前感谢您的任何想法
版本
- 指南针0.11.5(心宿二)
- ruby 1.8.7(rails项目之外)
- ruby 1.9.2(与rails项目一起)
- 使用rvm 1.6.21
// 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应该足够了,当我尝试时,我看到了一条错误消息。 结果表明,错误消息是通过在行尾添加分号解决的
也许应该在shipped screen.scss中添加smiclon。我会给作者发一封电子邮件。谢谢你回答你的问题——我遇到了同样的问题。compass的文档中缺少一些基本细节,例如:(
// 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); } }