How to assign value to LESS variable using selector - less

Since LESS is a pre-compile stylesheet language, this may not achieve what I'm after, but the idea is:
#sidebar {
width: 40%;
}
#sidebar_width : #('#sidebar:width');
.some_other_elements {
width: #sidebar_width;
}
So there are three questions I have:
Is something like the above possible? I just discovered LESS and the documentation is making me carsick.
If the above is possible, will it produce CSS with the .some_other_elements set to 40% or the actual width of the sidebar? Is it possible to get the actual width using LESS?
If you can give me your opinion of the library in general along with the answer or comment, I'd like to hear it. It seems a bit much but maybe it's the next jquery and I need to adopt it sooner than later (or conversely, maybe it's the next YUI and I should forget I ever saw it).

That won't work. You can't cherry pick out values from a selector and turn it into a variable: You would have to do something like:
#sidebar_width: 40%;
.some_other_elements {
width: #sidebar_width;
}
the width of the sidebar will be set to 40% of the width of the parent container.

While this is true if you precompile, keep in mind LESS does actually let you access the JS environment. So if you compile server side using Node you could do something similar to what you are trying since you can access parts of the document. It may even work if you compile it on load using the .js (though I would not recommend this for a variety of reasons) The example from the documentation:
#height = `document.body.clientHeight`;
Might be something worth looking into for what you are trying to accomplish.

Related

Clang format for banner style

An open-source project I contribute to uses banner style (also called Ratliff style). It looks like that:
// In C
for (i = 0; i < 10; i++) {
if (i % 2 == 0) {
doSomething(i);
}
else {
doSomethingElse(i);
}
}
Some IDE's like QtCreator have their own configurations for formatting, but others, like Visual Studio Code, require a .clang-format file.
I looked online for existing configurations, and couldn't find any. Then I tried to make one from scratch using this clang-format generator, but I couldn't manage to indent the braces right.
So, is it possible to create a clang-format file for Ratliff/Banner style, or is there some missing configuration that will force us to use some other generator?
This answer is not going to be the "answer" that you were looking for, but it is what I've discovered over the last two days of digging through the code for clang-format. I, too, have been looking for a way to auto-format a variant of banner style with clang-format.
clang-format seems to be missing some capabilities that would enable it to auto-format banner style.
For instance, you need to indent ending (right) braces for code blocks. clang-format does not even appear to track ending braces, but it does track starting (left) braces within its internals.
I started out my studying streak thinking I could understand the way clang-format implements its formatter system, so I could add the features needed to do it. Sadly it was way too complicated for me.
Perhaps someday we will be able to auto-format banner style with clang-format, but not today.
If someone out there knows this answer is inaccurate, please don't hesitate to correct me.
edit: Instead of giving you just a verification of what can't be done with clang-format, perhaps you might find http://astyle.sourceforge.net useful.

Why does IntelliJ IDEA offer css animation names?

If you write #keyframes in a css file in IntelliJ IDEA it suggests you animation names like blink, dance, fadein, fadeout etc.
Is it just a name suggestion function? Can I get the implementations behind these names somehow from IDEA? I guess you have the same functionality in Webstorm too.
WebStorm and IDEA are collecting all #keyframe names in the project during indexing. All these names are suggested in completion when you write #keyframes or animation-name:.
Showing an implementation behind a suggested name is not implemented yet (WebStorm 2016.3.3). I've filed a feature request about it, you may want to vote for it to get updates on its progress: https://youtrack.jetbrains.com/issue/WEB-25641

Gridster add_widget is slow

I want use Gridster for my web site, but i need to add lot of widgets with "add_widget" command. I do a test and i think there is a problem with "add_widget" function : grid is more and more slow and there are memory leak.
You can see that in this video : grister problem video
However, as you can see on the video, if i add widget at beginning (not with add_widget function) there is no problem. Can you help me ? Something wrong with my code ?
Thanks in advance !
In my own experience, the main culprit was using the autogenerate_stylesheet setting. The problem is that it regenerates the css on every call to add_widget(), and this just absolutely kills browsers. Additionally, gridster has/had a bug where stylesheets get duplicated, filling the <head> with tons of duplicate style rules, making it tough on the browser(this bug was supposedly fixed, but my experience was that the fix only worked in specific scenarios, definitely not in mine).
When I used gridster, my widgets were always the same size. So, in my case, I was able to generate the stylesheet once, never needing to regenerate it.
I don't think its part of the public api, but you can just call generate_stylesheet() method once manually.
var gridster = $(".gridster ul").gridster({
autogenerate_stylesheet: false,
widget_base_dimensions: [140, 140],
//other options...
}).data('gridster');
gridster.generate_stylesheet({rows: 30; cols: 8});
//freely call gridster.add_widget(...); as many times as you like
Since you're only going to generate the stylesheet once, you need to make sure gridster will generate style rules for enough rows and columns to accommodate all your widgets, otherwise once you exceed the range, you'll experience broken layouts. Just supply an upper bound on rows and cols when calling generate_stylesheet(opts). If you don't, it seems like it defaults to whatever value your gridster instance is using for max_rows and max_cols.
The nice thing is by manually generating the stylesheet, is that you completely avoid the duplicate style bug too.
The exponential slowdown will be gone. Happy gridstering.
I know I'm a bit late on this but I had the same problem and none of the above solutions worked.
However, I found that I was generating the size and coordinates of the widgets as a string rather than an integer on the back-end.
By making sure they were integers I managed to speed things up loads.
The best way to fix it, is not to disable the autogenerated stylesheet, but to edit the fn.generate_stylesheet function in jquery.gridster.js
At the end of the function, just before these lines:
return this.add_style_tag(styles);
};
add this line:
this.remove_style_tags();
The final result would look like this:
this.remove_style_tags();
return this.add_style_tag(styles);
};
With this, each time a stylesheet is generated, the previous one is removed, so there no duplication problem!

