2
Rails（3.1）プロジェクトでBlueprint（SCSS-Syntax）を使用しようとしています。Compass Blueprintミックスインはコンパイルされませんか？
compass install blueprint .
それはとSASSディレクトリを生成します。それは、単純な私はコンパスのインストールと基本的なSCSSファイルを作成した後、いくつかの基本的な青写真の構文で（私のレールプロジェクト外）、プレーンHTMLファイルを設定し、最初に保つために 他のものの間で
@import blueprint
を、私はコンパスを見た後に期待していたとしてスタイルシート/ screen.cssは、スパン-X命令が含まれていません：クリスEppsteinのによる実スタイルシートフレームワーク（含まれていscreen.scss 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。
2番目は、プリコンパイルされたscreen.css（青写真のWebサイトからダウンロード）をスタイルシートフォルダにコピーします。すべてが魅力的です。それは私のレールプロジェクトの内部と同じです。私はそこに問題なくコンパイルされたCSSを使用することができます。
私はここで何か基本的なものが欠けていると思いますが、私はコンパスが動作するには魔法をコンパイルする必要がありますが、私はそれが何であるか把握できません。
ありがとうございました！
バージョン
- コンパス0.11.5（アンタレス）
- ルビー1.8.7（レールプロジェクトの外側）
- RVMを使用ルビー1.9.2（レールプロジェクトに）
- 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のバージョンを変更し、SCSSにSASSフォルダの名前を変更しようとしました。私はここにアイデアが不足しています...
あなた自身の質問をフォローアップしてくれてありがとう - 私は同じ問題を抱えていました。コンパスのドキュメントは、このような基本的な詳細にはいくぶん欠けています。 – mrampton