Using Variables


#1

@jessegrosjean The section on variables in the manual does not really answer my question which is, can I create a variable on my own, or am I limited to only altering variables which are already in the TP3 code?

When I last got a crash I was trying to do this. I was trying to set my colors to variables and then adjust those colors in light or dark vales for use with darker or lighter backgrounds. I realize I made one or more errors in logic and that is why I am trying to read up on this matter. This is what I was trying …

// set a variable to a color so that I could later use this variable in the script
@DarkRed: rgb(164, 0, 5);

// use that variable in a theme to lighten that value for use in a darker background
@fadeDarkRed-color: mix(@DarkRed, white, 50%);

// or,
@fadeDarkRed-color: mix(rgb(164, 0, 5), white, 50%);

// the way it is now (that works):
// Colors the text preceding the tag “@taskA” red.
item[data-taskA] {
color: rgb(164, 0, 5);
}

// the way I thought I could get it to work:
// Colors the text preceding the tag “@taskA” red.
item[data-taskA] {
color: rgb(164, 0, 5);
}

As it happens, putting in “@DarkRed: rgb(164, 0, 5)” will crash the program.


#2

Yes! I’m not quite sure where the error is in you stylesheet, but try this example that declare a variable and then uses it:

@DarkRed: rgb(164, 0, 5);
item[data-taskA] {
  color: @DarkRed;
}

#3

Would that work in a mix?
@fadeDarkRed-color: mix(@DarkRed, white, 50%);


#4

I think so… this is all part of and defined by http://lesscss.org. I’m just using that library, so I’m not an expert on every last detail. I think the only difference between what you’ll see in there documentation and what you’ll experience in TaskPaper is that the styled elements and attribute names are different in TaskPaper then in HTML/DOM. But the less rules/functions and formatting should all be same as documented there.