How to edit a sass file in Ubuntu 16.04 - css

I have a package which uses sass files for Unity DE theme. It's a GTK theme and I want to change the colour of the theme. The owner says I will have to edit a sass file. And also warns not to edit them directly ? Am I correct to understand that first I have to convert it to CSS, edit it and then convert back to sass ? Kindly guide me. Thanks.

Nope. There is no need to convert sass to css and edit it and convert it back.
Sass is a text file, so you can edit it with any text editor like gedit, emacs, nano , sublime text or etc.
I have no idea your framework want to do with that sass file, but i think there is no need to convert it to css manually.
If you have no idea about how sass structure it is you can view this.

Related

Brackets SCSS file to CSS file

When I was studying Multimedia I got a free copy of PhpStorm.
Using PhpStorm I managed to some techincal magic using Ruby(I can't exactly remember how it worked) to write code in SCSS and phpstorm would automatically create a new file and compile all my code to usable CSS code.
I believe I remember something about a 'filewatcher' but im not sure.
Is there any way to do the same in Brackets?
maybe an addon to Brackets or something?
Thanks
I think you're talking about compilers that translate SCSS into CSS (and their integration in PhpStorm).
So maybe you will be interested in Brackets-SASS Plugin.

How to alter CSS files inside aikau-1.0.101.10.jar in Alfresco

I was working on translating Alfresco share to Arabic i.e to RTL format.
Reading a comment from here I found out that the best way to proceed is to Create a custom extension pulling in an additional CSS file with the styling modifications.
Now coming to the question, I've encountered a problem while altering the css files to support RTL. The problem was that some css files were situated inside aikau-1.0.101.10.jar file. Can anyone help me on how to alter these css files ? or Can I override these files somehow ?
Some ways to do this:
You can create your own theme
Override LESS variable link
Fork Aikau and build your own jar link
Create an extension to include your own css file link

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

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.

Why ubuntu's Ambiance GTK3 theme has a settings.ini file that embeds CSS?

Reading about how theming works in GTK3 via CSS I've started to play with my default theme in Ubuntu 13.04, which is called Ambiance. Its source is in /usr/share/themes/Ambiance/gtk-3.0/.
Now the interesting thing is, I tried to change a colour in the file gtk-main.css under this directory (inside a #define-color statement), and to my surprise the change didn't take effect even after rebooting the computer.
Later, I found out that there is a settings.ini file (in the same folder) with this contents:
[Settings]
gtk-color-scheme = "base_color:#ffffff\nbg_color:#f2f1f0\ntooltip_bg_color:#000000\nselected_bg_color:#ffffff\ntext_color:#3C3C3C\nfg_color:#4c4c4c\ntooltip_fg_color:#ffffff\nselected_fg_color:#ffffff\nlink_color:#DD4814\nbg_color_dark:#3c3b37\nfg_color_dark:#dfdbd2"
gtk-auto-mnemonics = 1
WTF, so the contents of gtk-main.css are embedded there in the settings.ini file inside the variable gtk-color-scheme. Changing this variable does change the colour in my current Gtk theme.
So then I have some questions about this:
Why this redundancy? (They could have removed the file gtk-main.css to avoid confusions.)
Is this a ubuntu-specific hack? If not, then where is this documented? I didn't find any info about this in the Gnome website.
What's the purpose of this?
Apparently this is a way to override #define-color rules, as mentioned here, and later explained here.
Short and concise: You would alter the theme.
How would you revert to the original values, when you would have edited those?
You could not, but if your alteration goes into the .ini, it can be reset to the values of the .css file with this very .css file.

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.

Resources