Breakpoints and the 'font-size' parameter

Has anyone had any experience of using the 'font-size' parameter with the at-breakpoint mixin?
In the documentation it states the following...
<$font-size>: When using EMs for your grid, the font size is important. Default: $base-font-size
In a design I am working with I am taking the mobile first approach so the $base-font-size = 12px.
I am then adding a breakpoint at 50em's (arbitrary value for this example) as follows...
#include at-breakpoint(50em 12, 16px) {
.container{
#include container;
}
}
I'm not sure if I have got the understanding of this correctly but I was expecting, given that I've specified a value for 'font-size', that my font size would increase to 16px once the screen exceeded 50em.
However, I think I might have got the wrong end of the stick as to the purpose of this 'font-size' parameter as the font size remains at 12px at any size.
Does anyone know what this parameter affects?
It seems that feature is not well documented. It is not there to set a font size, but to fix em-based media-queries. If you are using a base font-size of 12px, this is very important.
Browsers always interperet em-based media-queries relative to the default browser font size (16px). It doesn't make any sense at all, but that's how they do it. So, in order for you to make a breakpoint at 50em (*12px), we have to set the breakpoint at 37.5em (*16px, the browser default). Passing your base font-size allows us to make that adjustment.
This should be better documented, and the argument should be better named. I've created an issue on GitHub.

HAML & SASS/COMPASS: Is it possible to share variables between?

I'm getting used to working with compass and Haml now and it's pretty awesome. However, it would be great if the two could work more closely together. It seems not possible, however I might have overlooked it or didn't search properly.
I guess I mean something like this:
general variable file:
$container-id = "container"
$primary-column-id = "navbar"
Haml file:
!!! 5
%html(lang="en")
%head
%title
%body
#{$container-id}
%section#{$primary-column-id}
Compass file:
#{$container-id} {
width: 900px;
}
#{$primary-column-id} {
width: 400px;
}
From my research and usage, this is currently not supported (without some sort of custom outside solution). I agree that it would be an awesome feature in theory, but I assume it doesn't exist because of separation of concerns.
For example, specific Haml files would have to be aware of linkage to other specific Sass files when compiled, and pick up declared variables. This does happen Sass <- -> Sass, via partials. However, with the idea above -> the markup (Haml) is blending somewhat with the styling (Sass/Scss). Though they reference one another - they have different purposes. e.g. An ID in the DOM is an attribute of the object, whereas in the stylesheet the ID is the selector of the object.
A framework (such as Compass) could theoretically achieve something like this because it looks at projects - but it might be more appropriate to have a unified project wide config file (neither Sass nor Haml) for your variable declarations or something.
This'd be a great question to get Chris Eppstein's opinion on: https://stackoverflow.com/users/41221/chriseppstein