Изменения контрольной точки Zurb Foundation не вступают в силу - PullRequest
Новая
       36

Изменения контрольной точки Zurb Foundation не вступают в силу

0 голосов
/ 07 июля 2019

Я работаю с Zurb Foundation 6 для сайтов в Intellij в системе Ubuntu с собственным компилятором sassc и пытаюсь изменить точки останова Foundation.Вся прочитанная мною документация показывает, что это так же просто, как просто изменить значение точек останова в файле настроек.

К сожалению, когда я это делаю, мои изменения не действуют.Я надеюсь, что кто-то может показать мне, что я делаю неправильно.

Я искал в Интернете и ничего не нашел в поиске и устранении неисправностей при изменении точек останова, поэтому я ожидаю, что это просто офигительно, и я где-то допускаю тривиальную ошибку.

Я попробовал оба: 1) Загрузите файл foundation.css и используйте его непосредственно в HTML.Временное комментирование включения таблицы стилей приводит к тому, что Foundation не работает.2) Включите foundation.scss в мой файл styles.scss и раскомментируйте строку вызова для файла настроек в файле foundation.scss.

Полученный файл CSS: 

/**
 * Foundation for Sites by ZURB
 * Version 6.5.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
body {
  background-color: orange; }

.yellow {
  background-color: yellow; }

.red {
  background-color: red; }

Я изменяю точки останова в файле _settings на: 

$breakpoints: (
  small: 0,
  medium: 640px,
  large: 1024px,
  xlarge: 1300px,
  xxlarge: 1440px,
);

Мой HTML-файл настолько прост, насколько он выглядит: 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <link rel="stylesheet" href="foundation.css">
    <link rel="stylesheet" href="styles.css">

    <script src="https://code.jquery.com/jquery.js"></script>

</head>
<body>

<div class="grid-x">
    <div class="cell small-6 medium-6 large-6 red">
        this is a div
    </div>
    <div class="cell small-6 medium-6 large-6 show-for-large-only yellow">
        this is a div
    </div>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/what-input/5.2.1/what-input.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.3/js/foundation.js"></script>

<script>
    $(document).ready(function()
    {
        $(document).foundation();
    });

</script>
</body>
</html>

Мой файл SCSS также очень прост 

@import "./scss/foundation.scss";

body {
  background-color: orange;
}

.yellow {

  background-color: yellow;
}

.red {
  background-color: red;
}

Я считаю, что компиляция в CSS работает, потому что CSS-файл создан, а HTML-файл отображается с элементами div.Я считаю, что компиляция файла Foundation SCSS не работает, потому что я получаю только заголовок, когда я включаю файл.

Я ожидаю, что желтый div исчезнет между 1024px и 1300px, но это такне.Он исчезает между 1024px и 1200px, окном по умолчанию для "большой" точки останова.

Идеи, где я могу найти основную причину моей ошибки, очень ценятся.

...