bundle install 报错

[rdmclin2]

报错如下:

Fetching source index from http://ruby.taobao.org/
Could not fetch specs from http://ruby.taobao.org/

把Gem file的source改成了source "https://ruby.taobao.org"解决。是淘宝的http服务器改成https了吧

[rdmclin2]

另外 @include clear fix;这句报错:

17:21:21 - INFO - Reloading browser: stylesheets/style.css
    error sass/style.scss (Line 29: Undefined mixin 'clearfix'.)
Compilation failed in 1 files.

我应该已经用bundle install 安装了所需要的gem了，版本信息如下:

Using hitimes 1.2.2
Using timers 4.0.1
Using celluloid 0.16.0
Using chunky_png 1.3.4
Using coderay 1.1.0
Using multi_json 1.11.0
Using sass 3.4.14
Using compass-core 1.0.3
Using compass-import-once 1.0.5
Using rb-fsevent 0.9.5
Using ffi 1.9.8
Using rb-inotify 0.9.5
Using compass 1.0.3
Using eventmachine 1.0.7
Using http_parser.rb 0.6.0
Using em-websocket 0.5.1
Using formatador 0.2.5
Using listen 2.10.0
Using lumberjack 1.0.9
Using nenv 0.2.0
Using shellany 0.0.1
Using notiffany 0.0.6
Using method_source 0.8.2
Using slop 3.6.0
Using pry 0.10.1
Using thor 0.19.1
Using guard 2.12.6
Using guard-compass 1.1.0
Using guard-livereload 2.4.0
Using bundler 1.10.6

scss文件如下,已经import了compass/css3:

@import "compass/reset";
@import "compass/css3";

body {
    font-size: 62.5%;
    text-align: center;
}

.hero {
    max-width: 100em;
    margin : 0 auto;

    header {
        img {
            width: 8em;
            height: 2em;
            float: left;
        }

        ul {
            float: right;

            li{
                float: left;
                margin: 0 .5em;
                padding: 1em;
            }
        }
        @include clearfix;
    }

    h1 {
        font-size: 4em;
        padding: 1em 0 .5em 0;
    }

    h2 {
        font-size: 2em;
    }

}

[rdmclin2]

ok...上一个问题我自己找到答案了,因为clearfix在 @import "compass/utilities/";这个模块里

[rdmclin2]

噗，抱歉，我又来报告问题了。我觉得hero的背景图片应该放在images下而不是让读者在gitbook上自己下载。然后在用到$highlight-text-color的时候应该提示读者在文档上声明这个变量，$bg-color也是。最后就是我们还需要一些细节需要处理，比如Sign up按钮的边框，logo等：这句话后来也没告诉读者怎么处理logo的=。=

[abruzzi]

@rdmclin2 非常感谢你提出的问题，不过也可以看到，你自己解决问题的速度也很快 :) 。我会尽快更新到gitbook上。

[rdmclin2]

@abruzzi :) ,我把我遇到的一些问题就写在这个issue下好了。

• numbers这一节的emmet代码section.numbers>ul>li*4>h2+h3，改成section.numbers>ul>li.number*4>h2+h3更好些，添加了number类省的自己添加
• 上一个问题所在位置的上一张图片和下一张图片明显背景颜色发生了变化，但是没有提醒读者在 body下添加background-color: $bg-color;
• $border-color只有使用，没有在任何地方进行声明，我用SIP从你的截图中截出来个颜色...
• 对于字体,要自己在icomoon上选择需要的下载然后放到工程中修改。然后不知道原来fonts文件夹有什么用，是提供给读者免去下载的？然而在sass文件夹下却没有相应的icomoon.scss。
• how-it-works这一节的样式有缺失，如h3和p,虽然可以自己尝试着写出来
• 另外希望可以提供完成后的页面的源码,这样可以对照修改，知道自己哪里有问题。
• 最后，那个3个数字的伪元素一直做不出效果来，这一节的css代码如下:

.how-it-works {
        h2 {
            font-size: 2em;
            text-transform: uppercase;
            padding: 1em 0;
            &:after {
                display: block;
                content: "";
                background-color: $border-color;
                width: 2em;
                height: .1em;
                margin: .4em auto;
            }
        }
        ul {
            li {
                float: left;
                width: 33.33%;

                &:before {
                    display: block;
                    content: "";
                    background: $border-color;
                    width: 100%;
                    height: 1px;
                    position: absolute;
                    top: 4em;
                    left: 50%;
                    margin: 0 2em;
                }

                &:last-child:before {
                    display: none;
                }

                .number {
                    font-size: 2em;
                    color: $border-color;
                    border: 1px solid $border-color;
                    width: 1em;
                    height: 1em;
                    display: block;
                    margin: 1em auto 2em auto;
                    padding: .4em;
                    @include border-radius(100%);
                    background-color: $bg-color;
                }
                i {
                    font-size: 3.6em;
                }
                h3 {
                    font-size: 2em;
                    font-weight: bold;
                    margin: 1em auto 1em auto;
                }
                p {
                    color: $border-color;
                }
                .icon-pencil {
                    color: #AC9CD2;
                }
                .icon-list2 {
                    color: #ECA95A;
                }
                .icon-users {
                    color: #4D99CB;
                }
            }
        }
    }

结果不知道为什么跑到上面的list上去了

[zhulinpinyu]

@rdmclin2 这个问题我也遇到了。

解决的方法是：

ul {
    li {
      float: left;
      width: 33.33%;
      position: relative;

      &:before {
        display: block;
        content: "";
        background-color: $border-color;
        width: 100%;
        height: 1px;
        position: absolute;
        top: 4em;
        left: 50%;
        margin: 0 2em;
      }

      &:last-child:before {
        display: none;
      }

添加这行就可以了

position: relative;

参考地址：https://github.com/abruzzi/craft-web-page/blob/master/sass/style.scss

[rdmclin2]

@zhulinpinyu thx！