2014-01-20 3 views
3

Эй, я пытаюсь изучить рельсы и следовать руководству по рельсам. Я добавляю некоторые элементы листов приложений стиля с помощью SCSS и это то, что я добавляюНе могу понять, почему мой SASS не работает

/* miscellaneous */ 

    .debug_dump { 
    clear: both; 
    float: left; 
    width: 100%; 
    margin-top: 45px; 
    @include box_sizing; 
    } 
} 

, но когда я иду, чтобы посмотреть мой его в браузере я получаю эту ошибку

Mixin box-sizing is missing argument $boxmodel. 
    (in /Users/<mynamehere>/workspace/sample_app/app/assets/stylesheets/custom.css.scss:110) 

<html> 
    <head> 
     <title><%= full_title(yield(:title)) %></title> 
     <%= stylesheet_link_tag "application", media: "all", 
              "data-turbolinks-track" => true %> 
     <%= javascript_include_tag "application", "data-turbolinks-track" => true %> 
     <%= csrf_meta_tags %> 

Rails.root: /Users/<mynamehere>/workspace/sample_app 

Любой помощь было бы высоко оценено. Вот ссылка на мой github, если вам нужно увидеть что-нибудь еще

ответ

3

Ошибка говорит, вам нужен аргумент для box_sizing.

Попробуйте @include box-sizing(border-box);.

3

Я сделал ту же ошибку. Проверьте еще раз Listing 7.2, есть некоторые дополнительный код там до «/ * Разный * /» части, где вы объявляете, что такое box_sizing является:

@mixin box_sizing { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 
+0

Спасибо за указание на это! – alchuang

+1

Это должен быть принятый ответ. Благодаря! – Dmitri

1

Убедитесь, что вы объявляя подмешать после бутстрапа & bootstrap- импорт звездочек (т. е. убедитесь, что вы не объявляете box_sizing до @import "bootstrap"). Bootstrap sass имеет встроенный comb_size mixin, который в противном случае будет иметь приоритет над вашим.

Это не действительно покрыто railsguide (нет индикатора, что @import bootstrap вводит конфликтующий микс), поэтому это определенно простая в использовании ошибка.

У меня была такая же проблема с тем же сообщением об ошибке, и ни одно существующее решение не работало для меня. В моем случае я создал файл scss для mixins и переменных и импортировал его перед загрузкой и бутстрапом-звездочками. Перемещение его под ними устранило проблему. Так что в вашем случае, убедитесь, что ваш общий порядок:

@import "bootstrap-sprockets" 
@import "bootstrap"; 

/* either @import your-file-containing-box-sizing-mixin; or: */ 

@mixin box_sizing { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing:   border-box; 
} 

.debug_dump { 
    clear: both; 
    float: left; 
    width: 100%; 
    margin-top: 45px; 
    @include box_sizing; 
} 
0

У меня была такая же проблема, после окончания работы над custom.scss в листинге 7.2 я обновил custom.scss, добавив CSS врезку код листинга 7.11 и код формы css в листинге 7.15 поверх кода sss mixin css в листинге 7.2. Так было так.

/* forms */ 
 

 
input, textarea, select, .uneditable-input { 
 
    border: 1px solid #bbb; 
 
    width: 100%; 
 
    margin-bottom: 15px; 
 
    @include box_sizing; 
 
} 
 

 
input { 
 
    height: auto !important; 
 
} 
 
/* sidebar */ 
 

 
aside { 
 
    section.user_info { 
 
    margin-top: 20px; 
 
    } 
 
    section { 
 
    padding: 10px 0; 
 
    margin-top: 20px; 
 
    &:first-child { 
 
     border: 0; 
 
     padding-top: 0; 
 
    } 
 
    span { 
 
     display: block; 
 
     margin-bottom: 3px; 
 
     line-height: 1; 
 
    } 
 
    h1 { 
 
     font-size: 1.4em; 
 
     text-align: left; 
 
     letter-spacing: -1px; 
 
     margin-bottom: 3px; 
 
     margin-top: 0px; 
 
    } 
 
    } 
 
} 
 

 
.gravatar { 
 
    float: left; 
 
    margin-right: 10px; 
 
} 
 

 
.gravatar_edit { 
 
    margin-top: 15px; 
 
} 
 
/* mixins, variables, etc. */ 
 

 

 
@mixin box_sizing { 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
/* miscellaneous */ 
 

 
.debug_dump { 
 
    clear: both; 
 
    float: left; 
 
    width: 100%; 
 
    margin-top: 45px; 
 
    @include box-sizing(border-box); 
 
}

исправить это я принес Sass Mixin CSS код из листинга 7.2 назад к верхней ниже `@import "бутстраповских-звездочках"; @import "bootstrap"; но быть выше кода css в листинге 7.11 и листинге 7.15. Это фиксировало проблему для меня, вот вершина custom.scss, когда я закончил.

@import "bootstrap-sprockets"; 
 
@import "bootstrap"; 
 

 

 
/* mixins, variables, etc. */ 
 
@mixin box_sizing { 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
/* miscellaneous */ 
 

 
.debug_dump { 
 
    clear: both; 
 
    float: left; 
 
    width: 100%; 
 
    margin-top: 45px; 
 
    @include box-sizing(border-box); 
 
} 
 
/* forms */ 
 

 
input, textarea, select, .uneditable-input { 
 
    border: 1px solid #bbb; 
 
    width: 100%;

Смежные вопросы