I am using Stylus version 0.44.0...
I have simplified this example, but here is my issue:
color-all-the-things()
div
{block}
body
+color-all-the-things()
background: red
Is being compiled to:
body +color-all-the-things(){background:#f00}
It is essentially treating the block mixin like a selector.
The expected output is:
body div {
background: red
}
According to the examples on the front page of the stylus project (http://learnboost.github.io/stylus/docs/mixins.html#block-mixins) the syntax is as follows:
Mix-in definition
foo()
.bar
{block}
Mix-in use
+foo()
width: 10px
Result
=> .bar {
width: 10px;
}
So in your case I guess it would be as you wrote it:
color-all-the-things()
div
{block}
...
body
+color-all-the-things()
background: red
Since that also produces the expected output in the online editor (http://learnboost.github.io/stylus/try.html) we can assume you got it right ;)
All I can think of it check your toolchain. Make sure you have the latest stable release, or downgrade to one. Or if you do try upgrading to the latest development release. It specifically says that this feature is in a "rough state" in the docs so it's fair to assume there might be some problems with it in recent versions.
If the problem persists open an issue: https://github.com/LearnBoost/stylus/issues
Related
In my react app, I have a big piece of generated code (110k lines) to show on screen (an openapi json spec). I wrapped it in a <pre> tag with:
overflow-y: scroll;
word-wrap: break-word;
white-space: pre-wrap;
font-family: monospace;
height: 100%;
This <pre> has a parent <div> which set the height to something like 800px so it can scroll.
This used to work well, but recently chrome hang completely when displaying it. It works on Brave and Firefox without any issues. Strangely, the code is shared on server, if I type the url of the server and display the code directly (no react, just basic code display), chrome behave normally. It automatically wrap the code in a <pre> just like I do, with the same css style, except for the height:100%; I wonder what the hang in my application all of a sudden.
Thanks for any help.
Used react-virtualized list with chunks of data. Not ideal, but good enough for our purpose.
I am having a hard time trying to prevent the overflowing text inside a codeblock. The problem seem to be only with codeblocks, which ignores its parent container width.
As per the example below, when editing using a codeblock the text is not breaking into new lines when reaching the end of the container.
https://codesandbox.io/s/1oqr4xyy6j
Demo - https://codesandbox.io/s/r4qx32m8wm
I made this change in rich-editor.css
CSS
.RichEditor-editor .public-DraftStyleDefault-pre pre {
white-space: normal;
}
You can add the following to your CSS:
pre {
overflow: hidden;
}
Working example here.
I have just started to use Atom editor these days. Before that, I have used python IDLE. IDLE highlight the contents of parenthesis for us when we just created parenthesis. But, Atom does not.
Do you know any themes or packages to make it possible in Atom?
You can use this selector: atom-text-editor .bracket-matcher .region, :host .bracket-matcher .region to highlight the brackets any way you want.
For example:
atom-text-editor .bracket-matcher .region,
:host .bracket-matcher .region {
border-bottom: none;
background: red;
}
This will make the brackets have a bright red highlight.
You can try Material Theme, I'm using it and parenthesis is auto-created. Another choice is to install a package named BracketHighlighter.
Angular 2 has this special selector to reference its own component like:
:host
display: block
height: 100% !important
width: 100%
text-align: center
position: relative
But Intellij do not present me any way to supress this warnign. It confuses me when I am looking for actual errors on the Project folders
There is nothing wrong with Intellij. It is using Sass default escaping characther.
The problem I was having is due to an issue with Libsass, which Gulp-sass uses under the hood to compile sass, instead of the original ruby implementation. Libsass does not need the escaping character, so when I escape to avoid Intellij error, it compiles the escape character as well.
I am using Gulp-ruby-sass now and everything works just fine, meaning I can escape the :host selector the way Intellij provides
There is a link to the page, that has this problem: http://www.klds.cz/aktuality
This is how it looks in every modern browser:
And here is how it looks in IE7 and lower:
Enyone knows what's going on? Thanks.
Your clears need to be changed. I've had a LOT more cross browser success by using overflow: auto; than any clears. Try the below, it worked in my test.
Remove .clearer by commenting it out.
.clearer {
/*CLEAR: both*/
}
Add a new entry to main.css to allow it to overflow properly
.news_main .item {
overflow: auto;
}
I tested a copy of your site with the changes on IE7 and that resolved it.