Jump to content


Photo

CSS Preprocessor


  • Please log in to reply
5 replies to this topic

#1 markus_ja

markus_ja
  • Members
  • 319 posts
  • LocationAustria

Posted 08 March 2016 - 12:06 PM

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.



#2 Christian-W. Budde

Christian-W. Budde
  • Administrators
  • 334 posts
  • LocationGermany

Posted 08 March 2016 - 02:03 PM

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.

#3 markus_ja

markus_ja
  • Members
  • 319 posts
  • LocationAustria

Posted 08 March 2016 - 03:25 PM

Brilliant! That is, what I was looking for :)



#4 Igor Savkic

Igor Savkic
  • Members
  • 135 posts

Posted 09 March 2016 - 12:09 AM

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?



#5 Christian-W. Budde

Christian-W. Budde
  • Administrators
  • 334 posts
  • LocationGermany

Posted 09 March 2016 - 12:28 AM

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.

#6 Igor Savkic

Igor Savkic
  • Members
  • 135 posts

Posted 09 March 2016 - 12:41 AM

Thanks, it works OK.

As a suggestion for future improvements, it would be great to have several platforms/configurations like, Debug, Release each with independent settings for these Project options fields.






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

IPB Skin By Virteq