Navigate to SASS class instead of CSS from HTML in PhpStorm? - css

Is there any way to make JetBrains PhpStortm (v8) to navigate to the SASS file when I Ctrl+cilck on a CSS class/id in the HTML source, insted of the default (to the CSS file class/id) setting? It would be great, and I cant find a soloution. Thanks in advance!

It's not really supported:
https://youtrack.jetbrains.com/issue/WEB-6737
https://youtrack.jetbrains.com/issue/WEB-8190
Please star/vote/comment to get notified on progress.
Although I have to say that in LESS it's kind of works for simple classes/ids (not made from parts via & or multi-level ones): it asks to which declaration to go and offers me 2 files: file.css or file.less.

I found a half-solution!
If I link the scss file in the head, then I can select the SASS declaration. Yay! :D
<link href="/css/sass/main.scss">
Thats work for me.

For PhpStorm I solved this with:
In the project browser, right click on the .css file that you'd
like to ignore.
Go to "Override file type".
Select "Plain text".
Now when you command click a style it will navigate directly to the .scss file and NOT the .css file. The .css file will be read by the browser but ignored by PhpStorm.

Related

Css file doesn't affect after editing in SharePoint Online

I has a css file named styles.css and it was loaded in masterPage of sharepoint .I change this css file but not working. I make sure this css file already loaded in html page.I also clear cache but I don't know why it doesn't affect when I edit. Please help me, thank you so much!
It is not recommended to modify the online master page directly.
Firstly, you need to check if the CSS file is really imported.
Secondly,if the file is not imported, classic page you could upload CSS here.
modern page we should upload CSS with SPFX,here is a tutorial: https://github.com/hugoabernier/react-application-injectcss.
If the file is imported, first check whether the content of the file is displayed normally (excluding problems caused by encoding), then you can add ‘! Important’ after the style.

Css path of magento

I created custom theme and I overrided Magento_catalog and css of parent from folder Magento_catalog in blank theme. now I want to change some css code like gallery.I use firebug in chrome to find path and line css of gallery,but it shows me style.css in pub folder.how can I find exactly path of css??
thanks!
http://devdocs.magento.com/guides/v2.2/frontend-dev-guide/css-topics/css-overview.html
As far as I know, the fastest option to do this is to search for a style in .less files. Just keep in mind that less has a syntax, so most of the times, you can't search exactly same line as you see in firebug. Usually I search for some part of the style I see in DevTools.
You can also try the complex way and run a less compilation with sourcemap
Compile LESS files with source maps

PhpStorm: Nest or Group generated CSS files under source LESS file

Can PhpStorm hide generated CSS files under the LESS file?
Here is a screenshot of a WordPress theme:
I've found myself opening the .css file instead of the .less one on numerous occasions. Is there some way to group these files together so I never see the .css file? A bit like a closed folder, have to click the arrow to view generated file?
(I remember seeing a similar feature somewhere, not sure if it was in PhpStorm or another editor)
I did have LESS files in their own folder, but I still found myself opening the .css file from time to time by accident. It would be good to hide them completely.
Thanks!
Never mind, it seems to be (kinda?) working:
style.less nests style.css correctly, not sure why the others are not showing.
It is called File Nesting and it’s available from the gear icon in the Project browser.

How can I set the Eclipse JS to edit a file as CSS

I use the lesscss, it's works fine, but the Eclipse editor doesn't highlight the words, and the Zen Coding doesn't recognize that a css file. How can I open the .less file as a .css file?
Any help would be appreciated.
I found the solution: in the general menu -> content types option I can add a file association to the css content type.

MeegoTouch CSS Style Problem

I write a Meego App. But the CSS sytle not work normally. And I want to know how to get the CSS sytle works ? THX.
My Steps:
in .pro, add meegotouch lib
css file named style.css and I add a qrc file to reference the style.css
in Code, just load the css style.
MTheme::loadCSS(":/style/style.css");
at the first time, the style works, but it fail to change the style when I re-write some attributes in the CSS file.
And I have to re-name the css file(maybe style1.css) and re-add in the qrc file, it will get work.
Any solution or did I miss something??
It would help if you included more code.
The only thing that I can think of is the simple problem of not reloading the application (or at least re-running the method where you load the css file) after you change the css file.
But I still don't know what you're doing.

Resources