Возникли проблемы с компиляцией Compass / Sass - я использую тему Bones Wordpress - PullRequest
Новая
       31

Возникли проблемы с компиляцией Compass / Sass - я использую тему Bones Wordpress

0 голосов
/ 22 февраля 2012

У меня проблемы с получением некоторых пользовательских функций Compass / Sass для правильной компиляции.Я продолжаю получать сообщения об ошибках: 

error library/scss/mixins.scss (Line 302: Invalid CSS after "...: $font-base) {": expected "}", was "   @if $targe...")

Я читал что-то на Stack Exchange о том, что @import возможно испортил это.

Вот моя функция: 

$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);
}

IЯ работаю над этим, так как пишу, поэтому любая помощь будет оценена - я опубликую ответ, если я сам это выясню:)

Так что я комментирую части кода и использую (контейнер-width: $ max-width) {} это то, что вызывает проблемы.Мне не нравится, что я задаю создание переменной в определении функции ... не знаю почему?

1 Ответ

1 голос
/ 23 февраля 2012

Ок, офигенно - я получил его на работу!

Полагаю, этот ответ поможет всем вам, разработчикам Compass / Sass Web, поэтому я решил немного углубиться.

Я пытаюсь создать адаптивный веб-сайт для устройств разного размера (iPhone по вертикали, iPhone по вертикали, iPad по вертикали, iPad по горизонтали и т. Д. В любом случае я разбил все свои таблицы стилей Sass на их размеры (481up, 768up и т. Д.).

Я пытался включить свою систему семантической сетки в мою таблицу стилей 768up, и она выдала мне ошибку "все функции должны быть определены на корневом уровне" . Это потому, что я импортировал таблицу стилей 768up в свой основной файл styles.scss, который ломается, когда вы используете @mixins и / или @functions в таблице стилей, которая импортируется сама. Та же проблема возникает, если вы пытаетесь включить @mixins в сам 768up, она ломается, потому что вы не можете определить @mixins в таблице стилей, которая будет импортирована.

Решение !!!

Включите семантическую сетку "grid.scss" в ваш style.scss, который вызывает все таблицы стилей разных размеров с помощью запросов @media (481up, 768up), и вы сможете использовать @mixins в этих отдельных таблицах стилей.

Кроме того, еще лучше то, что ни один из @mixins не занимает места в css, если вы на самом деле не используете их! Таким образом, в вашем файле grid.scss может быть 10 000 переменных, функций и миксинов, и они не будут раздувать вашу таблицу стилей, если вы их не используете.

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

Что ж, я надеюсь, что это полезно для некоторых разработчиков. Если нет, то я многому научился !!!

...