Is it possible to write full css line with LESSCSS using variables? - html

is there a way that you can write a full CSS line using a LESS variable?
For example, if I declare a variable:
#dir: test;
and then want that variable to be used within another variable:
#bg-img: url(http://example.com/#dir/img/bg.png;
When I try to use #bg-img in my CSS, it compiles like this:
body{background-image:url(http://example.com/#dir/img/bg.png);
How do I get #dir to echo out as test?
I know that I can just replace #dir but since I have various different microsites, it'll be quicker to change the one instance of #dir rather than go through and change every instance of the microsite name.

This is possible by interpolation, but not certain if this would work in your particular situation without seeing more code. However, give this a try:
body{background-image:url(http://example.com/#{dir}/img/bg.png);
Found it in the docs, down the page under String interpolation. Hope this helps.
EDIT: and escape, just as #Rob W mentions in the comments. Also in the doc, just below interpolation.

Related

How to build complex vs code snippet variable transforms?

I'm trying to write a code snippet for vs code that takes a given file name, removes a piece of the name and capitalizes the first letter. For example
Input:
example.model.js
Output:
Example
Output im getting:
${TM_FILENAME_BASE/(.*).[model]+$//capitalize//}
I'm able to remove the trailing half of the file name with the following string
"${TM_FILENAME_BASE/(.*)\\.[model]+$/$1/}"
I tried to take this a step further with the following but it doesn't seem to work.
"${TM_FILENAME_BASE/(.*)\\.[model]+$/${1:/capitalize/}/}"
Based on the documentation i'm not sure where I'm going wrong.
https://code.visualstudio.com/docs/editor/userdefinedsnippets#_transform-examples
Any ideas on what I'm missing here? Also are there any tools that could help build these kinds of complex expressions?
Thanks
It looks like i was writing the grammer incorrect adding a trailing slash / the correct way is below
${TM_FILENAME_BASE/(.).\.[model]+$/${1:/capitalize}/};"
With this regex (.*)\\.[model]+$, (.*) captures the whole word.
For eg, it will capture example in example.model.js and thus, capitalize it as EXAMPLE
You need to capture only the first character like so:
"${TM_FILENAME_BASE/(.).*\\.[model]+$/${1:/capitalize/}/}"

PhpStorm generate template from code selection

I frequently use PhpStorm's Extract variable & method refactorings. Is there a way to add/extend functionality that could create a new template file from the selected code, prompt for desired template path, and create an include/require statement for that template?
I'm asking either for an entry point into coding this functionality, or extending existing functionality. Or maybe it's already available and I missed it.
As #Ástþór mentioned, there is no such way to change the refactoring templates.
You can use surround with live templates to emulate this behavior. This will not find duplicates and will not replace them as well, but may be it's close enough what you want.
Add a surround live template like this one. Open the editor with Ctrl+Alt+S:
Edit the variables in order to get a nicer UX:
Select the variable you want to extract and select Code > Surround with Live Templates from the menu or press Ctrl+Alt+J.
Adjust the templates to your needs.
Live template variables
HTH
No, there isn't. You can ask this question at https://intellij-support.jetbrains.com/hc/en-us/community/topics/200366979-IntelliJ-IDEA-Open-API-and-Plugin-Development
Other useful sources: https://www.jetbrains.org/intellij/sdk/docs/basics/getting_started.html & https://confluence.jetbrains.com/display/PhpStorm/Setting-up+environment+for+PhpStorm+plugin+development

How can I use simple HTML output in a perl script?

I am working on an assignment where I must use an HTML font tag to change the font color of an perl output statement. I've followed the direction in the assignment, and this is what the code looks like:
print $FILE2 "<font color = 'red'> var1 </font>";
$FILE2 is the filehandle for the file I am writing to. Var1, Var1 is a test variables.
However, there is no color change and the syntax above is printed exactly like that to the screen. I'm not really sure what I am doing, wrong, can somebody please help me?
I have not included any headers other than strict and warnings.
Variables in Perl are always indicated by sigils. In this case you are dealing with scalars (single value container), and the sigil for a scalar variable is $. This sigil is also what allows it to be interpolated (replaced with its value) in a double-quoted string like you have. See perldata for more info.
As a side note, interpolating variables directly into HTML can be dangerous because they can contain HTML tags. If you want to avoid the possibility of the input adding tags of its own, pass the input through an HTML-escaper like encode_entities from HTML::Entities or xml_escape from Mojo::Util first. The usual way to construct HTML like this is with templates, and templating modules often provide such functionality built in.

Set variable using HTML form - then compile

Let's use a classing example: in a file, let's call it _example.scss, I have the following variables:
$color1
$color2
I was wondering if it is possible to create an html-form or some html-gui from which I can change (or set) the value assigned to those variables in that file?
Like using a color picker which will set those variables to a given value.
the short answer is no, scss is a pre-processor. both server(back-end) and browser(front-end) don't read scss at all.
so what you can do is use javascript/jquery to manipulate the value.
var style = $('input').value();
$('div').css({'color': style });
You can use a Sass parser in JavaScript which offers a API running a Web Worker. sass.js is a js library that offers these bindings.
Generally I wouldn't consider this good practice although do not have knowledge or you use case.

How to create "variables" for later search and replace (sort of like a merge-field in HTML

I use a lot (20 or so) of what FrontPage 2003 (don't laugh!) calls "Site Parameters", which are essentially variables. I use them for the Number of Products, Phone Hours, etc.
I'm upgrading to Expression Web, which does not support changing or adding those Parameters. Also, I'd like to create Variables for our Breadcrumbs trail. (So a product page might have breadcrumbs: Products> This Product> Screenshot.
So if we ever decide to rename Products I want to easily be able to replace it.
What I do not want to do:
Replace the value when the page is served up. That slows things down a bit and forces all pages to be .aspx, etc. I want to stick with plain html.
Replace the value using Javascript (same reason, and a tiny % of brrowsers don't have .js enabled).
I was thinking:
we have <variable.products_count>20</variable.products_count>
But..... it's easy to get another tag and text in there, as happens in this example:
<variable.products_count> we have <strong>20</strong> </variable.products_count>
Now when I replace, I'm replacing the tags and "we have" as well.
What I do not want to do: Replace the value when the page is served up. That slows things down a bit and forces all pages to be .aspx, etc. I want to stick with plain html.
Technically you are correct; there will probably be a performance hit by using an executed versus static page. But the overhead of inserting a few dynamic values is so trivial that it shouldn't even factor into the decision making process.
At it's simplest:
HTML
<body>
<div>Good old HTML</div>
<div>A dynamic value: <%= SiteParameters.Foo %></div>
</body>
c# (or VB.Net, or whatever you prefer)
public static class SiteParameters
{
// This value could be pulled from a config file, a database, etc.
public static readonly string Foo = "Hello World";
}
Your example with the we have problem can be easily re-written to fix the problem:
<variable.products_count> we have <strong>20</strong> </variable.products_count>
to:
we have <strong><variable.products_count></variable.products_count></strong>
Of course, I think the easier approach is to step slightly outside of HTML syntax and pick variable names that are unlikely to occur in your documentation:
we have <strong>##PRODUCTS_COUNT##</strong> ...
When you have several of these you can replace them all with one pass of a simple text-replacement tool such as sed(1):
sed -e 's/##PRODUCTS_COUNT##/20/g'
-e 's/##PRODUCTS##/Products/g'
-e 's/##SCREENSHOTS##/Screen Shots/g' < inputfile > output.html
To automate over many files, you'd probably want to write a little script:
s/##PRODUCTS_COUNT##/20/g;
s/##PRODUCTS##/Products/g;
s/##SCREENSHOTS##/Screen Shots/g;
and run it on all your files:
for f in pre/*.html ; do sed -f /path/to/script < "$f" > "${f/pre/post}" ; done
(The ${f/pre/post} replaces the pre with post; your post-processed files would be in the post/ directory.)