I have the following scss styles defined in a separate file
.radio-button-focused {
background-color: $PURPLE;
text-align: left;
opacity: 1;
width: px-to-rem(1248px);
margin-bottom: px-to-rem(15px);
#include truncate;
}
.radio-button {
background-color: $BLACK;
text-align: left;
opacity: 1;
width: px-to-rem(1248px);
margin-bottom: px-to-rem(15px);
#include truncate;
}
Both of them are being applied to a button
But the problem is that radio button is overwritting the color of radio-button-focused
I understand that I could use !important , or just use one of them instead of using them both at the same time. But if I was forced to use both, can something else be done to fix this?
The literal order in the CSS file matters. If two rules have the same specificity, the last one is applied. Move .radio-button before .radio-button-focused. You could also make your focused selector more specific. .radio-button.radio-button-focused for example.
Here's class B before A as an example.
.b
{
color: red;
}
.a
{
color: blue;
}
<div class="a b">Hi</div>
And here's A before B.
.a
{
color: blue;
}
.b
{
color: red;
}
<div class="a b">Hi</div>
Related
I have a problem about "#extend" directive in SCSS.
.header {
.introduction-group {
text-align: center;
color: $white;
width: 70%;
}
.about {
&__description-group {
#extend .introduction-group;
This code block does not work. However,
.header {
&__introduction-group {
text-align: center;
color: $white;
width: 70%;
}
.about {
&__description-group {
#extend .header__introduction-group;
Second one works. Why?
Thank you.
As mentioned here nested classes won't be applied with #extend. Your second code block targets the specified class including the parent prefix. The first code block doesn't, it only targets the nested class.
I made a small codepen demo to illustrate the problem in a simple way. Make sure you checkout the Sass docs for a more comprehensive explanation!
<h1 class="wrong">Test style gone wrong</h1>
<h1 class="right">Test style gone right</h1>
.test {
.nested {
color: red;
}
&-nested {
color: red;
}
}
.wrong {
#extend .test;
#extend .nested;
}
.right {
#extend .test-nested;
}
I have this scss code:
button.green{
background-color: $green;
.current {
color: $white;
}
}
I want to apply two classes to my button <button class="green current"></button> but my scss code just does not work. How would you fix that in a proper scss manner?
Also tried that with no luck:
button {
.green{
background-color: $green;
}
& .current {
color: $white;
}
}
Nearly correct, missing "&" in your nesting to connect button.green and .current.
The css output of your scss is:
button.green > .current
meaning, you style an element "current" within its parent "button.green".
Correct:
button.green{
background-color: $green;
&.current {
color: $white;
}
}
Which outputs:
button.green.current
.green.current {
background-color: $green;
color: $white;
}
This will apply both class!!
I’m trying to reduce some Stylus code using its mixins.
In some particular cases I need a class as a parameter. Let’s we’ve got:
.parent:hover .child
color: lighten(red, -25%)
.child
color red
I’d like to have a mixin which gets both classes as parameters.
I can’t find a way from the docs. ((
You can achieve this with interpolation: http://stylus-lang.com/docs/interpolation.html
Here's an example codepen: https://codepen.io/webdevdani/pen/POVLpr
Code example from codepen:
/* Stylus */
.box {
height: 2rem;
width: #height;
background-color: blue;
padding: 1rem;
}
.red-box {
background-color: red;
}
$blockColor(parentClass, childClass) {
{parentClass} {
background-color: green;
{childClass} {
background-color: yellow;
}
}
}
$blockColor('.box', '.red-box');
<div class="box">
<div class="box red-box"></div>
</div>
Question: With SCSS, can we specify two different .main selectors? Say I want another one with margin-top: 50px while also inheriting all other conditions
I have inherited some SCSS from someone else. I have the following SCSS structure:
.main {
margin-top: 74px;
ul.tabs {
position: relative;
li.tab {
/*The rest of nested structure*/
}
}
}
It continues to nest (unfortunately) for many layers.
I have some other options (splitting the structure in two) which is a simple fix. Just curious if there's something better.
Thanks!
You should use a mixin:
#mixin sharedStyles{
//shared nested styles go here
}
.parentA{
margin-top:74px;
#include sharedStyles;
}
.parentB{
margin-top: 50px;
#include sharedStyles;
}
Here is a gist that illustrates the concept:
https://gist.github.com/Ryan-Haines/ba10888d0828d394851d3da6063f70bb
I recommend using sassmeister for rapid prototyping:
https://www.sassmeister.com
If you use a placeholder, as long as one selector is not inside a media query, it should group them together in the CSS. Ie
%mainStyles {
border: 1px solid black;
}
.main1 {
margin-top: 75px;
#extend %mainStyles;
}
.main2 {
margin-top: 50px;
#extend %mainStyles;
}
Should generate
.main1, .main2 {
border: 1px solid black;
}
.main1 {
margin-top: 75px;
}
.main2 {
margin-top: 50px;
}
I am trying to learn SASS. I got this snippet working but the generated css is awful in my opinion. I would like all this css to go in te same .container{ }. Not three different as shown below.
SASS:
.container{
#extend %clearfix;
#extend %text-truncate;
#include border-radius(10px);
}
Genereted css:
.container{
...clear fix
}
.container{
...text-truncate
}
.container{
...clear border-radius
}
What I want:
.container{
...clear fix
...text-truncat
...clear border-radius
}
This is the nature of #extend. If you change your extend classes to ordinary classes, the way it works the way it does is revealed.
#mixin my-mixin() {
padding: 1em;
}
.a {
color: red;
}
.b {
border: 1px solid;
}
.foo {
#extend .a;
#extend .b;
#include my-mixin();
}
Compiles to:
.a, .foo {
color: red;
}
.b, .foo {
border: 1px solid;
}
.foo {
padding: 1em;
}
Using an extend only class simply suppresses the name from the output. If your extend classes are not intended for reuse, then they are better suited as a mixin.
See also: https://codereview.stackexchange.com/a/27910/26722