我正在尝试在启动新的Rails 3.1项目时决定是否应该包含Compass.我以前没用过Compass.
Rails 3.1现在直接支持SCSS.Rails 3.1资产管道(通过链轮)现在自动编译样式表.我可以直接使用蓝图等CSS框架的SCSS版本.
使用Compass with Rails 3.1可以获得什么好处？
sass blueprint-css ruby-on-rails-3 ruby-on-rails-3.1 compass-sass
我正在尝试将CSS框架Blueprint加载到我的Rails 3.1应用程序中.
在Rails 3.0+中,我在views/layouts/application.html.erb中会有类似的东西:
<%= stylesheet_link_tag 'blueprint/screen', 'application' %>
<%= stylesheet_link_tag 'blueprint/print', 'media' => 'print' %>
<!--[if lt IE 8]>
<%= stylesheet_link_tag 'blueprint/ie' %>
<![endif]-->
但是,Rails 3.1现在使用SASS.加载这些Blueprint CSS文件的正确方法是什么？
目前,我在app/assets/stylesheets /中有蓝图目录
我的app/assets/stylesheets/application.css看起来像:
/*
* This is a manifest file that'll automatically include all the stylesheets available in this directory
* and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
* the top of the compiled file, but it's generally better to create a new …我有一个Rails 3应用程序,我成功运行compass init rails ./ --using blueprint.我可以@import从/ stylesheets目录中找到文件,但是当我尝试时出现错误@import compass.
现在该应用程序有两个简单的sass文件:
common.scss
$body-background: blue;
main.scss
@import "common";
//@import "compass";
body {
background: $body-background;
}
随着这@import "compass"条线的注释,这个工作 - 我得到一个蓝色的背景,所以我知道Sass正在工作.
如果我取消注释该行,并尝试导入compass或blueprint其他任何东西,我会收到这样的错误.
Syntax error: File to import not found or unreadable: compass.
Load paths:
/Users/eric/path/to/myrailsapp/app/stylesheets
on line 2 of /Users/eric/path/to/myrailsapp/app/stylesheets/main.scss
1: @import "common";
2: @import "compass";
3:
4: body {
5: background: $body-background;
6: }
也许我必须明确地告诉Sass在哪里找到Compass宝石,所以我add_import_path在config/compass.rb中添加了一行:
require 'compass'
require 'html5-boilerplate' …ruby-on-rails sass blueprint-css ruby-on-rails-3 compass-sass
我正在进入Web开发,我正在使用Blueprint CSS框架,其中包括一个网格系统,我有几个问题.
非常感谢你的智慧!
我正在尝试按下这样的按钮:
=default_button(!lighter, !darker)
:border= 1px !lighter solid
:background-color #e3e3e3
:background= -webkit-gradient(linear, 0 0, 0 100%, from(!lighter), to(!darker)) repeat-x, #d0581e
:background= -moz-linear-gradient(90deg, !darker, !lighter) repeat-x scroll 0 0 #d0581e
:filter= progid:DXImageTransform.Microsoft.gradient(startColorstr='!lighter', endColorstr='!darker')
:-ms-filter= "progid:DXImageTransform.Microsoft.gradient(startColorstr='!lighter', endColorstr='!darker')"
:zoom 1
:margin 0 0 0 0
:width auto
:padding 2px 14px 2px 14px
:border-radius 10px
:-webkit-border-radius 10px
:-moz-border-radius 10px
:color #FFF
当我编译sass时,我得到以-filter和-ms-filter开头的行的错误:
SASS :: SyntaxError:预期的rparen令牌,是single_eq令牌
我很确定这是我的's'的位置,但我不确定如何正确地写它.它可以工作,如果我传递十六进制值而不是!更轻,更暗,因为那样我可以删除=符号,如下所示:
:filter progid:DXImageTransform.Microsoft.gradient(startColorstr='#F89F16', endColorstr='#d0581e')
:-ms-filter "progid:DXImageTransform.Microsoft.gradient(startColorstr='#F89F16', endColorstr='#d0581e')"
我正在考虑将这两种技术结合起来用于新项目.
这是个坏主意吗？是否有任何推荐的替代网格系统可用于html5样板？
例如,
<a href="../somepage/page.aspx?qs=asdf">Text Here</a>
将打印出来......
文字在这里(../ somepage/page.aspx？qs = asdf)
在IE中,它看起来很正常(不打印网址).有什么想法为什么这样做？
任何人都可以帮我搞清楚IE的css(蓝图css)
我已经做好了
<?php $headlink = $this->headLink();
$headlink->appendStylesheet($this->baseUrl('css/blueprint/screen.css') , 'screen, projection')
->appendStylesheet($this->baseUrl('css/blueprint/ie.css'), 'screen, projection', "IE")
->appendStylesheet($this->baseUrl('css/blueprint/print.css'));
echo $headlink;
?>
而且这段代码也不起作用
<?php $headlink = $this->headLink();
$headlink->appendStylesheet($this->baseUrl('css/blueprint/screen.css') , 'screen, projection')
->appendStylesheet($this->baseUrl('css/blueprint/ie.css'), 'screen, projection', true)
->appendStylesheet($this->baseUrl('css/blueprint/print.css'));
echo $headlink;
?>
更新::
它看起来很像
<!--[if lt IE 8]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
最终,我喜欢编写自己的CSS代码.当我必须遵守别人的命名惯例时,我讨厌它......特别是当它们没有真正的意义时.但是,我很清楚移动网站已准备好使用框架.
现在,我已经看到了960.gs和Blueprint之间的几次比较,但是LESS从未参与过那些辩论.为什么不？我错过了什么吗？对我而言,似乎LESS几乎完全相同.
有人在乎讨论吗？