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

Пнд, 10/07/2017 - 12:27

Всем лета!

Чтоб не захламлять соседнюю тему (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 так и не нашел :(

0 Спасибо

Комментарии

Аватар пользователя sas@drupal.org
2 недели 1 день назад sas@drupal.org #

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

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

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

"Включить комменты для препроцесса 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
2 недели 1 день назад BatKor #

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

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

as

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

as

0 Спасибо
Аватар пользователя VasyOK
2 недели 1 день назад 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

0 Спасибо
Аватар пользователя Mihail.space
2 недели 1 день назад Mihail.space #
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
2 недели 20 часов назад gun_dose #

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Освоить 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
2 недели 6 часов назад sas@drupal.org #

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

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

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

2 Спасибо
Аватар пользователя gun_dose
2 недели 4 часа назад gun_dose #

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

0 Спасибо