Is there a way to nest backwards in scss?
In css when I want to override style becourse of IE or other browser specific styles I like the selector to be right after the style it selector it overrides. Like this
css
.class-a .class-b{ color: pink }
.ie6 .class-a .class-b{ color: blue}
Is that possible in scss? Because right now I write it like this (and I dont like it)
scss
.class-a{
.class-b { color: pink }
.othercss { bla bla bla: sdfsd }
.fsdfsd { dfsdfs: sdfsd }
}
}
body.ie7 .class-a .class-b{ color:blue }
You're looking for the & parent selector.
.class-a{
.class-b {
color: pink;
.ie7 & {
color: blue;
}
}
.othercss { bla bla bla: sdfsd }
.fsdfsd { dfsdfs: sdfsd }
}
http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#referencing_parent_selectors_
I haven't found this possible, no.
On a side note if you need to add too many styles addressed directly to IE7+8 etc. there's most likely a better cross-browser way to do it, I haven't found it to be a problem having to do a few old IE specific nesting trees in my projects so far.
Related
I have switched from Dreamweaver CS6 to Dreamweaver CC 2021. CS6 allowed micro-selection of code highlighting colors; not so with 2021. The template code in 2021 is an indistinct grey on a black background, which is my preference for using the program. Please see http://artfromny.com/dwscreen.jpg
My problem is two-fold; I am relatively uneducated in code other than HTML and CSS (and far from expert there), and I have followed the Dreamweaver instructions at https://helpx.adobe.com/il_en/dreamweaver/using/customize-code-coloring.html to no avail.
Creating a copy of Raven, which I then renamed Ruby Blue, I appended the code from my Brackets Ruby Blue to the palce in main.less in Dreamweaver which indicated that was the proper location for any additional code. I also changed every instance of the main.less file that contained the word "comment" to display in yellow; that worked correctly for regular comments but not comments that contained template code. I was able to change the other selectors, tags, etc but could not change the template code.
The code I used to attempt to change the template comment code is below, followed by the code specifying all the colors of the theme. Any suggestions would be greatly appreciated. Image of the screen at http://artfromny.com/dwscreen.jpg
.cm-templateComment, .cm-templateAttrVal {
color: #98fb98;
}
.cm-comment {
color: #comment;
}
.cm-number {
color: #rb-lightblue;
}
.cm-string {
color: #rb-orange;
}
.cm-string.cm-property {
color: #rb-white;
}
.cm-error {
color: #rb-red !important;
}
.cm-meta,.cm-keyword,.cm-bracket {
color: #rb-magenta;
}
.cm-atom,.cm-link {
color: #rb-yellow;
}
.cm-attribute,.cm-property {
color: #66d9ef;
}
.cm-variable,.cm-variable-3,.cm-qualifier,.cm-def,.cm-operator {
color: #rb-white;
}
.cm-variable-2,.cm-tag {
color: #brightgreen;
}
.cm-builtin,.cm-special {
color: #ff9d00;
}
thanks in advance
Art
Resolved - I found a different copy of RubyBlue css - Theme RubyBlue Copyright (c) 2014 Eric Johnson
This file contained a better color for the template tags, so I did not pursue it any further.
I have a Tabulator table with this CSS styling for the headers:
.mytabulator.green .tabulator-header
.tabulator-col {
background: #92d050;
}
.mytabulator.wrapped-headers .tabulator-header
.tabulator-col
.tabulator-col-content
.tabulator-col-title {
white-space: normal;
}
Which makes the headers look like this:
... but how do I also style the header background green?
By background I mean this part:
I have tried multiple "Column & header" selectors and nothing works.
Thanks,
Matic
you need to add a background colour to the tabulator-header element too:
.mytabulator .tabulator-header, .mytabulator .tabulator-header .tabulator-col {
background: #92d050;
}
Is there a way to manage the font size of the function definition hover on ST3?
Here's what I see:
I've tried adding font.size to the theme for this element which is popup_control html_popup according to docs but it doesn't appear to accept this.
Update: I found that pasting this CSS in my color theme plist addresses the list/links but not the title. I have tried to use a plugin like ScopeHunter to find the context of the 'definitions' title but it doesn't work for popups.
<key>popupCss</key>
<string><![CDATA[
html {
background-color: #404238;
color: #F8F8F2;
}
a {
color: #66D9EF;
}
.error, .deleted {
color: #F92672;
}
.success, .inserted {
color: #A6E22E;
}
.warning, .modified {
color: #FD971F;
}
]]></string>
The best thing to do is look at the HTML that is used in the popup, to help decide what CSS selectors to use in the color scheme's popupCss to change the appearance of the popup.
In this case, the code is in Packages/Default/symbol.py, which you can view using https://packagecontrol.io/packages/PackageResourceViewer:
<body id=show-definitions>
<h1>Definition%s:</h1>
<p>
...
</p>
</body>
So you can use the following CSS in your popupCSS to target it and change the color of the "Definitions" text, for example - to prove the selector is working (the official recommendation is to use the id from the body tag):
#show-definitions h1 {
color: #b3bc20;
}
however, specifying the font-size seems to have no effect, at least in build 3154, so I think there is a bug in ST.
Is it possible to add a before element in CSS like this:
ul {
li:before {
content: url('../icons/fancy-symbol.svg');
}
}
and have access to the svg's objects (e.g. a specific line or rectangle) and properties (e.g. the stroke-width, strike and fill color)?
Or is there a workaround for these kind of situations?
The use case is to color some lines on hover and animate the svg on click.
You can specify a fragment on the SVG URL, like ../icons/fancy-symbol.svg#red, then have CSS inside the file react to that:
<style>
#red:target ~ .some-element-here {
fill: red;
}
</style>
This won't let you specify properties dynamically, but it can be useful for interaction states, especially with a preprocessor.
Alternatively, if the SVG file is small enough, you can use preprocessors to change properties in a Data URI, like with sass-svg, or manually:
.li:before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'
fill='#{$color}'%3E...");
}
(By the way, it might be easier to use ul { list-style-image: url(...) } instead of pseudo-elements.)
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
}
}
}