I have this sass file with some variables that I'll use in my application, and I'm using Laravel Mix to compile them.
I'm putting all those variables in :root and this is the only styling in this element.
This is the faulty part:
--sg-card-produto-hover-bg: #c3c3c3;
--sg-card-produto-hover-box-shadow: 0 0 15px rgba(0, 0, 0, .8);
--sg-card-produto-hover-border-width: 2px;
--sg-card-produto-hover-border-style: solid;
--sg-card-produto-hover-border-color: var(--sg-cor-botao);
When I run npm run dev, or even npm run watch, it compiles just fine:
But when I run npm run prod, this is the result I'm getting (beautified):
Why is this happening?
I understand that it took the border-width, border-style and border-color parts of the variables and put them into a single property that is a reduced version of border, but they are variables and not properties!
Also, it didn't mix the variables in the part just above the previous code:
--sg-card-produto-bg: #d3d3d3;
--sg-card-produto-border-width: 2px
--sg-card-produto-border-style: solid;
--sg-card-produto-border-color: #222;
I believe this could be happening because of the introduced var() in --sg-card-produto-hover-border-color.
Edit:
It looks like var() is not the problem. I put a hex color and got the same result:
Edit 2:
I have renamed the variables as follows:
--sg-card-produto-hover-border_style: solid;
--sg-card-produto-hover-border_width: 2px;
--sg-card-produto-hover-border_color: var(--sg-cor-botao);
But now, the variables above this one (--sg-card-produto-border...) got mixed up instead:
It seems like the only the last ocurrences are being replaced.
Edit 3:
I noticed that it's mixing up only the last ocurrences of when it detects an expanded property.
So I used this quick fix:
--sg-card-produto-bg: #d3d3d3;
--sg-card-produto-border-width: 2px;
--sg-card-produto-border-style: solid;
--sg-card-produto-border-color: #222;
--sg-card-produto-hover-bg: #c3c3c3;
--sg-card-produto-hover-box-shadow: 0 0 15px rgba(0, 0, 0, .8);
--sg-card-produto-hover-border-style: solid;
--sg-card-produto-hover-border-width: 2px;
--sg-card-produto-hover-border-color: var(--sg-cor-botao);
border-style: none;
border-width: 0;
border-color: transparent;
And this is the result:
Weird, right?
It looks like the minifier is naively converting *border-* properties to shorthand. You can sidestep the issue by using a different naming scheme (e.g. --sg-card-produto-border-hover-color instead of --sg-card-produto-hover-border-color)
Related
Hello I know this might be a duplicate question but I've tried everything I was able to find on the internet but nothing works.
following these suggestions in this link
both functions rgba() and rgb() don't reflect any changes when using sass or css variables in them.
--color: 1,60,255;
// usage
border: 1px solid rgba(var(--color), 0.4);
doesn't work
border: 1px solid RGBA(var(--color), 0.4);
doesn't work either even after capitalizing the letters
border: #{'1px solid rgba(var(--color), 0.4)'};
sass interpolation doesn't work too
only this one works
border: 1px solid RGBA(1, 60, 255, 0.4);
but if I want to start using this last solution, I won't be able to use the variables and if something changes I'll have to do so much dummy work.
When you use css variables (custom properties) you need to apply them to an element (:root if you want to declare them globally). You can't simply declare them in the way you would declare a Sass variable. So in your example it would look something like:
:root {
--color: rgba(1, 60, 255, .4);
}
div {
border: 1px solid var(--color);
}
In an web project that I'm working on we use JavaScript to render big, complex web pages. We are currently working on a way to be able to move parts of the page to another tab/ send the content as a string and render the same content on another computer/browser looking just as the original page.
We could use the same scripts to rerender the page but when rerendering performance is of utmost importance and therefore we want to avoid it. So our approach has been to iterate over the relevant elements and abstract the elements together with their current styling using getComputedStyle(). This method works well, however we have encountered some problems including pseudoelements.
To include them we have gotten the styling using
getComputedStyle(element, ':after');
which works well in Chrome. However, In IE and Microsoft Edge this only works most of the cases. One case that does not work is if the pseudo element has a border. Then the border-style is not included in the CSSStyleDeclaration returned from the function.
So my questions are:
Are there any better ways to get the pseudo element stylings that bypasses this problem?
Is there any other(better) approach to the problem at hand?
Minimal example reproducing the error in fiddle. When clicking the button Chrome outputs:
border-bottom: 1px solid rgb(255, 0, 0)
border-bottom-color: rgb(255, 0, 0)
border-bottom-style: solid
border-bottom-width: 1px
while Edge outputs:
border-bottom:
border-bottom-color: rgb(255, 0, 0)
border-bottom-style: none
border-bottom-width: 1px
I'm sure you have solved this another way by now... but as the problem still exists today in Edge; here is a work-around for it.
The issue is that for border-style IE is returning the parent elements value instead of the pseudo elements, so if you set the style there, and give it no width, the pseudo element will inherit it. Extracting from your fiddle to example...
#pseudo-element-test-id {
position: relative;
border-bottom: 0 solid;
}
#pseudo-element-test-id::after {
position: absolute;
top: 15px;
left: 0;
content: " ";
width: 150px;
border-bottom: 1px solid red;
}
What is the best CSS practice to achieve a border on all sides of a container, apart from, for example, the bottom?
The border property cannot specify different values for each side.
Option 1: Overwriting Rules
border: 1px solid red;
border-bottom: none;
Seems that an extra computation is needed — similar drawbacks as CSS resets (at least philosophically).
Option 2: Setting Specific Rules
border-top: 1px solid red;
border-left: 1px solid red;
border-right: 1px solid red;
Might be more correct (in terms of CSS "semantics")
But if you want to change the border specifics, then it'll require
multiple changes (harder to manage).
Actually it totally depends on you, what is more convenient to you, it also depends on some state like if I want the color of all borders to be same I'll go for 1st but If I think I need to change the colors of each side of the border in near future I'll go with the second 1, but for now, I'll stick to first option
Reasons:
Less CSS to be stated
Specifically it shows that I want border-bottom as none
As you said I don't need to change each and every property: value if I need any changes
If you say proper semantics, proper semantics define very specifically like
border-color: /*Whatever*/;
border-width: /*Whatever*/;
border-style: /*Whatever*/;
Now am sure you don't want to be this specific
If you only want to specify the values once, you can specify the color and width for all, then the style specifically for the sides:
border-color: red;
border-width: 1px;
border-style: solid solid none solid;
I've searched the W3C CSS2 Spec for the name of the feature that allows us to shrink duplicate values down to one or two like:
margin: 1px 1px 1px 1px; -> margin: 1px;
padding: 1px 1px 2px 2px; -> padding: 1px 2px;
But I'm still not sure what the exact name for this is. Does anyone know what this is called? Also, can you list some other properties that follow this behavior (besides the obvious ones like margin, padding, and border-radius). I'm writing a regex that matches these properties and would like to include as many them as possible!
Thanks!
margin is a shorthand property for margin-left, margin-top, etc.
margin: 1px 1px 1px 1px; and margin: 1px; are both shortcuts. In the later one for values collapsed into one. So collapsing probably.
As of other shorthands:
size property (from printing module)
border-width, border-color and border-style
background-position, background-size, etc.
These are called CSS shorthand properties.
A list of some useful ones can be found here: http://cssdog.com/css_shortcuts.html
If compiling a list of as many as possible is your goal, here is a guide: http://www.dustindiaz.com/css-shorthand/
For example in the following from sass. Is the = just a shorthand for #mixin? I can't seem to find any info for this on google
=multi-line-button($base-color)
+background-clip('padding-box')
border-width: 1px
+border-radius(6px)
border-style: solid
color: white
display: block
margin: 0.2em auto
padding: 12px 15px
text-align: center
text-decoration: none
yes, this is the way to define mixins in Sass
dunno if this article will help at all
EDIT:
The following are identical
#mixin red-text
color: #ff0000
=red-text
color: #ff0000
Just add +red-text to your selectors
"#mixin foobar" is the newer SCSS syntax (more CSS-like) and "=foobar" is the older SASS syntax (more HAML-like). I'm fairly new to SASS and started with SCSS, but both are supported (probably not in the same stylesheet) and both will continue to be supported.