I'm trying to have a .flexbox mixin that accepts an argument #orient, which should automatically apply box-orient as well. When using it in combination with !important, I'm experiencing an error that is also reproducible with a more narrowed-down testcase:
.foo() {
.bar;
}
.bar {
color: red;
}
body {
.foo() !important;
}
This makes LESS throw an error (I'm using it in node.js):
C:\...\node_modules\less\lib\less\parser.js:385
throw new(LessError)(e, env);
^
TypeError: Cannot call method 'charAt' of undefined
Oddly enough, using .foo instead of .foo() works as expected:
.foo {
.bar;
}
.bar {
color: red;
}
body {
.foo !important;
}
What am I doing wrong?
A quick search led me to this bugreport. It is a known issue.
https://github.com/cloudhead/less.js/issues/740
To be honest I would suggest you try to accomplish what you're trying to do some other way. The less.js backlog is at time of this writing 417 issues large. It isn't likely going to be fixed any time soon.
(yes it is this bugreport, you created a nested rule by extending .foo with .bar)
Related
Problem
I have some code that uses Active Reports 6's PdfExport class to generate a PDF report. I'm running this code on a Windows 10 machine. After the Creators update, the code started throwing an ArgumentOutOfRangeException.
The code worked fine when it was run on Windows Server, just not on my Windows 10 machine.
Also, I tried switching to the XlsExport class, and the report worked fine.
Code
public static void ExportPDF(ActiveReport report, Stream stream)
{
try
{
report.Run();
using (PdfExport pdf = new PdfExport())
{
// exception occurs here
pdf.Export(report.Document, stream);
}
}
catch (Exception)
{
throw;
}
}
Error details
ArgumentOutOfRangeException
Message
Index was out of range. Must be non-negative and less than the size of the collection.
Parameter name: index
Stacktrace
at System.ThrowHelper.ThrowArgumentOutOfRangeException(ExceptionArgument argument, ExceptionResource resource)
at System.Collections.Generic.List`1.get_Item(Int32 index)
at #mqc.#Vqc.#RZc(Int32 fontIndex, String fontName, FontStyle fontStyle, Single sizeInPoints, Boolean vertical)
at DataDynamics.ActiveReports.Export.Pdf.PdfExport.#7pk(Document document, Stream stream, String pageRange)
at DataDynamics.ActiveReports.Export.Pdf.PdfExport.Export(Document document, Stream stream, String pageRange)
at DataDynamics.ActiveReports.Export.Pdf.PdfExport.Export(Document document, Stream stream)
...
After reading this post on the Active Reports support forum, and some some trial and error, I discovered a fix.
Solution
Open up the report designer file code behind. In my case, it was in the file SomeReport.rpx.vb.
Locate the designer generated code region:
#Region "ActiveReports Designer generated code"
Public WithEvents Detail1 As DataDynamics.ActiveReports.Detail
Friend WithEvents ReportHeader1 As DataDynamics.ActiveReports.ReportHeader
Friend WithEvents ReportFooter1 As DataDynamics.ActiveReports.ReportFooter
....
1. Style declarations require font-family
Inside that region of code, look for instances of Style properties:
Me.Label2.Style = "font-family: Arial; color: Black; font-size: 10pt; font-weight: bold; text-align: right; ddo-char-set: 1"
You need to make sure every Style property includes a font-family. Go through your code and fix any that are missing.
2. StyleSheet declarations also require font-family
Also look for instances of code like this, and make sure they also have a font-family defined.
Me.StyleSheet.Add(New DDCssLib.StyleSheetRule("font-family: Times New Roman; font-style: inherit; font-variant: inherit; font-weight: bold; font-size: 16pt; font-size-adjust: inherit; font-stretch: inherit", "Heading1"))
3. Look out for font-family: inherit
You need to explicitly define the font-family, if you see font-family: inherit anywhere in the designed code, replace it with a font name.
Conclusion
Once you've added all the missing font-family , your report should work.
Is there a way to exclude color propertys from sass compilation in webpack sass compiler, to prevent the opacity problem in child elements.
At the moment it compile this:
div {
background: rgba(255, 255, 255, 1);
}
to:
div {
background: white;
}
Sorry for my bad english :)
You can't prevent it. Because it's a sass function that converts the color to hex.
But there are few ways to avoid it
you can create your own rgba function that will do the trick for you
#function rgba($r, $g, $b, $a) {
#return unquote('rgba(#{$r}, #{$g}, #{$b}, #{$a})');
}
But doing this means there are changes that, if some one is using rgba(hex, a) then it will fail, if there are some one using syntax like rgba(rgb(255,255,255), 1) then also it will fail. So you have to look in your project structure and see how the syntax is there in all the files. And you have to mention to the team to use rgba alone.
Or else you can create a simple mixin
#mixin mysuper-rgba($hexcolor, $opacity) {
background-color: $hexcolor;
background-color: rgba($hexcolor, $opacity);
}
body {
#include mysuper-rgba(#11111, 0.5);
}
What I suggest is create a mixin that will do the trick for you and ask all your developers to use the same.
The app-grid Element (helper class)in Polymer allows to create a responsive grid layout. The given Polymer Example creates a layout with three list items placed horizontally next to each other.
To make it responsively change the grid from 3 columns to 1 on smaller screens, breakpoints have to be declared. The documentation talks about defining custom properties inside a #media rule. (Link above)
I can't get the media rules to make the change.
I found similar questions about the #media rule in Polymer but answers always pointed out to go with the iron-media-query. Now that the Polymer documentation mentions the #media I believe there must be a way to do it.
I tried using it like so but couldn't get it to work:
<style include="app-grid-style">
:host {
--app-grid-columns: 3;
--app-grid-item-height: 200px;
--app-grid-gutter: 20px;
}
#media (max-width: 600px) {
:host {
--app-grid-columns: 1;
}
}
</style>
Looking at the demos they always call this.updateStyles when the window is resized, to make sure all custom properties are applied correctly.
Unfortunately this information is missing from the docs...
attached: function() {
this._updateGridStyles = this._updateGridStyles || function() {
this.updateStyles();
}.bind(this);
window.addEventListener('resize', this._updateGridStyles);
},
detached: function() {
window.removeEventListener('resize', this._updateGridStyles);
}
If you are using app-grid outside of an element in your main document you would have to call Polymer.updateStyles() instead.
The two shadow-piercing combinators have been deprecated as stated in https://www.chromestatus.com/features/6750456638341120Then what's the substitude for achieving the same thing, or this shadow-piercing feature has been completely abandoned?
::shadow and /deep/ were removed for breaking encapsulation.
The substitutes are:
CSS variables.
It already works natively with the recently launched Google Chrome 49. Read here:
http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/
https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care?hl=en
http://blog.chromium.org/2016/02/chrome-49-beta-css-custom-properties.html
:host-context. Read here: http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/
As of Polymer 2:
::shadow (shadow-piercing selectors) - there is no direct substitute. Instead a custom CSS properties has to be used. Polymer 2: Custom CSS Properties
/deep/ - there is some sort of replacement by defining :host > * { ... } (applies a ruleset to all of the top-level children in the host's shadow tree, which doesn't conflict with the rule in the main document).
For more detailed information check Polymer 2 Upgrade Notes
At the time of writing you can try ::part and ::theme with Chrome 73 and above:
https://www.chromestatus.com/feature/5763933658939392
<submit-form>
#shadow-root
<x-form exportparts="some-input, some-box">
#shadow-root
<x-bar exportparts="some-input, some-box">
#shadow-root
<x-foo part="some-input, some-box"></x-foo>
</x-bar>
</x-form>
</submit-form>
<x-form></x-form>
<x-bar></x-bar>
You can style all the inputs with:
:root::part(some-input) { ... }
There is the full documentation how it works:
https://github.com/fergald/docs/blob/master/explainers/css-shadow-parts-1.md
This somehow can solve your problem, but I still miss the days how I styled embedded tweets with ::shadow.
"::v-deep" is working for me. For example:
.menu {
// stuff
}
/deep/.sub-menu { // override submenu
.sub-menu__mini {
//stuff
}
a, a:hover {
//stuff
}
}
}
becomes:
.menu {
// stuff
}
::v-deep .sub-menu { // override submenu
.sub-menu__mini {
//stuff
}
a, a:hover {
//stuff
}
}
}
There is another thread that covers this, but I am not allowed to post to it. Also, the only answer does not seem to solve my problem.
I am getting the Object not a function error when using the #html.extend() method. I have read all of the very limited threads on this topic. They all say the same thing. That I need to ensure the path is correct to the layout.vash file I am extending. My declaration looks like this in the file that I want to want to extend with my layout.vash file.
#html.extend('layout', function (model) {
.... do stuff ...
})
What is odd, is that some pages work fine others don't. The path is correct. I am sure of this because of the fact the files in the same director exhibit different behavior.
Does anyone know what other mistake I could be making to cause this error?
In my case, vash was unable to parse the content within ...
I pulled it out from the layout page and created a separate .css file, and the annoying "object is not a function" error disappeared.
I speculate that vash collides with some css syntax.
For you info, my style statements that caused the trouble were these.
<style type="text/css">
*{padding:0;margin:0;}
html{border-top:10px #1abf89 solid;}
body{width:800px;margin:0 auto;padding:5% 20px 20px;font-family:Palatino, Optima, Georgia, serif;}
#media all and (max-width:1024px){ body, pre a{width:60%;} }
small{color:#999;}
#toolbar{margin-bottom:1em;position:fixed;left:20px;margin-top:5px;}
#toolbar [class^="icon-"]:before, #toolbar [class*=" icon-"]:before{font-family:'pen'}
#mode{color:#1abf89;;cursor:pointer;}
#mode.disabled{color:#666;}
#mode:before{content: '\e813';}
#hinted{color:#1abf89;cursor:pointer;}
#hinted.disabled{color:#666;}
#hinted:before{content: '\e816';}
#fork{position:fixed;right:0;top:0;}
/*
When the webpage is printed
this media query hides extra elements,
and makes the text content fit the page.
*/
#media print {
#fork, #toolbar {
display: none;
}
body {
width: 94%;
padding-top: 1em;
font-size: 12px;
}
html {
border-top: 0;
}
}
</style>