Jump to content
markus_ja

CSS Preprocessor

Recommended Posts

Hello,

 

it would be of great benefit having a CSS preprocessor instead of working with pure CSS. Where I can define some variables, e.g. color, corner radius, border style, ... and can reuse it. without searching and replacing every line.

Like LESS or SASS.

 

In my case, I am not an designer. For developing I just use some simple css styles, in order it works. But later I would like to finetune my appearance, in order it looks more prefessional. So, when I always have to find replace all my values, it would take ages and is very error prone, because sometimes a special setting should not be replaced.

 

It's like working with constants in code, instead of hardcoded values. Otherwise, maintaing would become a nightmare.

Share this post


Link to post
Share on other sites

Currently there is already a CSS preprocessor built into Smart Mobile Studio. It is based on DWScript and it is partially already used. Have a look at the Android-Holo.css file for a basic example.

 

If you like you can script the entire CSS file in DWScript's Object Pascal. To start writing code in Pascal just add

<?pas
...
?>
 

and replace '...' with any Pascal code.

 

If you write something like

<?pas=...?>;
it is automatically translated to 

<?pas 
PrintLn(...)
?>
again where '...' is your code.

 

So for example you can write something like this:

<?pas
const colBackground = $BADF00D
?>

html, body {
    background-color: <?pas=colBackground?>;
}

.TW3Form {
    background: <?pas=colBackground?>;
}
With this code you can use the same background color in two different spots.

Share this post


Link to post
Share on other sites

My question is not about CSS but about default.html (project template html file).

PreProcessor here supports few keywords, like Project.Title, I'm wondering how to access HomePage url specified for project or other fields or settings that are configurable for the project, is there a list of all allowed builtIn keywords that can be used in template script?

Share this post


Link to post
Share on other sites

Currently there is no such list. It would be indeed nice to have one. Also template interface is far from being complete. It would be nice to have it completed.

 

What has been done is that the templates can also be used for Node.js projects. Only with this it's possible to write Node.js command-line scripts.

 

From what I can see it only supports 'Title', 'Options', 'MetaData' and 'Version' at the moment. The 'MetaData' object contains a fields for 'Author', 'Company', 'Description', 'Keyword', 'Notes' and 'URL'. The latter should give you the HomePage url.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×