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.
Related
How can I override some default values from primereact e.g. the primary color?
I read that i have to override the values by adding the following code in the proviced override.scss
:root {
--primaryColor: green;
--primaryTextColor: #ffffff;
--panelContentBorder: 1px solid #c8c8c8;
}
Unfortunately, my changes are not applied when working with e.g. a button-class (which is working with the primary color). I also read that the overrides must happen before the actual class is created.
How can I do that? Do I need to run a SCSS-command?
In my remember, You can override variables in overrides/_layout_variables.scss or overrides/_theme_variables.scss files. Also you may need to upgrade your version to the latest.
You can override variable for some more specific rule
e.g.
:root {
--primaryColor: green;
--primaryTextColor: #ffffff;
--panelContentBorder: 1px solid #c8c8c8;
}
.somePage {
--primaryColor: blue;
// So primaryColor will be blue for all rules in scope of .somePage
}
Well to overwrite SCSS/SASS/LESS variables in general you could do the following (The process does also work with less instead of .scss)
Create a new .scss file
Instead of directly including the frameworks (doesnt matter which one you use) .scss include your OWN created .scss file (step 1)
Import the framework's .scss file in your own, custom .scss file
Compile your own .scss file using e.g. node-sass
Example of your own .scss file
#import "node_modules/path_to_the_libaries_scss_file.scss";
// Overwrite colors like this:
$primary-color: #ff5b00;
How can I style my React component using Sass and CSS modules based on the existence of a GLOBAL parent selector (in this case isOpen)?
Rendered HTML:
<div class="isOpen">
<div class="MyContainer__MyStyle___u9dTa">
My react component
</div>
</div>
My Sass file:
.MyStyle
margin-left: 100px
color: black
// TODO: Override MyStyle if 'isOpen' is on parent, e.g. something like:
.MyStyle
:global(.isOpen) &
margin-left: 0
color: red
The code above gives error: Property "global" must be followed by a ':'
Though it's a little late for me to answer, I think I found the answer and I'll post it for those who may encounter this problem in the future.
The problem is in Sass you have to escape the :global keyword with \:global in order to make CSS module works as you expected.
The discussion can be found at https://github.com/webpack-contrib/sass-loader/issues/448.
It looks like you have a few issues here.
"MyContainer__MyStyle___u9dTa" is one big class name. You cannot reference one part by using the period syntax. however you can reference a partial class like this..
*[class=*"MyStyle"]{}
It also looks like you are using LESS syntax instead of sass. here is how i would write the code with sass and partial class references
*[class=*"MyStyle"]{
margin-left: 100px;
color: black;
}
// TODO: Override MyStyle if 'isOpen' is on parent, e.g. something like:
.isOpen{
*[class=*"MyStyle"]{
margin-left: 0
color: red
}
}
good luck. and its worth noting that you can use vanilla CSS within a sass file if that is easier for you. Here are some resources for CSS and SASS
http://www.w3schools.com/css/css_syntax.asp
http://sass-lang.com/documentation/
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
Is there any way to join stylus partials without actually compiling them? I guess this would be the same as .SCSS files - so then it's a question of build tools. In codekit - you can join javascript files in this way / but that is because it's not a superset style language. I currently use broccoli or brunch depending on the stack, for my builds. I am not interested in trying any other build tools right now.
_thing-1.styl
html
background: blue
_thing-2.styl
div
background: red
_thing-3.styl
span
color: yellow
app.styl
#import '_thing-1'
#import '_thing-2'
#import '_thing-3'
app.css
html {
background: blue;
}
div {
background: red;
}
span {
color: yellow;
}
and... THIS is what I want to have as well...
_master.styl
html
background: blue
div
background: red
span
color: yellow
Any ideas?
I think, this question is more about build tools and not Stylus itself, something like gulp.concat or simple cat _thing-1.styl _thing-2.styl _thing-3.styl > _master.styl
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