razzaline/tahoma2d
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity

Instructions on how to compile Stylesheet qss files on Linux

Browse source
This commit is contained in:
Konstantin Dmitriev 2020-01-25 15:12:40 +07:00
parent c234099d39
commit 360dd04660
1 changed files with 30 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
doc/how_to_stylesheet.md
View file

@ -4,6 +4,8 @@ Stylesheets are written with [LESS](http://lesscss.org/), which is a dynamic pre
ℹ️ [LESS Functions](http://lesscss.org/functions/) ℹ️ [LESS Functions](http://lesscss.org/functions/)
## Recommended Setup ## Recommended Setup
### Windows
Although any LESS compiler will work fine, here is a recommended setup. Although any LESS compiler will work fine, here is a recommended setup.
- Install [Visual Studio Code](https://code.visualstudio.com/) by Microsoft. - Install [Visual Studio Code](https://code.visualstudio.com/) by Microsoft.
@ -20,9 +22,27 @@ A `settings.json` file is already included to ensure developers work to the same
"out": false "out": false
} }
``` ```
ℹ️ [How to Change Settings in Visual Studio Code](https://code.visualstudio.com/docs/getstarted/settings). ℹ️ [How to Change Settings in Visual Studio Code](https://code.visualstudio.com/docs/getstarted/settings).
### Linux
On Linux you will need a command-line compiler `lessc`.
Ubuntu:
$ apt install node-less
Fedora:
$ dnf install nodejs-less
## How To Compile ## How To Compile
### Windows
Easy LESS uses a compile on save feature, so the theme files must be saved to generate an output. Easy LESS uses a compile on save feature, so the theme files must be saved to generate an output.
``` ```
@ -32,6 +52,15 @@ themes/Dark.less
themes/Light.less themes/Light.less
``` ```
### Linux
From opentoonz source directory root execute the following commands:
```
$ lessc -x stuff/config/qss/Default/less/Default.less stuff/config/qss/Default/Default.qss
$ lessc -x stuff/config/qss/Default/less/themes/Blue.less stuff/config/qss/Blue/Blue.qss
$ lessc -x stuff/config/qss/Default/less/themes/Dark.less stuff/config/qss/Dark/Dark.qss
$ lessc -x stuff/config/qss/Default/less/themes/Light.less stuff/config/qss/Light/Light.qss
```
## How They Work ## How They Work
The stylesheets are designed into a component, wire-frame and palette structure similar to web design that exploits the cascade of the LESS language to generate multiple theme colors from a single layout. This method was used to prevent duplication. The stylesheets are designed into a component, wire-frame and palette structure similar to web design that exploits the cascade of the LESS language to generate multiple theme colors from a single layout. This method was used to prevent duplication.