不能弄清楚爲什麼我的SASS不會工作

嘿，我正在學習rails並遵循rails教程。我使用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的鏈接，如果你需要看別的東西

來源

2014-01-20 frigit

錯誤說，你需要一個參數box_sizing。

因此請嘗試@include box-sizing(border-box);。

來源

2014-01-20 04:13:07 ironsand

我犯了同樣的錯誤。再次檢查Listing 7.2，有一些額外的代碼前，先在「/ * *雜項/」的一部分，在這裏聲明一下box_sizing是：

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

來源

2014-03-13 15:10:28

感謝您指出了這一點！ – alchuang

這應該是被接受的答案。謝謝！ – Dmitri

確保您引導& bootstrap-後宣佈混入鏈輪進口（即確保你沒有在 @import「bootstrap」之前聲明box_sizing ）。 Bootstrap sass有一個內置的box_sizing混合，否則將優先於你的。

這在railsguide中沒有真正涵蓋（沒有指示@import bootstrap引入了衝突的mixin），所以這絕對是一個容易犯的錯誤。

我對同一個錯誤消息有同樣的問題，現有的解決方案都不適合我。在我的情況下，我爲mixins和變量創建了一個scss文件，並在bootstrap和bootstrap-sprockets之前導入它。將它移到它們下面可以解決問題。所以你的情況，請確保您的一般順序是：

@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; }

來源

2016-04-14 09:30:22

我有同樣的問題，整理清單7.2我加入上市7.11的CSS代碼欄更新custom.scss在上custom.scss工作後以及代碼清單7.15中的表單css代碼，在清單7.2的Sass mixin css代碼之上。所以它看起來像這樣。

/* 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); 
 
}

修復它我帶代碼7.2回到頂部下方的`@import「自舉鏈輪」的薩斯混入CSS代碼; @import「bootstrap」;但要高於代碼清單7.11和代碼清單7.15的css代碼。這爲我解決了這個問題，當我完成時，這裏是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%;

來源

2016-07-06 21:28:27

不能弄清楚爲什麼我的SASS不會工作

回答

相關問題