Как увидеть SCSS файлы в Firefox или Chrome?

Аватар пользователя VasyOK

Всем лета!

Чтоб не захламлять соседнюю тему (http://drupal.ru/node/131103), создал эту.

Вот тема оформления с scss https://www.drupal.org/project/gratis
Тестовый сайт: http://test.u5154.ph.vps-private.net/

Как мне узнать что для правки цветов нужно править именно этот файл:
http://test.u5154.ph.vps-private.net/sites/all/themes/gratis/css-source/definitions/_vars.scss
?

Гугл меня упорно посылает сюда, но как я понимаю информация там устарела:
1) https://hacks.mozilla.org/2014/02/live-editing-sass-and-less-in-the-firefox-developer-tools/
Жму Show original sources (показывать оригинальные исходники) - не видно SCSS

2) https://www.dannycroft.co.uk/enabling-source-maps-in-chrome/
Ни Enable source maps ни Support for Sass так и не нашел :(

Тип материала:
Версия Drupal:
0 Спасибо

Комментарии

Аватар пользователя sas@drupal.org
sas@drupal.org 2 месяца назад

Да не как, если принудительно не включить комменты для препроцесса scss, но это же пухлость.

0 Спасибо
Аватар пользователя VasyOK
VasyOK 2 месяца назад

Должен быть какой нибудь "как" или с этим решительно невозможно работать.

"Включить комменты для препроцесса scss" - это как?
Это тут задается(?):

{
"version": 3,
"mappings": ";;;;AACE,.../*Тут много всего*/
"
sources": ["../../node_modules/node-neat/assets/stylesheets/grid/_box-sizing.scss","../../node_modules/node-bourbon/assets/stylesheets/addons/_prefixer.scss","color-palettes/_color-palettes.scss","definitions/_vars.scss","definitions/_mixins.scss","../../node_modules/node-neat/assets/stylesheets/grid/_media.scss"],
"
names": [],
"
file": "color-palettes.css"
}

Файл color-palettes.css.map

0 Спасибо
Аватар пользователя BatKor
BatKor 2 месяца назад

Не знаю почему у ТС не показывает, с бубном, не прыгал, у меня все через

//custom
@import "correct";
@import "vars";
@import "header";

as

0 Спасибо
Аватар пользователя gun_dose
gun_dose 2 месяца назад

С соурсмапами не вышло?))

0 Спасибо
Аватар пользователя BatKor
BatKor 2 месяца назад

Кстати да демо сайте не показывает у меня. Нее это не из-за мепа. Что то банальное, которое упустили из виду.

0 Спасибо
Аватар пользователя VasyOK
VasyOK 2 месяца назад

gun_dose, по вопросам соурсмапов меня и кинуло на ссылки выше.

BatKor, тему не я делал, просто с орга скачал как пример. Ок можешь свой сайт с на котором ты не упустил ничего из вида показать, где scss файлы видны.

Блин, чувствую глупости пишу...

0 Спасибо
Аватар пользователя Mihail.space
Mihail.space 2 месяца назад

дык стили, которые подключены в info ты увидишь, а остальные нет.
scss файлы в теме оставлены для разрабов, чтобы писали стили в них и компилили в css или сразу писалив css, игнорируя scss.
Есть правда варианты компиляции на лету с помощью модулей на семерке, но эту тему ужо не помню. давно это не использую.

0 Спасибо
Аватар пользователя VasyOK
VasyOK 2 месяца назад

Т.е. нет смысла редактировать SCSS файл ?
А как тогда из SCSS получаются CSS? Можно ссылку дать.

Но вроде когда настройки многих тем с темплейт монстра редактируешь, CSS файлы заново генерятся. Подозреваю изза препроцессора.

0 Спасибо
Аватар пользователя Studio VIZA
Studio VIZA 2 месяца назад
VasyOK написал:
Блин, чувствую глупости пишу...

Норм, просто они все умные слишком.

0 Спасибо
Аватар пользователя BatKor
BatKor 2 месяца назад

Кстати в конце main.css
вотчер добавляет вот такой вот коммент

