I'm trying to use Font-awesome in the same way I do with Bootstrap, in accordance with the semantic principles of web design (not putting billions of non-semantic classes in my HTML tags), using LESS.
It seems that it is impossible : the icon definitions are like that :
.#{fa-css-prefix}-home:before { content: #fa-var-home; }
This isn't a mixin definition but a classical CSS rule build with LESS variables.
So, i'm unable to do this kind of declaration :
.meaning-class-name {
.fa-home;
}
Lessc complain that .fa-home is undefined.
Is it a way to avoid to rot my HTML code ? Is there a way to attribute a class to an other class with less ?
Thanks !
I found that the better solution were to modify font-awesome/less/icons.less and rewrite the declarations according this pattern :
.#{fa-css-prefix}-home { &:before { content: #fa-var-home; } }
It is similar to the glyphicons.less used by Bootstrap.
PS : In Eclipse, this can be done quickly with the find/replace tool :
Find :
\.#\{fa-css-prefix\}-([-0-9a-zA-Z]+):before \{ content: #([-0-9a-zA-Z]+); \}
Replace :
.#{fa-css-prefix}-$1 { &:before { content: #$2; } }
and
Find :
\.#\{fa-css-prefix\}-([-0-9a-zA-Z]+):before,
Replace :
.#{fa-css-prefix}-$1,
Related
I have a definition (below) file for a JavaScript library.
How can I hook it up to Visual Studio Code code completion?
It has the following format:
{
"!name": "SomeLibrary",
"someMethod" :
{
"!doc" : "Description of some method.",
"!type" : "fn(someParameter: someType) -> someReturnType"
},
"SomeClass" :
{
"!doc" : "Description of some class.",
"someOtherMethod" :
{
"!doc" : "Description of some other method.",
"!type" : "fn(someParameter: someType) -> someReturnType"
}
}
}
Bonus question: What is the name of this format at all?
UPDATE: I found out that I should create a Typescript definition file, but I really don't know how to convert it from this file I have. Is this a standard format at all?
What you want to create is called a snippet:
You can define your own snippets, either global snippets or snippets for a specific language. To open up a snippet file for editing, select User Snippets under File > Preferences (Code > Preferences on macOS) and select the language (by language identifier) for which the snippets should appear or create a new global snippet (New Global Snippets file...).
Since snippets themselves are defined as JSON, your example could get a bit messy, but basically it would look like this:
{
"You Interface Definition": {
"prefix": "idef",
"body": [
"{",
"\t\"!name\": \"<LIBRARY_NAME>\",",
"\t\"<METHOD_NAME>\" : ",
"\t\t{",
"\t\t\"!doc\" : \"<DESCRIPTION>\",",
"\t\t\"!type\" : \"fn(<PARAMETER_NAME>: <PARAMETER_TYPE>) -> <RETURN_TYPE>\"",
"\t\t},",
"\t\"<CLASS_NAME>\" : {",
"\t\t\"!doc\" : \"<DESCRIPTION>\",",
"\t\t\"<METHOD_NAME>\" : {",
"\t\t\t\"!doc\" : \"<DESCRIPTION>\",",
"\t\t\t\"!type\" : \"fn(<PARAMETER_NAME>: <PARAMETER_TYPE>) -> <RETURN_TYPE>\"",
"\t\t}",
"\t}",
"}",
]
},
}
Note that I'm using \t rather than spaces, since that will respect a user's indentation settings
Now, once you type the prefix idef and press Tab the snippet will expand. You can add tab-stops with placeholder text, in case you want to change <DESCRIPTION> or <PARAMETER_NAME>. Here's a simplified example:
\"fn(${1:<PARAMETER_NAME>}: ${2:<PARAMETER_TYPE>}) -> ${3:<RETURN_TYPE>}\""
Note those parts enclosed by curly braces. Once your snippet is expanded you can use Tab to jump between those tab-stops and modify the selected text. The same tab-stop can be repeated multiple times, should you have the need to insert the same text at multiple places.
If I call:
.somemethod({
&:extend(.flex all);
});
then it appears as if less do not complain but it does generate the appropiate css either.
Is this a bug ? Has it been resolved? I am still on 2014 Java version of less, might need an update if it's worth it.
Edit, added the method somemethod:
.somemethod(#mx){
#mx();
}
.flex {
color:blue;
}
body > main {
.somemethod({
&:extend(.flex all);
});
}
Does Less have any support for the Web Components Custom Elements spec? (http://w3c.github.io/webcomponents/spec/custom/ or more accessible http://www.x-tags.org/docs)
Less does not put any restrictions on used selectors/properties/values as long as they meet the base CSS grammar, e.g. the following Less code:
whatever {
whatever-else: I dont care;
&:tlhIngan(Hol)[DaH="mojaq-mey-vam"] {
color: pitch black #2;
}
}
results in this CSS:
whatever {
whatever-else: I dont care;
}
whatever:tlhIngan(Hol)[DaH="mojaq-mey-vam"] {
color: pitch black #2;
}
Additionally there's special escaping syntax to pass just any characters through (i.e. ~"whatever-'characters'-here//**\#\$^%\n").
So to answer the question: Yes, Less supports custom elements as well as any future standard elements unless they introduce a new incompatible syntax.
My toolchain: Node.js / Express3 / Jade.
I have tried to get Jade template interpolation to work with form input attributes, specially 'readonly' attribution. Trying it many ways, but not got any glue for this. Interpolation is working well with other attributes, f.ex 'value', but just this 'readonly' is quite odd.
This is working:
input#f5lng(
type='text',
style='width: 70px;',
name='f5lng',
value='#{data.lng}',
readonly)
but how to interpolate with variables with rendering module?
Trying to render:
res.render('modMrkForm', { layout:false, tid:req.params.id, data:d, ro:'readonly' } );
and intepolating in Jade with :
input#f5lng(
type='text',
style='width: 70px;',
name='f5lng',
value='#{data.lng}',
= #{ro})
doesn't work. Neither just = ro.
Is there some trick to get it working.
Btw, rendering module knows whether this 'readonly' is required or not, so in other case rendering should be something:
res.render('modMrkForm', { layout:false, tid:req.params.id, data:d, ro:'' } );
Any idea what's wrong here.
it works this way:
input#f5lng( type='text', style='width: 70px;', name='f5lng', value='#{data.lng}', readonly=ro)
and
res.render('modMrkForm', { layout:false, tid:req.params.id, data:d, ro:true } );
just use an boolean instead of a string. i found it on the jade documentation, it's pretty good:
https://github.com/visionmedia/jade#a7
This is an existing general css rule (original file):
.caption-top {
color: red;
}
This is schematic, because in real life case, I need the .caption-top selector to become something else, depending on the context. But I would like to use a variable instead of changing the all occurrences of the selector. For example, in one context, it should become .field-name-field-caption-top. So I did this (wrapper file):
#caption-top: .field-name-field-caption-top;
#caption-top {
color: red;
}
This generates a LESS parse error. Is there another method to establish a rule to substitute a selector? So that, for the above example, the rule will finally look like this:
.field-name-field-caption-top {
color: red;
}
Additional info
The whole point is to not touch the original css file, because it comes from outside and will be overwritten, but instead, to wrap it and tell Less how to replace existing classes with classes used in a particular theme. If it is not possible to achieve, then acceptable solution will be to change the original file in an automatic way, like e.g. replace all occurrences of ".caption" with "#caption" (which I suggested in the above code sample) or make an import at the beginning etc. Then use a wrapper Less file (aware of the theme implementation) to specify what classes whould be replaced with what.
You can use escaping to achieve this:
#selector: '.myclass';
(~'#{selector}') {
color: red;
}
However you cannot do this:
(~'#{selector}') .another {
color: red;
}
To achieve the above you will need to alter the variable
#selector: '.myclass .another';
You need to produce a function of two arguments that generates the desired CSS:
.generator(#fieldName, #fieldCaption) {
.#{fieldName}-#{fieldCaption}-top {
color: red;
}
}
.generator(foo, bar);
(Feel free to try this in the online less compiler)
This piece of code produces the desired CSS for elements with name "foo" and caption "bar". You just need to make more calls to the .generator function with different arguments to obtain what you need.
If this does not correspond to what you need, please provide one additional example of your desired CSS output.
It looks like mixins are what you need:
.caption-top {
color: red;
}
.field-name-field-caption-top {
.caption-top
}
You can define a class that, used or not, you can then reference again and again inside other selectors. You can even combine them with new styles, thereby extending what the original block of CSS would have done:
.field-name-field-caption-bottom {
font-size: 3em;
.caption-top
}
Give it a go in the compiler!