js-beautify (used under VSCode) annoys me by putting extra lines after comments:
My sample.scss
/* a fancy comment */
.foo-bars {
background: $gray;
display: block;
width: 26px !important;
}
...becomes...
/* a fancy comment */
<-- annoying empty line inserted
.foo-bars {
background: $gray;
display: block;
<--- (this is fine. I like it being preserved)
width: 26px !important;
}
This is my .jsbeautifyrc (verified to be effective, i.e. by testing with "indent_char": "#")
{
"indent_char": " ",
"preserve_newlines": true,
"max_preserve_newlines": 8,
"keep-array-indentation": true,
"break_chained_methods": false,
"newline_between_rules": false,
"selector_separator_newline": false,
"end_with_newline": false
}
update: Affects /* block comments */ only, not // line comments.
It seems like that this should have been fixed (js-beautify#609) but somehow didn’t work out as expected as there is still an open issue#531 and a pending pull request regarding this problem.
As you mentioned you could use // line comments as a workaround for now.
Related
I'm having trouble with sass variables. The browser is telling me i am using invalid property values and i can see the code editor is not picking up the variables i am using because it's not colorizing them.
I have uninstalled and reinstalled sass and gulp-sass but that didn't fix the problem and i'm out of ideas. I'm sure it's something really simple.
Key Facts
I am on windows 10
I installed sass using npm install sass
i installed gulp-sass using npm install gulp-sass
I am successfully compiling the .scss file into the .css file
i am currently trying to create the variables in an .scss file
This is my .scss file
$flx: flex;
$clm: column;
$mpage: 1 0 auto;
$space-between: sb;
$pg1: 100vh;
body {
display: flx;
min-height: 100vh;
flex-direction: clm;
}
main {
flex: mpage;
}
.item-wrap{
justify-content: sb;
}
In order for Sass to read your variables, when you call them you have to hang the $ character in front of them, as you did when you declared them.
Example:
$flx: flex;
$clm: column;
$mpage: 1 0 auto;
$space-between: sb;
$pg1: 100vh;
body {
display: $flx;
min-height: 100vh;
flex-direction: $clm;
}
main {
flex: $mpage;
}
.item-wrap{
justify-content: $sb;
}
I have a styles.scss file.
In it, i have the following definition which fails to compile down to css:
.modal-dialog {
margin-top: max(6%, env(safe-area-inset-top));
}
I get the following error:
"env(safe-area-inset-top)" is not a number for "max"
How do i write this correctly?
.modal-dialog {
margin-top: unquote('max(6%, env(safe-area-inset-top))');
}
What about calc(max(6%, env(safe-area-inset-top)))?
I'm having trouble with SASS. Locally I have this selector:
#featured-categories{
ul{
li{
width: 33.33%;
}
}
}
which works as expected. Deployed (and compressed) however this is compiling to:
#featured-categoriesulli{width: 33.33%;}
which of course is an invalid selector. The more straight more forward formulation:
#featured-categories ul li{
width: 33.33%;
}
behaves in the same way - i.e. compiles to something munged and broken.
The only way I can get this to compile is to add redundant rules between the elements of the selector:
#featured-categories{
margin: 0;
ul{
margin: 0;
li{
width: 33.33%;
}
}
}
This works, but is obviously not ideal.
Can anyone help? I'm in a ruby 1.9.3 project running sass 3.2.9. Any pointers would be greatly appreciated.
The SCSS that you've provided should work fine. Check it out with SassMeister or http://jsfiddle.net/Kjanu/. It will compile to this:
#featured-categories ul li { width: 33.33%; }
So you've got something else going wrong in your setup.
When defining a custom font with the webfont loader (repo here), we basically define the families loaded and the related URLs:
WebFont.load({
custom: {
families : [ "My font" ],
urls : [ "assets/css/fonts.css" ]
}
});
But, it seems the loader don't detect multiple weight defined for the same font in the css file:
#font-face {
font-family: 'My font';
src: url("../fonts/my-font.eot");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'My font';
src: url("../fonts/my-font.eot");
font-weight: bold;
font-style: normal;
}
And so, the loader trigger the active event when the first font is loaded. This can be confirmed if we check the fontactive event who'll only be triggered once:
WebFont.load({
fontactive: function( fontname, fontdescription ) {
console.log( fontname, fontdescription );
// Only trigger once `My font, n4`
}
});
So, is there a way tell the webfont loader there's multiple weight to get (a bit like their google webfonts interface)?
(A fix can be to use multiple names for each font weight, but that's not the solution I'm searching for here)
I'm one of the developers of the webfontloader. You are correct that the custom module does not support loading multiple variations. Luckily we recently added support for this, so if you upgrade your version of the webfontloader (or use the one on the Google CDN) you'll get support for it.
You can use it like:
WebFont.load({
custom: {
families: ['My Font', 'My Other Font:n4,i4,n7'],
urls: ['/fonts.css']
}
});
To load the 'n4', 'i4' and 'n7' variations of "My Other Font".
I am new to JqGrid, so please bear with me. I am having some problems with styling the cells when I use a showlink formatter.
In my configuration I set up the AfterInsertRow and it works fine if I just display simple text:
afterInsertRow: function(rowid, aData) {
if (aData.Security == `C`) {
jQuery('#list').setCell(rowid, 'Doc_Number', '', { color: `red` });
} else
{
jQuery('#list').setCell(rowid, 'Doc_Number', '', { color: `green` });
}
}, ...
This code works just fine, but as soon as I add a formatter
{'Doc_Number, ..., 'formatter: ’showlink’, formatoptions: {baseLinkUrl: ’url.aspx’}
the above code doesn't work because a new element is added to the cell
<a href='url.aspx'>cellValue</a>
Is it possible to access programmatically the new child element using something like the code above and change the style?
`<a href='url.aspx' style='color: red;'>cellValue</a>` etc.
UPDATE: In order to work you have to do as follow:
jQuery('#list').setCell(rowid, 'Doc_Number', '', 'redLink');
CSS Class
.redLink a {
color: red;
}
You could add a class to the cell:
jQuery('#list').setCell(rowid, 'Doc_Number', '', 'redLink');
Then define a CSS class along these lines:
.redLink a {
color: red;
}