/*# sourceMappingURL=data:application/json;base64,ewoJInZlcnNpb24iOiAzLAoJI и т.д.

as

0 Спасибо
Аватар пользователя VasyOK
VasyOK 2 месяца назад

Значит для того, чтобы получить из SCSS файлы CSS, нужно их компилировать (?).
Это можно в каком-то PHPStorm и модулями Drupal. Может через Compass лучше? А через ssh можно прям на сервере? Или это из другой оперы...
А как лучше?

"вотчер добавляет вот такой вот коммент" и ?

А это эээ... что?:
https://www.google.com.ua/search?q=asd&ie=utf-8&oe=utf-8&gws_rd=cr&ei=LcNjWYLmL8XA6ASJ06PYCw#safe=off&q=as+asd+as

0 Спасибо
Аватар пользователя Mihail.space
Mihail.space 2 месяца назад
VasyOK написал:
Значит для того, чтобы получить из SCSS файлы CSS, нужно их компилировать (?).

Это можно в каком-то PHPStorm и модулями Drupal. Может через Compass лучше? А через ssh можно прям на сервере? Или это из другой оперы...

А как лучше?
"вотчер добавляет вот такой вот коммент" и ?
А это эээ... что?:

https://www.google.com.ua/search?q=asd&ie=utf-8&oe=utf-8&gws_rd=cr&ei=LcNjWYLmL8XA6ASJ06PYCw#safe=off&q=as+asd+as

Семерочный модуль вроде только less компилил на лету.
Можно просто гальпом компилить. Натравливаешь его на директорию с темой и все.
Можно через ssh, но тогда гальп на сервак надо ставить, хотя х.з, могу наврать так как на локалке этим занимаюсь.

0 Спасибо
Аватар пользователя gun_dose
gun_dose 2 месяца назад

А можно подключить в тему less.js и пусть оно прямо в браузере компилится.

А вообще, очень странный топик.

0 Спасибо
Аватар пользователя VasyOK
VasyOK 2 месяца назад

Поставим вопрос по другому. К примеру есть набор scss + css + html файлов. И из всего этого нужно делать тему для Drupal. Можно ли забить на наличие scss файлов и лепить как будто их нет?

0 Спасибо
Аватар пользователя gun_dose
gun_dose 2 месяца назад

Конечно можно. Но это глупо.

0 Спасибо
Аватар пользователя bumble
bumble 2 месяца назад

Так делать - нельзя!!! Если тема с сорцами - нужно использовать их!

Очень весело, я недавно наблюдал такую картину:

Дали на доработку темку, там сорцы, я их скомпиллил - и нафиг часть стилей слетела ))))
Оказывается эти "умники" лепили все свои "наработки" в скомпилированные стили, которые были благополучно перезаписаны при первом же старте gulp'а.

Но это не самое веселое! Самым веселым была просьба не делать минифицированные стили, а делать их так "чтоб читать было удобно".

0 Спасибо
Аватар пользователя VasyOK
VasyOK 2 месяца назад

Речь веду не о доработке темы оформления, а о наборе файлов, из которых нужно сделать тему.

Т.е. если после компиляции CSS файлы становятся "не такими", на SCSS можно забить?

0 Спасибо
Аватар пользователя Mihail.space
Mihail.space 2 месяца назад

Освоить gulp и sass час- два делов на том уровне, чтобы можно было спокойно писать стили. Еще пол-часика на переменные и миксины, если будут нужны. Мануалов- тьма ))
Перезапишет компиляция файлы css или нет зависит от того по какому пути gulp будет компилить, который ты укажешь в gulpfile.js . Можешь компилить во все файлы с расширением css, а можешь в конкретный файл.
Обычно создают несколько scss файлов под каждую требу для удобства, чтобы не скролить простыни стилей: layout.scss, colors.scss, views.scss, block.scss, form.scss и т.д. и импортят их в один style.scss из которого все компилится в один css файл, который сервер в итоге и отдаст браузеру.

0 Спасибо
Аватар пользователя sas@drupal.org
sas@drupal.org 2 месяца назад

Скоро на препроцессоры можно будет забить, и первые ласточки такие как css flexbox и css grid уже прилетели и гадят :)

0 Спасибо
Аватар пользователя bumble
bumble 2 месяца назад 2

Странное мнение...
А чем флексы/гриды наезжают на препроцессоры? И почему "гадят"?

Аватар пользователя gun_dose
gun_dose 2 месяца назад

В четвёртом бутстрапе сетка на флексах построена, а сам он на scss. Одно к другому вообще никаким боком.

0 Спасибо