I try to use less but I have a big problem by nested rules. I have this code:
.imageContainer{
width:0;
overflow:visible;
img {
position:absolute;
}
}
Dreamweaver doesn't know these rules and it doesn't compile.
Related
I am using Visual Studio Code and prettier in my Typescript project. It also formats less files.
What prettier does is putting every selector on a single line..
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4... {
margin: 0;
padding: 0;
}
Ends up as a very loooooooooooooong chain of selectors:
body,
div,
dl,
dt,
...
{
margin: 0;
padding: 0;
}
What I would like Prettier is, to just leave me alone (on this specific aspect. in .less files.) Keep them in a line (or several) if I wanted to. Or on multiple, if that is, what he finds:
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4... {
margin: 0;
padding: 0;
}
ul,
ol {
list-style: none;
}
Btw: I can „prove“, that only prettier has a hand in this, not any built-in stuff in vscode or my tslint, by putting a // prettier-ignore line before those selectors. That would also be a local fix, but I want a more general solution... without having to throw anti-linter comments at all of this...)
update:
Maybe the solution is somewhere near pointing .less files to a different parser. However I can't find a single piece of sample code, how to tell prettier my postcss-Preferences then...
{
"singleQuote": true,
"printWidth": 140,
"overrides": [{
"files": "*.less",
"options": {
"parser": "postcss"
}
}]
}
I don't see a way to prevent prettier from adding newlines to your selector list. There is a prettier-stylelint integration coming to vscode though, see support for prettier-stylelint in vscode.
Stylelint extension for vsCode does have the option you need. newlines in selector lists : stylelint rule.
selector-list-comma-newline-before :
"never-multi-line"
So you could just use stylelint instead of prettier. Or wait for the PR on the prettier-stlelint integration. It looks like it is very close.
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);
});
}
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,
Unfortunately, I need to use a specific browser hack on a page:
.selector { (; propery: value ;); }
However, I keep getting compilation errors when I try to compile my SCSS. I imagine there is a certain way I need to write this so it's compiled properly?
What you need is interpolation.
.selector {
#{"(; "}propery: value#{" ;)" };
}
Demo: http://sassmeister.com/gist/0a190be584097a723d5e
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!