Как подключить SCSS к WordPress?
Подскажите, как сделать, чтобы код заработал?
Стили лежат тут, SCSS.
Пробовал через плагин WP-SCSS
Надо чтобы кнопка так работала
.button { min-width: 300px; min-height: 60px; font-family: 'Nunito', sans-serif; font-size: 22px; text-transform: uppercase; letter-spacing: 1.3px; font-weight: 700; color: #313133; background: #4FD1C5; background: linear-gradient(90deg, rgba(129,230,217,1) 0%, rgba(79,209,197,1) 100%); border: none; border-radius: 1000px; box-shadow: 12px 12px 24px rgba(79,209,197,.64); transition: all 0.3s ease-in-out 0s; cursor: pointer; outline: none; position: relative; padding: 10px; } button::before { content: ''; border-radius: 1000px; min-width: calc(300px + 12px); min-height: calc(60px + 12px); border: 6px solid #00FFCB; box-shadow: 0 0 60px rgba(0,255,203,.64); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: all .3s ease-in-out 0s; } .button:hover, .button:focus { color: #313133; transform: translateY(-6px); } button:hover::before, button:focus::before { opacity: 1; } button::after { content: ''; width: 30px; height: 30px; border-radius: 100%; border: 6px solid #00FFCB; position: absolute; z-index: -1; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: ring 1.5s infinite; } button:hover::after, button:focus::after { animation: none; display: none; } @keyframes ring { 0% { width: 30px; height: 30px; opacity: 1; } 100% { width: 300px; height: 300px; opacity: 0; } } |
.button { min-width: 300px; min-height: 60px; font-family: 'Nunito', sans-serif; font-size: 22px; text-transform: uppercase; letter-spacing: 1.3px; font-weight: 700; color: #313133; background: #4FD1C5; background: linear-gradient(90deg, rgba(129,230,217,1) 0%, rgba(79,209,197,1) 100%); border: none; border-radius: 1000px; box-shadow: 12px 12px 24px rgba(79,209,197,.64); transition: all 0.3s ease-in-out 0s; cursor: pointer; outline: none; position: relative; padding: 10px; } button::before { content: ''; border-radius: 1000px; min-width: calc(300px + 12px); min-height: calc(60px + 12px); border: 6px solid #00FFCB; box-shadow: 0 0 60px rgba(0,255,203,.64); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: all .3s ease-in-out 0s; } .button:hover, .button:focus { color: #313133; transform: translateY(-6px); } button:hover::before, button:focus::before { opacity: 1; } button::after { content: ''; width: 30px; height: 30px; border-radius: 100%; border: 6px solid #00FFCB; position: absolute; z-index: -1; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: ring 1.5s infinite; } button:hover::after, button:focus::after { animation: none; display: none; } @keyframes ring { 0% { width: 30px; height: 30px; opacity: 1; } 100% { width: 300px; height: 300px; opacity: 0; } }
Дополнительно:
Я не вижу в вашем коде нужды в препроцессоре. В чем она?
@keyframes ring { 0% { width: 30px; height: 30px; opacity: 1; } 100% { width: 300px; height: 300px; opacity: 0; } } |
@keyframes ring { 0% { width: 30px; height: 30px; opacity: 1; } 100% { width: 300px; height: 300px; opacity: 0; } }
да, работает.
Да, я про это и говорю, что это обычный css код и подключать его можно соответственно.
Из-за чего тогда может не работать на WordPress?
Я не вижу и не знаю. Смотрите через инспектор.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
SCSS браузер напрямую не понимает. Его нужно сначала скомпилировать в обычный CSS, а уже CSS подключить в WordPress. Плагин WP-SCSS может это делать на лету, но для нормальной разработки лучше использовать сборщик: Sass, Vite, webpack, gulp или npm-скрипт.
Минимальный вариант через Sass:
npm install sass --save-dev
В
package.json:{ "scripts": { "scss": "sass assets/scss/main.scss assets/css/main.css --style=compressed", "watch": "sass assets/scss/main.scss assets/css/main.css --watch" } }{ "scripts": { "scss": "sass assets/scss/main.scss assets/css/main.css --style=compressed", "watch": "sass assets/scss/main.scss assets/css/main.css --watch" } }
В WordPress подключаете уже готовый CSS:
add_action('wp_enqueue_scripts', function () { wp_enqueue_style( 'theme-main', get_stylesheet_directory_uri() . '/assets/css/main.css', [], filemtime(get_stylesheet_directory() . '/assets/css/main.css') ); });
Если нужно быстро проверить одну кнопку, можно вставить скомпилированный CSS в «Дополнительные стили» темы. Но SCSS-синтаксис туда вставлять нельзя: вложенность, переменные и миксины не заработают.
Для вашего примера с кнопкой ещё проверьте селектор: если в HTML элемент имеет класс
button, стили пишутся для.button. Если это тег<button>, можно использоватьbutton, но он применится ко всем кнопкам. В WordPress лучше задавать свой класс, например.custom-glow-button, чтобы не сломать кнопки форм, корзины и админ-бара.Плагин WP-SCSS можно использовать как временное решение, но на продакшене лучше не компилировать SCSS при каждом изменении/запросе средствами WordPress. Скомпилированный CSS должен попадать в репозиторий или на сервер уже готовым файлом. Так меньше риска получить белый экран из-за ошибки SCSS или прав на запись в папку.