SASS - How can I assign two classes the same style except one property?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
1
I have a SASS stylesheet and I want to assign the same styles for two classes (.class and .otherclass) except for one property (before:) which should have another value for .otherclass.
This is the code I currently have:
.class, .otherclass {
p { font-family:arial;
&before:
@extend .class-one {}
}
~ .extraclass {}
}
Thanks
css sass styles
edited Jan 4 at 12:48
Turnip
29.1k116796
asked Jan 4 at 12:08
MarMar
10115
add a comment |
1
I have a SASS stylesheet and I want to assign the same styles for two classes (.class and .otherclass) except for one property (before:) which should have another value for .otherclass.
This is the code I currently have:
.class, .otherclass {
p { font-family:arial;
&before:
@extend .class-one {}
}
~ .extraclass {}
}
Thanks
css sass styles
edited Jan 4 at 12:48
Turnip
29.1k116796
asked Jan 4 at 12:08
MarMar
10115
1
You can't except to reset that property. If you want to exclude a property from an extend, don't include it in the original definition.
– Paulie_D
Jan 4 at 12:17
1
Also your existing code does not reflect your description of the required result.
– Paulie_D
Jan 4 at 12:18
add a comment |
1
1
1
I have a SASS stylesheet and I want to assign the same styles for two classes (.class and .otherclass) except for one property (before:) which should have another value for .otherclass.
This is the code I currently have:
.class, .otherclass {
p { font-family:arial;
&before:
@extend .class-one {}
}
~ .extraclass {}
}
Thanks
css sass styles
edited Jan 4 at 12:48
Turnip
29.1k116796
asked Jan 4 at 12:08
MarMar
10115
I have a SASS stylesheet and I want to assign the same styles for two classes (.class and .otherclass) except for one property (before:) which should have another value for .otherclass.
This is the code I currently have:
.class, .otherclass {
p { font-family:arial;
&before:
@extend .class-one {}
}
~ .extraclass {}
}
Thanks
css sass styles
css sass styles
edited Jan 4 at 12:48
Turnip
29.1k116796
asked Jan 4 at 12:08
MarMar
10115
edited Jan 4 at 12:48
Turnip
29.1k116796
asked Jan 4 at 12:08
MarMar
10115
edited Jan 4 at 12:48
Turnip
29.1k116796
edited Jan 4 at 12:48
Turnip
29.1k116796
edited Jan 4 at 12:48
Turnip
29.1k116796
29.1k116796
asked Jan 4 at 12:08
MarMar
10115
asked Jan 4 at 12:08
MarMar
10115
asked Jan 4 at 12:08
MarMar
10115
10115
1
You can't except to reset that property. If you want to exclude a property from an extend, don't include it in the original definition.
– Paulie_D
Jan 4 at 12:17
1
Also your existing code does not reflect your description of the required result.
– Paulie_D
Jan 4 at 12:18
add a comment |
1
You can't except to reset that property. If you want to exclude a property from an extend, don't include it in the original definition.
– Paulie_D
Jan 4 at 12:17
1
Also your existing code does not reflect your description of the required result.
– Paulie_D
Jan 4 at 12:18
1
1
You can't except to reset that property. If you want to exclude a property from an extend, don't include it in the original definition.
– Paulie_D
Jan 4 at 12:17
You can't except to reset that property. If you want to exclude a property from an extend, don't include it in the original definition.
– Paulie_D
Jan 4 at 12:17
1
1
Also your existing code does not reflect your description of the required result.
– Paulie_D
Jan 4 at 12:18
Also your existing code does not reflect your description of the required result.
– Paulie_D
Jan 4 at 12:18
add a comment |
2 Answers
2
active
oldest
votes
4
To be quite honest I'm not sure why u don't want to write two different selectors, or just overide some property in second one. E.g
.class1, .class2, .class3 {
&:before{
content: 'class';
}
}
.class2:before {
content: 'class2';
}Maybe using :not selector would be helpfull:https://www.w3schools.com/cssref/sel_not.asp
.class1, .class2, .class3 {
&:before {
content: 'class'
}
&:not(.class1):before{
content: 'class23'
}
}answered Jan 4 at 13:51
Andreew4x4Andreew4x4
197112
Thank you, I though overriding was ideal with CSS but as I know little SASS I'd though I should ask.
– Mar
Jan 4 at 17:01
1
Sass, Less and Stylus are just preprocessors of CSS. There is no reason to drop CSS properties when using SCSS. Pure CSS code is valid SCSS code :)
– Andreew4x4
Jan 9 at 9:03
add a comment |
0
Please try to look like:
.test{
$color:#f00;
}
.demo{
&:extend(.test);
}
answered Jan 4 at 12:57
Tushar KumawatTushar Kumawat
360411
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54038700%2fsass-how-can-i-assign-two-classes-the-same-style-except-one-property%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
4
To be quite honest I'm not sure why u don't want to write two different selectors, or just overide some property in second one. E.g
.class1, .class2, .class3 {
&:before{
content: 'class';
}
}
.class2:before {
content: 'class2';
}Maybe using :not selector would be helpfull:https://www.w3schools.com/cssref/sel_not.asp
.class1, .class2, .class3 {
&:before {
content: 'class'
}
&:not(.class1):before{
content: 'class23'
}
}answered Jan 4 at 13:51
Andreew4x4Andreew4x4
197112
Thank you, I though overriding was ideal with CSS but as I know little SASS I'd though I should ask.
– Mar
Jan 4 at 17:01
1
Sass, Less and Stylus are just preprocessors of CSS. There is no reason to drop CSS properties when using SCSS. Pure CSS code is valid SCSS code :)
– Andreew4x4
Jan 9 at 9:03
add a comment |
4
To be quite honest I'm not sure why u don't want to write two different selectors, or just overide some property in second one. E.g
.class1, .class2, .class3 {
&:before{
content: 'class';
}
}
.class2:before {
content: 'class2';
}Maybe using :not selector would be helpfull:https://www.w3schools.com/cssref/sel_not.asp
.class1, .class2, .class3 {
&:before {
content: 'class'
}
&:not(.class1):before{
content: 'class23'
}
}answered Jan 4 at 13:51
Andreew4x4Andreew4x4
197112
Thank you, I though overriding was ideal with CSS but as I know little SASS I'd though I should ask.
– Mar
Jan 4 at 17:01
1
Sass, Less and Stylus are just preprocessors of CSS. There is no reason to drop CSS properties when using SCSS. Pure CSS code is valid SCSS code :)
– Andreew4x4
Jan 9 at 9:03
add a comment |
4
4
4
To be quite honest I'm not sure why u don't want to write two different selectors, or just overide some property in second one. E.g
.class1, .class2, .class3 {
&:before{
content: 'class';
}
}
.class2:before {
content: 'class2';
}Maybe using :not selector would be helpfull:https://www.w3schools.com/cssref/sel_not.asp
.class1, .class2, .class3 {
&:before {
content: 'class'
}
&:not(.class1):before{
content: 'class23'
}
}answered Jan 4 at 13:51
Andreew4x4Andreew4x4
197112
To be quite honest I'm not sure why u don't want to write two different selectors, or just overide some property in second one. E.g
.class1, .class2, .class3 {
&:before{
content: 'class';
}
}
.class2:before {
content: 'class2';
}Maybe using :not selector would be helpfull:https://www.w3schools.com/cssref/sel_not.asp
.class1, .class2, .class3 {
&:before {
content: 'class'
}
&:not(.class1):before{
content: 'class23'
}
}.class1, .class2, .class3 {
&:before{
content: 'class';
}
}
.class2:before {
content: 'class2';
}.class1, .class2, .class3 {
&:before{
content: 'class';
}
}
.class2:before {
content: 'class2';
}.class1, .class2, .class3 {
&:before {
content: 'class'
}
&:not(.class1):before{
content: 'class23'
}
}.class1, .class2, .class3 {
&:before {
content: 'class'
}
&:not(.class1):before{
content: 'class23'
}
}answered Jan 4 at 13:51
Andreew4x4Andreew4x4
197112
answered Jan 4 at 13:51
Andreew4x4Andreew4x4
197112
answered Jan 4 at 13:51
Andreew4x4Andreew4x4
197112
answered Jan 4 at 13:51
Andreew4x4Andreew4x4
197112
197112
Thank you, I though overriding was ideal with CSS but as I know little SASS I'd though I should ask.
– Mar
Jan 4 at 17:01
1
Sass, Less and Stylus are just preprocessors of CSS. There is no reason to drop CSS properties when using SCSS. Pure CSS code is valid SCSS code :)
– Andreew4x4
Jan 9 at 9:03
add a comment |
Thank you, I though overriding was ideal with CSS but as I know little SASS I'd though I should ask.
– Mar
Jan 4 at 17:01
1
Sass, Less and Stylus are just preprocessors of CSS. There is no reason to drop CSS properties when using SCSS. Pure CSS code is valid SCSS code :)
– Andreew4x4
Jan 9 at 9:03
Thank you, I though overriding was ideal with CSS but as I know little SASS I'd though I should ask.
– Mar
Jan 4 at 17:01
Thank you, I though overriding was ideal with CSS but as I know little SASS I'd though I should ask.
– Mar
Jan 4 at 17:01
1
1
Sass, Less and Stylus are just preprocessors of CSS. There is no reason to drop CSS properties when using SCSS. Pure CSS code is valid SCSS code :)
– Andreew4x4
Jan 9 at 9:03
Sass, Less and Stylus are just preprocessors of CSS. There is no reason to drop CSS properties when using SCSS. Pure CSS code is valid SCSS code :)
– Andreew4x4
Jan 9 at 9:03
add a comment |
0
Please try to look like:
.test{
$color:#f00;
}
.demo{
&:extend(.test);
}
answered Jan 4 at 12:57
Tushar KumawatTushar Kumawat
360411
add a comment |
0
Please try to look like:
.test{
$color:#f00;
}
.demo{
&:extend(.test);
}
answered Jan 4 at 12:57
Tushar KumawatTushar Kumawat
360411
add a comment |
0
0
0
Please try to look like:
.test{
$color:#f00;
}
.demo{
&:extend(.test);
}
answered Jan 4 at 12:57
Tushar KumawatTushar Kumawat
360411
Please try to look like:
.test{
$color:#f00;
}
.demo{
&:extend(.test);
}
answered Jan 4 at 12:57
Tushar KumawatTushar Kumawat
360411
edited Jan 6 at 11:22
answered Jan 4 at 12:57
Tushar KumawatTushar Kumawat
360411
answered Jan 4 at 12:57
Tushar KumawatTushar Kumawat
360411
answered Jan 4 at 12:57
Tushar KumawatTushar Kumawat
360411
360411
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54038700%2fsass-how-can-i-assign-two-classes-the-same-style-except-one-property%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
You can't except to reset that property. If you want to exclude a property from an extend, don't include it in the original definition.
– Paulie_D
Jan 4 at 12:17
1
Also your existing code does not reflect your description of the required result.
– Paulie_D
Jan 4 at 12:18