青菜变量 - 青菜 - 轨道 - 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

回答

相关问题