【发布时间】：2015-07-24 23:35:50
【问题描述】：
我是 sass 的新手，我正试图摆脱 bootstrap，转而采用更量身定制且不那么笨拙的框架。我真的很想使用 susy 创建漂亮的网格布局，但是在尝试将 scss 文件编译成 css 时遇到了问题。
谁能帮我解决这个问题？
error sass/style.scss (/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/compass-core-1.1.0.alpha.3/lib/compass/core/sass_extensions/functions/image_size.rb:19:in `extname': no implicit conversion of nil into String)
我查看了有问题的文件，它似乎引用了一个文件类型，它是 ext；
@file_type = File.extname(@file)[1..-1].downcase
这是回溯；
/*
TypeError: no implicit conversion of nil into String
Backtrace:
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/compass-core-1.1.0.alpha.3/lib/compass/core/sass_extensions/functions/image_size.rb:19:in `extname'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/compass-core-1.1.0.alpha.3/lib/compass/core/sass_extensions/functions/image_size.rb:19:in `initialize'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/compass-core-1.1.0.alpha.3/lib/compass/core/sass_extensions/functions/image_size.rb:54:in `new'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/compass-core-1.1.0.alpha.3/lib/compass/core/sass_extensions/functions/image_size.rb:54:in `image_dimensions'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/compass-core-1.1.0.alpha.3/lib/compass/core/sass_extensions/functions/image_size.rb:12:in `image_height'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/sass-3.4.16/lib/sass/script/tree/funcall.rb:140:in `_perform'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/sass-3.4.16/lib/sass/script/tree/node.rb:50:in `perform'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/sass-3.4.16/lib/sass/tree/visitors/perform.rb:394:in `visit_prop'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/sass-3.4.16/lib/sass/tree/visitors/base.rb:36:in `visit'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/sass-3.4.16/lib/sass/tree/visitors/perform.rb:158:in `block in visit'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/sass-3.4.16/lib/sass/stack.rb:79:in `block in with_base'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/sass-3.4.16/lib/sass/stack.rb:115:in `with_frame'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/sass-3.4.16/lib/sass/stack.rb:79:in `with_base'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/sass-3.4.16/lib/sass/tree/visitors/perform.rb:158:in `visit'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/sass-3.4.16/lib/sass/tree/visitors/perform.rb:430:in `block (2 levels) in visit_rule'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/sass-3.4.16/lib/sass/tree/visitors/perform.rb:430:in `map'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/sass-3.4.16/lib/sass/tree/visitors/perform.rb:430:in `block in visit_rule'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/sass-3.4.16/lib/sass/tree/visitors/perform.rb:179:in `with_environment'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/sass-3.4.16/lib/sass/tree/visitors/perform.rb:428:in `visit_rule'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/sass-3.4.16/lib/sass/tree/visitors/base.rb:36:in `visit'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/sass-3.4.16/lib/sass/tree/visitors/perform.rb:158:in `block in visit'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/sass-3.4.16/lib/sass/stack.rb:79:in `block in with_base'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/sass-3.4.16/lib/sass/stack.rb:115:in `with_frame'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/sass-3.4.16/lib/sass/stack.rb:79:in `with_base'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/sass-3.4.16/lib/sass/tree/visitors/perform.rb:158:in `visit'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/sass-3.4.16/lib/sass/tree/visitors/perform.rb:430:in `block (2 levels) in visit_rule'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/sass-3.4.16/lib/sass/tree/visitors/perform.rb:430:in `map'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/sass-3.4.16/lib/sass/tree/visitors/perform.rb:430:in `block in visit_rule'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/sass-3.4.16/lib/sass/tree/visitors/perform.rb:179:in `with_environment'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/sass-3.4.16/lib/sass/tree/visitors/perform.rb:428:in `visit_rule'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/sass-3.4.16/lib/sass/tree/visitors/base.rb:36:in `visit'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/sass-3.4.16/lib/sass/tree/visitors/perform.rb:158:in `block in visit'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/sass-3.4.16/lib/sass/stack.rb:79:in `block in with_base'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/sass-3.4.16/lib/sass/stack.rb:115:in `with_frame'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/sass-3.4.16/lib/sass/stack.rb:79:in `with_base'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/sass-3.4.16/lib/sass/tree/visitors/perform.rb:158:in `visit'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/sass-3.4.16/lib/sass/tree/visitors/base.rb:52:in `block in visit_children'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/sass-3.4.16/lib/sass/tree/visitors/base.rb:52:in `map'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/sass-3.4.16/lib/sass/tree/visitors/base.rb:52:in `visit_children'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/sass-3.4.16/lib/sass/tree/visitors/perform.rb:167:in `block in visit_children'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/sass-3.4.16/lib/sass/tree/visitors/perform.rb:179:in `with_environment'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/sass-3.4.16/lib/sass/tree/visitors/perform.rb:166:in `visit_children'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/sass-3.4.16/lib/sass/tree/visitors/base.rb:36:in `block in visit'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/sass-3.4.16/lib/sass/tree/visitors/perform.rb:186:in `visit_root'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/sass-3.4.16/lib/sass/tree/visitors/base.rb:36:in `visit'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/sass-3.4.16/lib/sass/tree/visitors/perform.rb:157:in `visit'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/sass-3.4.16/lib/sass/tree/visitors/perform.rb:8:in `visit'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/sass-3.4.16/lib/sass/tree/root_node.rb:36:in `css_tree'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/sass-3.4.16/lib/sass/tree/root_node.rb:20:in `render'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/sass-3.4.16/lib/sass/engine.rb:278:in `render'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/compass-import-once-1.0.5/lib/compass/import-once/engine.rb:17:in `block in render'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/compass-import-once-1.0.5/lib/compass/import-once/engine.rb:29:in `with_import_scope'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/compass-import-once-1.0.5/lib/compass/import-once/engine.rb:16:in `render'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/sass-3.4.16/lib/sass/plugin/compiler.rb:492:in `update_stylesheet'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/sass-3.4.16/lib/sass/plugin/compiler.rb:215:in `block in update_stylesheets'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/sass-3.4.16/lib/sass/plugin/compiler.rb:209:in `each'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/sass-3.4.16/lib/sass/plugin/compiler.rb:209:in `update_stylesheets'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/sass-3.4.16/lib/sass/plugin/compiler.rb:470:in `on_file_changed'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/sass-3.4.16/lib/sass/plugin/compiler.rb:328:in `block in watch'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/sass-3.4.16/vendor/listen/lib/listen/listener.rb:252:in `call'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/sass-3.4.16/vendor/listen/lib/listen/listener.rb:252:in `on_change'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/sass-3.4.16/vendor/listen/lib/listen/listener.rb:290:in `block in initialize_adapter'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/sass-3.4.16/vendor/listen/lib/listen/adapter.rb:254:in `call'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/sass-3.4.16/vendor/listen/lib/listen/adapter.rb:254:in `report_changes'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/sass-3.4.16/vendor/listen/lib/listen/adapter.rb:323:in `poll_changed_directories'
/usr/local/rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/sass-3.4.16/vendor/listen/lib/listen/adapter.rb:299:in `block in start_poller'
*/
body:before {
white-space: pre;
font-family: monospace;
content: "TypeError: no implicit conversion of nil into String"; }
SCSS 文件
@import "partials/normalize";
@import "partials/variables";
@import "partials/layout";
@import "partials/mixins";
@import "breakpoint";
@import "partials/grids";
header {
height: 100px;
background: $blue;
color: $white;
margin-bottom: 10px;
padding: 10px;
}
.wrapper {
background: $white;
margin: 0 auto;
max-width: 900px;
}
nav {
text-align: center;
ul, li {
padding: 0;
}
li {
background: $gray;
}
a {
text-decoration: none;
color: $white;
&:hover {
color: $yellow;
}
}
}
.first-row {
height: 100px;
margin-bottom: 10px;
padding: 10px;
}
.first-row .first{
background: $yellow;
height: 100%;
}
.first-row .second{
height: 100%;
}
.first-row .second div{
background: $orange;
height: 100%;
}
.pic-gallery {
div {
background: $violet;
height: 100%;
margin-bottom: 10px;
padding: 10px;
}
}
.content-bar {
div {
background: $green;
height: 100%;
margin-bottom: 10px;
padding: 10px;
}
}
footer {
height: 100px;
background: $blue;
color: $white;
margin-top: 10px;
padding: 10px;
clear: both;
}
// Grid Stuff
header {
// Span the entire area available and eliminates floating elements
@include full;
// Have the logo take up 1.35 columns
// You can add wide or wider to take 1 or 2 gutters in space
// span(wide 1.35)
.logo {
@include span(1.35);
// Sass helpers for getting image size
height: image-height("./images/nttlogo.png");
width: image-width("./images/nttlogo.png");
}
// Start at the last 2 column point
h1 {
@include span(last 2);
@include breakpoint((max-width 50em)){
@include span(last 4);
}
}
}
.nav {
@include full;
}
.wrapper {
// Return the container that uses the layouts we defined
// You could pass in a size container(800px)
@include container;
}
// Have each nav li item take up 3 columns of the layout with
// gutters inside
.nav-item {
@include span(3 of $nav_susy_layout);
// You can add 1 column of margin:
// margin-bottom: span(1);
}
.first-row {
// No floating elements on the left or right
clear: both;
.first {
@include span(first 4);
}
.second {
// Place in last 8 spaces
@include span(last 8);
div:nth-child(1) {
// Take up to columns starting at 1st of 8
@include span(2 at 1 of 8);
}
div:nth-child(2) {
@include span(2 at 3 of 8);
}
div:nth-child(3) {
@include span(2 at 5 of 8);
}
div:nth-child(4) {
@include span(2 at 7 of 8);
// Break element to the next row
// @include break();
}
div:nth-child(5) {
@include span(last 2 of 8);
}
}
}
.pic-gallery {
@include clearfix;
// Define the padding by passing the number of columns
padding: gutter(12);
// Add padding on sides
padding: 0 10px;
div {
// Take up 2 of every 12 for all 6 pics
@include gallery(2 of 12);
}
div:nth-child(5) {
// Make the element take up the last position
@include last();
}
div:nth-child(1) {
// Make the element take up the last position
// Move over 1 column @include pre(1);
// Move to the left 1 column with pull(1);
// Move content 1 column @include prefix(1);
// Move content left 1 column @include suffix(1);
}
}
.content-bar {
// Add padding on sides
padding: 0 10px;
// Return the size of a gutter
margin-top: gutter();
div:nth-child(1){
@include span(6 of 12);
// You can add a specifically sized gutter before, after,
// inside, or split
@include gutters(3em inside);
@include breakpoint((max-width 40em)){
@include span(12 of 12);
}
}
div:nth-child(2){
@include span(last 6 of 12);
@include breakpoint((max-width 40em)){
@include span(12 of 12);
}
}
}
【问题讨论】：
-
更多代码，比如这个 scss 文件。现在好像
@file就是nil，但为什么会这样，我说不准。 -
按要求添加，任何帮助都会很棒，即使它只是一些故障排除技巧，我有点迷茫，暂时关注教程
-
看起来 Compass 找不到此文件，或者它查找的路径不存在。假设 nttlogo.png 在您的图像文件夹中，请尝试使用
height: image-height("nttlogo.png"); width: image-width("nttlogo.png");，而不是height: image-height("./images/nttlogo.png"); width: image-width("./images/nttlogo.png");。