Блог

Я попытался выполнить их инструкцию Ruby on Rails для установки, но когда я включил @import ‘hamburgers’, он не знает, где искать файл. Итак, что я попытался сделать, это скопировать файлы из каталога ‘_sass / hamburgers’ из драгоценного камня ‘hamburgers’ в мой проект. файлы внутри каталога _sass / hamburgers, вставленные в папку «Мои таблицы стилей».

Даже после вставки файлов в папку таблицы стилей моего проекта по-прежнему появляется ошибка. Состояния ошибки

Ошибка: неопределенная переменная: «$ hamburger-padding-y». в строке 4:12 app /assets / stylesheets/_base.scss

padding: $hamburger-padding-y $hamburger-padding-x;

Если я правильно понимаю, _base.scss подключен к hamburgers.scss, поэтому проблем быть не должно. Надеюсь получить некоторую помощь !! :>

РЕДАКТИРОВАТЬ: вот мое приложение.scss

 /*
* This is a manifest file that'll be compiled into application.scss, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*= require_tree .
*= require_self
*/
@import "hamburgers";
  

Здесь также есть hamburgers.scss

 @charset "UTF-8";
/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */

// Settings
// ==================================================
$hamburger-padding-x           : 15px !defau<
$hamburger-padding-y           : 15px !defau<
$hamburger-layer-width         : 40px !defau<
$hamburger-layer-height        : 4px !defau<
$hamburger-layer-spacing       : 6px !defau<
$hamburger-layer-color         : #000 !defau<
$hamburger-layer-border-radius : 4px !defau<
$hamburger-hover-opacity       : 0.7 !defau<
$hamburger-active-layer-color  : $hamburger-layer-color !defau<
$hamburger-active-hover-opacity: $hamburger-hover-opacity !defau<

// To use CSS filters as the hover effect instead of opacity,
// set $hamburger-hover-use-filter as true and
// change the value of $hamburger-hover-filter accordingly.
$hamburger-hover-use-filter   : false !defau<
$hamburger-hover-filter       : opacity(50%) !defau<
$hamburger-active-hover-filter: $hamburger-hover-filter !defau<

// Types (Remove or comment out what you don’t need)
// ==================================================
$hamburger-types: (
 3dx,
 3dx-r,
 3dy,
 3dy-r,
 3dxy,
 3dxy-r,
 arrow,
 arrow-r,
 arrowalt,
 arrowalt-r,
 arrowturn,
 arrowturn-r,
 boring,
 collapse,
 collapse-r,
 elastic,
 elastic-r,
 emphatic,
 emphatic-r,
 minus,
 slider,
 slider-r,
 spin,
 spin-r,
 spring,
 spring-r,
 stand,
 stand-r,
 squeeze,
 vortex,
 vortex-r
) !defau<

// Base Hamburger (We need this)
// ==================================================
@import "base";

// Hamburger types
// ==================================================
@import "types/3dx";
@import "types/3dx-r";
@import "types/3dy";
@import "types/3dy-r";
@import "types/3dxy";
@import "types/3dxy-r";
@import "types/arrow";
@import "types/arrow-r";
@import "types/arrowalt";
@import "types/arrowalt-r";
@import "types/arrowturn";
@import "types/arrowturn-r";
@import "types/boring";
@import "types/collapse";
@import "types/collapse-r";
@import "types/elastic";
@import "types/elastic-r";
@import "types/emphatic";
@import "types/emphatic-r";
@import "types/minus";
@import "types/slider";
@import "types/slider-r";
@import "types/spin";
@import "types/spin-r";
@import "types/spring";
@import "types/spring-r";
@import "types/stand";
@import "types/stand-r";
@import "types/squeeze";
@import "types/vortex";
@import "types/vortex-r";

// ==================================================
// Cooking up additional types:
//
// The Sass for each hamburger type should be nested
// inside an @if directive to check whether or not
// it exists in $hamburger-types so only the CSS for
// included types are generated.
//
// e.g. hamburgers/types/_new-type.scss
//
// @if index($hamburger-types, new-type) {
//   .hamburger--new-type {
//     ...
//   }
// }
  

Согласно комментариям, OP запросил эту информацию, хотя она не отвечает на основной вопрос.

Не делайте ничего из «ruby on rails» из официальной документации.

Создайте app/assets/stylesheets/hamburgers.css и получите код отсюда (или просто скопируйте в файл). Это dist/hamburgers.css файл, упомянутый в документации.

В вашем представлении приложения (например, application.html.erb) в <head> ссылке put in the stylesheet: <%= stylesheet_link_tag "hamburgers" %>

Добавьте некоторую HTML-разметку (см. пример документации здесь). Кроме того, не забудьте поместить <script> код из примера (он в конце).

Когда я это сделал, я получил новый сайт rails, который работал точно так же, как у автора hamburger example.html работает.

Что касается того, почему вы получаете эту ошибку hamburger-padding-y, я не думаю, что вам нужно помещать файлы css И scss. Вероятно, предполагается, что установка yarn в сочетании с драгоценным камнем rails позаботится об этом, но я не смог воссоздать ошибку, потому что я не мог заставить сервер rails работать, если я установлю драгоценный камень (hamburgers, который разрешен до версии v1.1.3). Я использовал Ruby 2.6.2 / Rails 6.0.3.3

Результат: