The SASS documentation states:
Sass supports standard multiline CSS comments with /* */, as well as single-line comments with //. The multiline comments are preserved in the CSS output where possible, while the single-line comments are removed.
That seems not to be always true.
/* what an ugly declaration */
body
color: green
will be compiled to:
/* what an ugly declaration */
body {
color: green; }
but if I put the comment after a property:
body
color: green /* what an ugly color */
it will be removed:
body {
color: green; }
Can I change this behaviour?
Try adding /*! your comment code */ in your comment.
Example:
body{
color: green; /*! What an Ugly color */
}
This should help you.
Related
I utilised the BEM method and my <div> is showing the css from the Block and Modifier, but not the Element
i.e. the css for c-banner(block) and --warning(modifier) is appearing but not __icon(element).
I know that the color of the modifier is appearing because I tried changing it to another color and it appears on the UI.
Eg:
Currently:
&--warning {
color: #D9822B
}
Edited:
&--warning {
color: black
}
Once changed, the icon of --warning will show up with a black color on the UI.
However, the padding-right of __icon doesn't ever get applied.
c-banner {
/* Block CSS Properties */
&__icon {
padding-right: 12px;
&--warning { /* Used for warning purposes */
color: #D9822B;
}
&--primary { /* Used for general information */
color: #137CBD;
}
&--success { /* Used for verified access */
color: #0F9960;
}
&--danger { /* Used as a hard stop */
color: #DB3737;
}
}
}
I'm genuinely perplexed as to why the padding-right of __icon does not get applied but the color of --warning is
All you are missing is:
.c-banner ..... the dot before the classname
Also, for padding to work they have to be inside --warning because you are chaining to form the full selector and there is no selector that ends with __icon
You can style material-icons if you want to affect multiple:
.c-banner {
.material-icons { padding-right: 12px; }
/* can also do [class*="__icon"] but may be less predictable */
&__icon {
/* rest of the scss */
}
}
I want to create a component and expose certain properties that could be overridden by parent elements.
Here's an example. Let's say I'm creating a button which has its own colors, but allows to change its background color if there's a --button-bg-color defined:
.my-button {
--bg-color: blue;
/* lots of other css... */
/**
* here I assume that there might be a --button-bg-color defined,
* but I have a fallback to my own --bg-color variable
*/
background-color: var(--button-bg-color, var(--bg-color));
}
The problem with the code above is that the --button-bg-color variable is referenced somewhere deep down the styling.
What I wish I could do is the declare somewhere up top that I might want to use this variable. This would tell me that this component expects to be overridden.
Maybe something like this?
.my-button {
--button-bg-color: undefined; /* is there something like undefined? */
--bg-color: blue;
/* the rest of the code is the same */
}
Oh well, I just realized that we can do this:
.my-button {
--bg-color: var(--button-bg-color, blue); /* inherit with fallback */
/* lots of other css... */
background-color: var(--bg-color);
}
This way there's also less repetition.
Yesterday I decided to try Polymer 1.0 and I'm already facing difficulties when trying to styling the paper-toolbar.
The documentation says that the background colour can be changed by using:
--paper-toolbar-background
But how can I use it on CSS?
I tried the following:
paper-toolbar {
--paper-toolbar-background: #e5e5e5;
}
Also this:
paper-toolbar {
--paper-toolbar {
background: #e5e5e5;
}
}
But neither worked. What is the correct way to do it?
Thanks.
If you are styling it on your main page, then you have to apply styles using <style is='custom-style'>. This is to make Custom CSS Properties work.
Applying is relatively easy. paper-toolbar provides 2 custom properties and one mixin. --paper-toolbar-background is a property that changes the background color of the toolbar while --paper-toolbar-color changes its foreground color. --paper-toolbar is a mixin applied to the toolbar.
To use these properties is just the same as applying styles in your elements. As an example
<style is="custom-style">
paper-toolbar {
--paper-toolbar-background: #00f; /* changes the background to blue*/
--paper-toolbar-color: #0f0; /* changes the foreground color to green */
--paper-toolbar: {
font-size: 40px; /* Change default font size */
}; /* Notice the semicolon here */
}
</style>
I couldn't find a solution to this problem either until recently. I have two toolbars and I didn't want to change the CSS for all toolbars just the header toolbar.
To change the CSS for every toolbar, in your external css file add the following:
paper-toolbar.paper-toolbar-0 {
background: orange;
color: red;
}
However, that doesn't address the problem. To change a single paper toolbar based on a class like the following:
<paper-toolbar class="header">
...
</paper-toolbar>
The above uses the class called "header" so in my CSS I added:
paper-toolbar.header {
background: orange;
color: red;
}
... and it worked! Yay! That means with this you should be able to override any CSS of any of the other elements doing the same thing. This is completely untested but I think it should work like:
<elementName>.<classname> {
...
}
Hope this all helps!
I was playing around right-clicking my line numbers in Dreamweaver, trying to bookmark a line.
I noticed this menu entry:
What is the Caio Hack? With alert('hi'); highlighted, this is the result:
It's an old CSS hack.
"Caio Hack is a simple CSS comments-based hack used in 'inline' and
'external' CSS declarations to hide information from Netscape 4"
For example, this code hides the .foo2 selector to Netscape 4:
.foo1
{
color: green;
background-color: yellow;
}
/*/*/
.foo2
{
color: red;<code></code>
}
/* */
.foo3
{
color: blue;
}
Source: http://en.wikibooks.org/wiki/Cascading_Style_Sheets/Hacks_and_Filters/Caio_Hack
The Caio Hack is named after its discoverer, Caio Chassot.
It is a CSS hack for hiding rules from Netscape 4, exploiting a bug in NN4's parser.
By opening a comment using /*/*/, all subsequent CSS would be ignored by NN, because it thinks the comment didn't close.
To end the block, you'd use /* */.
For example:
.foo1
{
color: green;
background-color: yellow;
}
/*/*/
.foo2
{
color: red;
}
/* */
.foo3
{
color: blue;
}
More info at:
Wikibooks
CSS Discuss
http://css-discuss.incutio.com/wiki/Caio_Hack
It hides CSS codes from Netscape4 and sometimes Opera.
Is it possible to remove the IE-specific behavior CSS property via a more specific rule or the !important declaration? Example:
.a-rule
{
behavior: url(/some.htc);
}
.a-rule.more-specific
{
behavior: /*no HTC*/
}
I realize that overriding CSS properties is undesirable, but I'm stuck here.
On Edit: I'm not sure where people are getting confused about this question. For all purposes, you can consider this already being an IE specific stylesheet. I'm asking how, if .a-rule above exists and is immutable, how can one remove the behavior via a more specific rule? A standard CSS equivalent would be:
.a-rule
{
border: 1px solid black;
}
.a-rule.more-specific
{
border: 0 none;
}
One can reset the border property for a subset of elements via a more specific rule. I'm asking how to reset the behavior property in an analogous way.
The default value is "none". See:
What is the *correct* way to unset the behavior property in CSS?
The solution:
.a-rule
{
behavior: url(/some.htc);
}
.a-rule.more-specific
{
behavior: none;
}
.a_rule {
border: 1px solid black; /* we know border is black */
behavior: url(/some.htc) /* we know something happen inside some.htc */
}
.a_rule.more-specific {
border: 0 none; /* we remove the border */
behavior: url(/some.htc) /* we remove something inside some.htc */
}
use different .htc file
Maybe use conditional tags for IE in your head
<!--[if IE]>
<style type="text/css">
.a-rule {
behavior: url(/some.htc);
}
</style>
<![endif]-->