I have a couple of network storage, for example '\dev', '\qa', etc...
I am trying at Atom IDE to set a different style to the projects by the path base.
For projects that located on '\dev\www\example\' the curser will be green, and for projects that located on '\qa\www\example\' the curser will be red.
Is it possible? if so how?
You can add the following to your styles.less (File > Stylesheet…)
atom-pane[data-active-item-path*="'\dev\www\example\"] {
.cursor {
color: green;
}
}
atom-pane[data-active-item-path*="\qa\www\example\"] {
.cursor {
color: red;
}
}
Note: I'm using the contains attribute selector (*=), but you might want to look at all available options to see which fits your needs best.
Related
Is there a way to see the CSS that corresponds to the SCSS when we are using SCSS as the preprocessor for Angular?
There is an answer here:
When using angular with scss, how can I see the translated css?
And it mentions using the --extract-css option, however when I try that it looks like it has been deprecated:
sandbox/project $ ng build --extract-css
Unknown option: '--extract-css'
Thoughts?
Styles in Angular Build Files
In your build files the styles of components will actually be compiled in the main.js file. You can find it in the network tab of your browsers developertools.
You will also see a file called styles.css, but this will only contain your global styles. This is because of Angulars view-encapsulation of styles per component. The behavior of angular may change if you change the view-encapsulation strategy as explained here to:
Emulated (default)
ShadowDOM
None
I would not recommend doing that though.
However, if you want you can compile your sass files into css using the command line tool you can install as explained on the official sass website.
You can also just use online sass converters like thisone.
If you are just interested in the global styles here's a reference to How you can switch the format from scss to css in your browser.
Example
app.component.scss
p {
background-color: orange;
}
styles.scss
#import 'default';
p {
color: red;
&:hover {
color: blue;
}
}
default.scss
h1 {
color: teal;
}
Result in Build
styles.css:
h1 {
color: teal;
}
p {
color: red;
}
p:hover {
color: blue;
}
main.js:
AppComponent.ɵfac = function AppComponent_Factory(t) { return new (t || AppComponent)(); };
AppComponent.ɵcmp = /*#__PURE__*/ _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵdefineComponent"]({ type: AppComponent, selectors: [["app-root"]], decls: 1, vars: 0, template: function AppComponent_Template(rf, ctx) { if (rf & 1) {
_angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](0, "lib-my-lib");
} }, directives: [my_lib__WEBPACK_IMPORTED_MODULE_1__.MyLibComponent], styles: ["p[_ngcontent-%COMP%] {\n background-color: orange;\n}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC5jb21wb25lbnQuc2NzcyIsIi4uXFwuLlxcLi5cXC4uXFxBbmd1bGFyJTIwUHJvamVjdHNcXGxpYi1leGFtcGxlXFxzcmNcXGFwcFxcYXBwLmNvbXBvbmVudC5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0Usd0JBQUE7QUNDRiIsImZpbGUiOiJhcHAuY29tcG9uZW50LnNjc3MiLCJzb3VyY2VzQ29udGVudCI6WyJwIHtcclxuICBiYWNrZ3JvdW5kLWNvbG9yOiBvcmFuZ2U7XHJcbn1cclxuIiwicCB7XG4gIGJhY2tncm91bmQtY29sb3I6IG9yYW5nZTtcbn0iXX0= */"] });
*Note the orange background-color in the last line.
This is just a complement to the accepted answer. I wrote it up in a medium article, as it was not immediately obvious as styles.scss is opened first when selecting elements in Chrome Developer Tooling, but styles.css is in the tab right next to it.
https://fireflysemantics.medium.com/viewing-generated-global-css-for-angular-sass-projects-857a6887ff0b
I'm using css modules and I have a React component with two classes:
one - hashed with css modules
another one - not hashed because it is coming from another function (let's say it is "clear-class").
<div className={`${styles.hashedClass} clear-class`}>
qwerty
</div>
my scss file looks like this and it is not working.
.hashedClass {
...
&.clear-class {
background-color: green;
}
}
when I looked into the source with dev tools I noticed clear-class is getting hashed too.
Is there a way to mark in scss file that I want to apply styling to not hashed class?
Use :global() selector in class you don't want to hash
.hashedClass {
...
& :global(.clear-class) {
background-color: green;
}
}
I'm using atom editor version 1.0 stable in ubuntu 14.04.
my question is,
How can I change the background colour of currently selected window tab...
(means current tab..)
by editing style.less file?
I tried,
.tab{ background-color:black; }
to change the tab color,
but,
this code only changed all tab colors except current tab color.
So my question is, how can I change the color of current tab in atom editor by editing style.less file?
.tab-bar .tab[data-type="TextEditor"]::after {
background-color: rgba(20,28,30,0.8);
}
I found this solution by opening developer tools Ctrl+Shift+I, and finding an element by using magnifier tool.
None of these worked for me. Here was my solution (Atom 1.22.1):
.tab-bar .tab.active[data-type$="Editor"] {
background-color: #167373;
}
You have to copy this code and paste in your styles.less file, that's it.
//My awesome tab
.tab-bar .tab.active[data-type="TextEditor"]::after {
background-color: black;
border-bottom: whiTe;
}
.tab-bar .tab.active[data-type$="Editor"] .title {
background-color: black;
z-index: 2;
}
Often I like to open multiple panes and have tabs in all of them. With multiple panes comes multiple active tabs. The other answers here will style the "active" tab in all panes, and not specifically target the tab you have selected.
The problem is selector specificity.
Here's one way to specifically target only the tab you have selected, no matter how many panes you have open:
Open your Atom command palette (on a MAC shift+cmd+p) and search for 'style'.
Select the option for 'Application: Open Your Stylesheet'.
Add this style:
.pane.active {
.tab.active {
background-color: #00BCD4;
}
}
Save the style.less sheet and see your changes!
Note: This was tested while using the Atom Material UI theme, though it shouldn't matter which theme you're using.
that's my solution for atom 1.23.1
File > Stylesheed > styles.less
.texteditor.tab.sortable.active::before, .texteditor.tab.sortable.active, .texteditor.tab.sortable.active::after {
background-image: -webkit-linear-gradient(top, #35404a, #4A7FB2);
}
a beautiful blue gradient.
On selection of tab add a class="tab active"
and below style to your style.less file
.tab.active {
background-color:black;
}
Extending this for other tab types (e.g. settings, git, search results), I'm currently enjoying:
// mine tab color customizations:
.tab-bar .tab.active {
background-color: #00593c;
}
.tab-bar .tab.active[data-type$="Editor"] {
background-color: #103a3a;
}
at style.less file
I need to compile a LESS file and mix in some of the classes used in other files, but I don't want to print the whole contents of the imported files.
This looks pretty much like silent selectors in SASS.
How can this be achieved?
"muted" imports are not yet implemented in the current stable version of less (1.4.2 as of as of this post), but are planned for inclusion in 1.5.0. source #github issues
They don't seem to be working in the current beta, but when they are finally baked in, the implementation should like this:
PSEUDO CODE
reference.less:
.not-awesome {
color: red;
}
.awesome {
color: blue;
}
main.less:
#import (mute) "foo.less";
.more-awesome:extend(.awesome){
font-size:8em;
}
output:
.awesome,
.more-awesome {
color: blue;
}
.more-awesome {
font-size: 8em;
}
So lets say I set the background of 10 elements on the page to #base, then a user lands on the "Foo" page which has the class on the body of the page.
How does one update the #base via a css declaration? I understand that variables are local to a function (or css declaration) but there must be a method to do this! (would make styling alternative pages so easy!)
#base: #00000;
body.foo{
#base = #FFF;
}
LESS is a Preprocessor so...
...it all has to be precompiled into CSS ahead of time. That means all possible class combinations need to be made into valid CSS ahead of time. If you wanted something like this, you would need to do something like the following in your LESS:
LESS
#base: #000000;
.setColorOptions(#className: ~'', #base: #base) {
#classDot: escape(`('#{className}' == '' ? '' : '.')`);
#class: escape(#className);
body#{classDot}#{class} {
someElement {color: #base;}
.someClass {color: #base;}
// etc.
}
}
.setColorOptions();
.setColorOptions(foo, #fff);
.setColorOptions(bar, #ccc);
CSS Output
body someElement {
color: #000000;
}
body .someClass {
color: #000000;
}
body.foo someElement {
color: #ffffff;
}
body.foo .someClass {
color: #ffffff;
}
body.bar someElement {
color: #cccccc;
}
body.bar .someClass {
color: #cccccc;
}
Obviously if there were many elements and a lot of color dependent things going on, this could get big fast. Imagine 100 elements under body with three color variations as above, and you have 300+ lines of CSS, 200+ (two-thirds) of which do not apply to any one page. And this doesn't account for other changes, like background colors, etc. In such a case, it is best to set up different LESS files that import a different set of values for #base and build different style sheets to be loaded on the pages that need it. However, if you are just doing a small subset of color changes to a page, this could be a valid way to go.
There is no way to do that.
LESS has no way to know whether the selector body.foo will apply at compile time.