青菜變量 - 青菜 - 軌道 - 3.2.3

我試圖使用媒體查詢的變量 -青菜變量 - 青菜 - 軌道 - 3.2.3

$break-small: 320px; 
$break-large: 1200px; 

.profile-pic { 
    float: left; 
    width: 250px; 
    @media screen and (max-width: $break-small) { 
    width: 100px; 
    float: none; 
    } 
    @media screen and (min-width: $break-large) { 
    float: right; 
    } 
}

它說，它現在可以in this article

它拋出一個錯誤 -

Invalid CSS after "...nd (max-width: ": expected expression (e.g. 1px, bold), was "$break-small)

我的寶石文件 -

gem 'sass-rails', '~> 3.2.3'

sass-rails gem v 3.2.3在sass gem後面？還是我錯過了明顯的東西？

來源

2012-08-29 Finnnn

看看你的錯誤：「was」$ break-mid）「你沒有在任何地方定義的$ break-mid。 – Nobita

抱歉，錯誤地複製了錯誤 - 這不是問題。修正的問題。 – Finnnn

你是怎麼命名的樣式表文件？擴展我的意思。 – Nobita

回答我自己的問題 -

我有看看我的Gemfile.lock的，該化合物具有下列 -

sass (3.1.20) 
sass-rails (3.2.5)

之後，我只是跑它更新青菜到正確的版本「捆綁更新頂嘴」。

媒體查詢中的變量現在按預期工作。

來源

2012-08-30 08:41:35 Finnnn

我只是嘗試這樣做完全一樣的風格與你使用的是相同的寶石一個新的Rails項目和它的作品就像一個魅力。所以我的猜測是你的文件使用了'sass'擴展名，你應該使用'scss'。

兩者之間的語法是不相容的那麼距離（例如）'mystyle.css.sass'到'mystyle.css.scss'

來源

2012-08-29 16:32:48 Nobita

恐怕不行，我已經正確命名的文件。謝謝你在看看。 – Finnnn

試試這個更改文件名：

@mixin breakpoint($point) { 
    @if $point == break-small { 
    @media only screen and (max-width: 320px) { @content; } 
    } 
    @else if $point == break-large { 
    @media only screen and (min-width: 1200px) { @content; } 
    } 
}

，並指這樣的：

.profile-pic { 
    float: left; 
    width: 250px; 
    @include breakpoint(break-small) { 
    width: 100px; 
    float: none; 
    } 
    @include breakpoint(break-large) { 
    float: right; 
    } 
}

來源

2012-08-29 18:10:28 acki

感謝在看看，但我是一個愚蠢的，但我已經回答了以下我自己的問題。 – Finnnn

青菜變量 - 青菜 - 軌道 - 3.2.3

回答

相關問題