So I'm trying to make it so the I get all the text out of a css class.
For instance,
h1 {
font-weight: bold;
}
I need to get a string which will contain "font-weight: bold;"
I also need to make sure this doesn't get mixed up with other classes. Basically imagine that was in the middle of a huge css file. How would I get just that class.
(it is ok to ignore things such as h1.blah or variations of h1.)
This would be the RegEx to grab anything inside of a standard h1 declaration. It takes into account spacing and so forth. You probably want more finely-tuned results, but the question lacks the specificity necessary to address the problem further.
/h1\s*{(.+?)}/m
Related
I am currently working on a Java project, and I am finding IntelliJ Idea's code style system to be extreamly frustrating as it refuses to accept the settings that I want to give it. Specifically, I want spaces around various operators unless they're inside a for loop's header. For example, the following code should be output:
for(int x=0;x<10;++x){ // no spaces around operators when they're in a for loop's header
System.out.println(x);
}
int a = 10; //spaces around = when not in a for loop's header
int b = 50;
a = b;
if(a < b){ //an if statement is not a for loop's header
doSomething();
}
In essence, I want IntelliJ to make an exception to normal space rules when in the header of a for loop, removing these spaces. It looks absolutely disgusting to me to have what should be a dense construction filled with superfluous spaces, to the point that it is making me not want to use IntelliJ Idea at all, despite its numerous great features. THis, for example, severely diminishes the utility of its automatic refactoring ability because I need to manually go through and fix its formatting errors after every refactor.
When I look in the code style settings, the "around operators" checkboxes seem to have no mechanism for a different setting inside for loops:
How can I get IntelliJ Idea to format my code correctly?
I'm building a LESS file containing a list of color variables that are used through our project. Most of these colors are simple colors (red, blue...), but I want a few of them to be automatically "computed" from the other colors. For example, I have made a mixin to automatically create a color that "stands out" from another color. Following the LESS documentation, I "simulate" a return value by defining a new variable in the mixin, so that I can use it next.
.stand-out-color(#baseColor, #rate) when (lightness(#baseColor) >= 50%) {
#standOutColor: darken(#baseColor, #rate);
}
.stand-out-color(#baseColor, #rate) when (lightness(#baseColor) < 50%) {
#standOutColor: lighten(#baseColor, #rate);
}
.stand-out-color(red, 10%);
#my-first-color: #standOutColor; // A slightly different red, perfect
.stand-out-color(blue, 10%);
#my-second-color: #standOutColor; // The same slightly different red, not the blue I expected
Unfortunately, the return value is written after the first call, and never changed afterwards.
After reading the documentation again, I got this part: "There is only one exception, variable is not copied if the caller contains a variable with the same name (that includes variables defined by another mixin call)."
So it works as it should, but I don't have any idea how to achieve what I want, which is a function I can call more than once within the same scope. As I'm defining a list of global variables, I don't think I can play with scopes to avoid this behavior. Is there any other way to achieve this?
Here's the solution, thanks to seven-phases-max's comment to my question. It solves my initial problem, which is that I needed to compute slightly darker/lighter color variables depending on another variable.
The contrast function of LESS solves my issue, by letting me specify which color to take depending if a color is "dark" or "light".
Applied to my example:
#my-first-color: contrast(#original-color, darken(#original-color, 10%), lighten(#original-color, 10%));
I have a service that returns a lovely svg gradient for use in IE, and I'm trying to use this with a less mixin like this --
.Gradient(#start, #stop) {
background-image: url("/imageService/GradientSvg?startColor=#{start}&endColor=#{stop}");
}
The problem is, these colors begin with #, which truncates the url that the server receives.
I need a way of getting the color without the #. I don't mind if its RGB values, or the hex values without the prefix.
I had tried url encoding the # by using a javascript call like this
background-image: url(`"/shop/image/GradientSvg?startColor=#{start}&endColor=#{stop}".replace("#","%23")`);
And I think it would have worked except that my less processing is happening on the server, and it can't evaluate the javascript when done this way.
Any ideas how I can extract the color in a way that will work in the url? I'm flexible in how the service works.
This is the solution I came up with. I use a color function to apply a tiny bit of transparency. This ensures that I always end up with an RGBA color, not one beginning with a #.
.Gradient(#start, #stop) {
#startRgb: fadeout(#start,1%);
#stopRgb: fadeout(#stop,1%);
background-image: url("/ImageService/GradientSvg?startColor=#{startRgb}&endColor=#{stopRgb}");
the url now always contains the rgba notation for the color, and my service is happy.
If you don't mind to have two variables for each colour, you can use the color function to convert a string:
#myColorString: "FFD700";
#myColor: color("##{myColorString}");
Use whichever variable you need.
color: #myColor;
background-image: url("/colors?color=#{myColorString}");
Can you pass the colors in as strings instead of colors? So when you call your mixin, it'd just look like this?:
.Gradient("000000", "FFFFFF");
If you need those colors defined as colors elsewhere, you could try using backticks to parse the value out in Javascript. So it'd be something like:
#noHash: ~`"#{start}".substring(1)`;
I'm not sure how those color values look when you pass them into JS, though. They might be a color object, and require conversion to a string. I guess I'll have to try that some time...
According to the HTML Specs and answers to this question, an ol cannot be contained inside a p. But why not?
I'm writing a paper in APA style in which I'd like to use an ordered list in paragraph form. (See OWL and editing-writing for implementations of lists—ordered and unordered—in APA format.)
Sometimes, it makes sense to have a list displayed in paragraph form, and why can't that list semantically be part of the paragraph? For example, in my paper, I have:
… a problem set involving (a) converting between numbers between 0 and 1 in scientific notation and standard decimal form, (b) counting place values of numbers greater than 0, (c) comparing positive and negative numbers with magnitude less than 1, and (d) adding and subtracting numbers in scientific notation. See the attached …
If you don't believe this list is semantically part of the paragraph, please state why you think so, because I'm interested in your opinion.
I'd really like to know how I can write this list using the HTML tags <ol> and <li>, but have them displayed as if they were part of the paragraph. The reason is that semantically, these items are part of an ordered list and to include them in the correct element is good for SEO, yet I am curious of how to keep the list written in paragraph form.
For right now, either break the list into a block if the list semantics are that important to you, or leave it as a text string like your example and get on with your life.
If you don't believe this list is semantically part of the paragraph, please state why you think so,
It is. But that's not the problem.
[...] an ol cannot be contained inside a p. But why not?
Because the spec says so. That's about the end of the discussion.
There are plenty of semantic structures that simply don't exist in HTML due to oversights, and this is one of them. There's also, for example, no true way to mark up footnotes, which is strange considering HTML was initially created for sharing things like academic research. (There are some documented cheats; not the same thing.)
Given your links, I'm assuming you've read the technical reasons regarding block elements and whatnot, so I'll skip that here.
I'd really like to know how I can write this list using the HTML tags <ol> and <li>
Well, you could start with creating a custom DTD(even though you really shouldn't in the great majority of cases) that allows the elements to be nested and then figure out how to actually make the list flow into the paragraph(eg. display:inline etc) in a way that won't make browsers puke. Or maybe specify an entirely new element for in-line lists. Or you could just move on to more important things.
these items are part of an ordered list and to include them in the correct element is good for SEO
Sometimes when people bring up SEO as a reason for doing things, the answer should be "You're trying too hard and probably have better things to do." This is one of them. Any single thing like this done "for SEO" rarely makes anywhere near as much difference as your offense at not being able to do it makes it become in your mind. The real answer to your question involves changing the HTML spec. If that's the sort of work you enjoy doing, then join the relevant WHATWG mailing list, make your proposal, defend it for probably months on end, and if you get lucky it'll become official.
The reason why ol and ul currently can't be contained inside of a p is because paragraph elements can only contain inline elements, and lists are block-level elements.
Perhaps lists shouldn't be automatically considered block-level elements, but that isn't the case at the moment.
So your options are to just split that excerpt into 2 paragraphs, with a list between them, e.g.
… a problem set involving:
converting between numbers between 0 and 1 in scientific notation and standard decimal form,
counting place values of numbers greater than 0,
comparing positive and negative numbers with magnitude less than 1, and
adding and subtracting numbers in scientific notation.
See the attached …
Or just create an inline list, which may not validate, but is semantically correct and will render just fine in most browsers.
I think Su's excellent answer nailed the important stuff. I'm not sure if CSS is an option for your particular project, but as far visually including a list inside a paragraph, you can do this with CSS and some <span> tags (and it will validate).
Demo: http://jsfiddle.net/wg9zD/
<p>
… a problem set involving
<span class="list">
<span class="list-item">converting between numbers between 0 and 1 in scientific notation and standard decimal form</span>
<span class="list-item">counting place values of numbers greater than 0</span>
<span class="list-item">comparing positive and negative numbers with magnitude less than 1, and</span>
<span class="list-item">adding and subtracting numbers in scientific notation</span>
</span>
See the attached …
</p>
.list {
counter-reset:mycounter 0;
}
.list-item {
display: list-item;
list-style: inside none;
margin: 1em;
}
.list-item:before {
content: "(" counter(mycounter, lower-alpha) ") ";
counter-increment: mycounter;
}
I think I've figured out the best way to do this. Based on #Lèse majesté's answer, I used an inline list:
<div class="paragraph">
<p>... a problem set involving:</p>
<ol>
<li>converting between numbers between 0 and 1 in scientific notation and standard decimal form;</li>
<li>counting place values of numbers greater than 0;</li>
<li>comparing positive and negative numbers with magnitude less than 1; and</li>
<li>adding and subtracting numbers in scientific notation.</li>
</ol>
<p>See the attached ...</p>
</div>
with the style rules:
div.paragraph p {
display: inline;
}
div.paragraph ul,
div.paragraph ol,
div.paragraph li {
padding: 0px;
display: inline;
list-style-type: lower-alpha;
font-weight: bold; /* for demo purposes */
}
div.paragraph {
counter-reset: item; /* creates a counter called 'item' initialized to 0 */
}
div.paragraph li:before {
counter-increment: item; /* Add 1 to 'item' counter */
content: '(' counter(item, lower-alpha) ') '; /* display (item) */
}
This appears as:
… a problem set involving: (a) converting between numbers between 0 and 1 in scientific notation and standard decimal form; (b) counting place values of numbers greater than 0; (c) comparing positive and negative numbers with magnitude less than 1; and (d) adding and subtracting numbers in scientific notation. See the attached …
Is it possible to escape whole declaration?
This complies fine in less.js (I'm using less.app)
margin: e(" 0 10px");
But this throws an error:
e("margin: 0 10px");
I've tried putting 'margin' in a variable but without success.
Sorry that's not possible. A couple things though:
The official escape designation (according to lesscss.org is the tilde-quote, not the e() syntax, like so:
margin: ~"0 10px";
Second, the code you provided is not nearly complex enough to warrant a LESS CSS string literal. Please share the actual code that you are having trouble with. You may want to close this question and ask another one.
Third, remember that you can include a .css file - it will not be compiled, just dumped into the output. The syntax is identical to a standard CSS import:
#import "myfile.css";
After many attempts, I got this to compile and output in my less file.
font-family: e("'object-fit: contain;'");
This is a hack for IE object-fit (I got that idea from object-fit