カスタム Compass/Sass 関数を正しくコンパイルするのに問題があります。エラーが発生し続けます：
error library/scss/mixins.scss (Line 302: Invalid CSS after "...: $font-base) {": expected "}", was " @if $targe...")
@import がめちゃくちゃになる可能性があることについて、Stack Exchange で何かを読んでいました。
これが私の機能です：
$columns: 12;
$column-width: 60px;
$gutter-width: 20px;
$max-width: $columns * ($column-width + $gutter-width);
/*********************
Variables - Fonts
*********************/
$font-base: 15px;
$font-base-line-height: 24px;
@function calc-percent($target, $container) {
@return ($target / $container) * 100%;
}
@function em($target, $context: $font-base) {
@if $target == 0 { @return 0 }
@return $target / $context + 0em;
}
@function perc($width, $container-width: $max-width) {
@return percentage($width / $container-width);
}
@function lh($amount: 1, $context: $font-base) {
@return em($font-base-line-height * $amount, $context);
}
@mixin col($n, $padding: 0px, $border: 0px, $container-width: $max-width) {
float: left;
margin-right: percentage($gutter-width / $container-width);
width: percentage(($n * ($column-width + $gutter-width) - $gutter-width - ($padding * 2) - ($border * 2)) / $container-width);
border-width: $border;
padding: em($padding, $font-base) percentage($padding / $container-width);
position: relative;
display: inline;
}
.wrap {
@include col(10);
}
私は書いているときにこれに取り組んでいるので、助けていただければ幸いです-私が自分でそれを理解したら、答えを投稿します:)
そのため、コードの一部をコメントアウトしており、 (container-width: $max-width) {} を使用していることが問題の原因です。関数定義で変数の作成を設定するのは好きではありません...理由がわかりませんか?