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);
});
}
Related
The editor work fine except autosave.
I import autosave plugin properly,and I can receive the return data.
https://i.stack.imgur.com/cDW9x.jpg
in this case, i can receive the autosave data.
But I can't call Vue instance inside the autosave function.
https://i.stack.imgur.com/5Nyq4.jpg
https://i.stack.imgur.com/sevjo.jpg
I can't call my vue instance by 'this',that means i can't use methods,vuex store...and so on.
How can i fix hti?
I know this is a bit late but for anyone (like myself) looking for an answer to this I followed the advice in this [SO link][1]
data() {
var self = this
...
return {
editorConfig: {
autosave: {
waitingTime: 3000, // in ms
save(editor) {
self.saveData(editor.getData())
}
},
}
}
}
[1]: https://stackoverflow.com/a/61509032/558720
Prior to Modernizr v3, I was using yepnope.js
Modernizr.load and yepnope.js have both been deprecated. How do we conditionally call stylesheets or javascript files now?
Example that worked with Modernizr v2.5.3:
Modernizr.load({
test: Modernizr['object-fit'],
nope: ['./dist/scripts/object-fit.js'],
complete: function(){
if (!Modernizr['object-fit']) {
jQuery(".poster img").imageScale({
scale: "best-fill",
rescaleOnResize: true
});
}
}
});
There's a new syntax and the feature names are all lowercase. You can combine that with jQuery's getScript method.
Which would look something like this:
if (Modernizr.objectfit){
jQuery.getScript("./dist/scripts/object-fit.js")
//it worked! do something!
.done(function(){
console.log('js loaded');
})
//it didn't work! do something!
.fail(function(){
console.log('js not loaded');
});
} else {
jQuery(".poster img").imageScale({
scale: "best-fill",
rescaleOnResize: true
});
}
Have a look here for scripts: https://stackoverflow.com/a/7719185 — no jQuery required. (Note that there's a shorter Promise example a bit down in the answer; don't stop reading after the first example (like I did)).
And here for CSS: loadCSS: https://github.com/filamentgroup/loadCSS/blob/master/src/loadCSS.js
— this is, in a way, even better than YepNope.js, if you don't need any of its features except for just loading stuff + callback. Because the stuff linked above, is smaller (smaller min.js.gz) than yepnope.js.
(And can combine with Modernizr like mhk showed in his answer.)
I've been during a while working with Ember.js. Now I'm getting a weird behaviour that I cannot fix. Is not the first time I experience it, but in previous occasions I figured it out after making little changes. But now, I really have no idea what's causing the conflict. The issue is occuring in Controllers. I have this ridiculously simple controller, just for testing:
App.AppColleaguesController = Ember.ArrayController.extend
(
{
needs: ['app'],
aNumber: function()
{
return this.get('controllers.app.personId');
}
}
);
Of course, that property is defined on the AppController:
App.AppController = Ember.ArrayController.extend
(
{
loggedIn: false,
personId: -1,
personName: '',
location: '',
logOut: function()
{
if (window.confirm("Do you want log out?"))
{
this.set('loggedIn', false);
this.set('personId', -1);
this.set('personName', '');
this.set('location', '');
this.send('goToLogin');
}
}
}
);
In my template, I'm getting this result:
... This is a number: function () { return
this.get('controllers.app.personId'); } ...
My template is as straightforward as this:
...
This is a number: *{{aNumber}}*
{{debug}}
{{log aNumber}}
...
The debugging statements in my template are showing me this in Firebug console:
...
Transitioned into 'app.colleagues'
function()
...
So, is like the function is literally echoed, not "interpreted". In fact I'm getting this sort of problem in a couple more of controllers, but the rest of them (they are a lot, like 8 or 10 controllers) are working nice. Do you have any idea about the problem? Is my mistake, or maybe an Ember issue?
Thanks a lot in advance! I hope you can help me.
You forgot the .property after the function. This is needed by Ember to indicate that a function is a computed property.
aNumber: function() {
return this.get('controllers.app.personId');
}.property('app.personId')
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
Here's what the output needs to be:
div.star_mask {
&.fill-0 {
width: 0%;
}
&.fill-50 {
width: 50%;
}
}
I'm doing this many times, so I made a function to generate it:
#star {
.star-fill(#width) {
(~"&.fill-#{width}") {
div { width: ~"#{width}%" }
}
}
}
div.star_mask {
#star > .star-fill(0)
}
This generates the following CSS:
div.star_mask &.fill-0 instead of what I need: div.star_mask.fill-0
So is there a way to do this? Can I put the & where the function is called?
I ended up fixing the problem by coding the selector myself: div.star_mask.fill-#{width} and placing the function calls one level above. It would still be very cool to nest them though!
when less comes across (~"") as a selector it does not parse the contents but accepts it verbatim, so you cannot use & in it.
I don't think there is a way to do exactly what you want at the moment, though remember you can use & at the end of a selector, e.g.
.a {
div& {
foo:bar;
}
}
becomes
div.a {
foo: bar;
}
not sure that helps though.