Root class is not read by SASS, only those with ampersand are
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I have a sass/css class with an ampersand, this is used in conjunction with VueJS. What I was wondering is that the CSS attribute assigned on the ampersand is working but the root element itself isn't detected by the browser.
<style lang="scss" scoped>
.curved-input {
border-radius: 5px;
height: 50px;
margin-right: 1rem;
&__lg {
width: 300px;
}
&__sm {
width: 150px;
}
}
</style>
Here's the explanation, the browser seem to detect the width: 300px or width: 150px but not the border-radius, height, margin-right.
<input name="city" class="curved-input__lg" type="text" placeholder="Palau Ujong, Singapore"/>
The textbox width changed but other attributes are not read by the browser when you look at them on the browser tools. Am I missing something here?
My goal is not to code it as class="curved-input curved-input__lg but rather only use curved-input__lg or curved-input__sm while inheriting the parent attributes (curved-input).
css vue.js sass
asked Jan 4 at 12:12
The BassmanThe Bassman
409817
add a comment |
I have a sass/css class with an ampersand, this is used in conjunction with VueJS. What I was wondering is that the CSS attribute assigned on the ampersand is working but the root element itself isn't detected by the browser.
<style lang="scss" scoped>
.curved-input {
border-radius: 5px;
height: 50px;
margin-right: 1rem;
&__lg {
width: 300px;
}
&__sm {
width: 150px;
}
}
</style>
Here's the explanation, the browser seem to detect the width: 300px or width: 150px but not the border-radius, height, margin-right.
<input name="city" class="curved-input__lg" type="text" placeholder="Palau Ujong, Singapore"/>
The textbox width changed but other attributes are not read by the browser when you look at them on the browser tools. Am I missing something here?
My goal is not to code it as class="curved-input curved-input__lg but rather only use curved-input__lg or curved-input__sm while inheriting the parent attributes (curved-input).
css vue.js sass
asked Jan 4 at 12:12
The BassmanThe Bassman
409817
Well you can split the classes intocurved-input,__lgas two different classes
– Viira
Jan 4 at 12:31
add a comment |
I have a sass/css class with an ampersand, this is used in conjunction with VueJS. What I was wondering is that the CSS attribute assigned on the ampersand is working but the root element itself isn't detected by the browser.
<style lang="scss" scoped>
.curved-input {
border-radius: 5px;
height: 50px;
margin-right: 1rem;
&__lg {
width: 300px;
}
&__sm {
width: 150px;
}
}
</style>
Here's the explanation, the browser seem to detect the width: 300px or width: 150px but not the border-radius, height, margin-right.
<input name="city" class="curved-input__lg" type="text" placeholder="Palau Ujong, Singapore"/>
The textbox width changed but other attributes are not read by the browser when you look at them on the browser tools. Am I missing something here?
My goal is not to code it as class="curved-input curved-input__lg but rather only use curved-input__lg or curved-input__sm while inheriting the parent attributes (curved-input).
css vue.js sass
asked Jan 4 at 12:12
The BassmanThe Bassman
409817
I have a sass/css class with an ampersand, this is used in conjunction with VueJS. What I was wondering is that the CSS attribute assigned on the ampersand is working but the root element itself isn't detected by the browser.
<style lang="scss" scoped>
.curved-input {
border-radius: 5px;
height: 50px;
margin-right: 1rem;
&__lg {
width: 300px;
}
&__sm {
width: 150px;
}
}
</style>
Here's the explanation, the browser seem to detect the width: 300px or width: 150px but not the border-radius, height, margin-right.
<input name="city" class="curved-input__lg" type="text" placeholder="Palau Ujong, Singapore"/>
The textbox width changed but other attributes are not read by the browser when you look at them on the browser tools. Am I missing something here?
My goal is not to code it as class="curved-input curved-input__lg but rather only use curved-input__lg or curved-input__sm while inheriting the parent attributes (curved-input).
css vue.js sass
css vue.js sass
asked Jan 4 at 12:12
The BassmanThe Bassman
409817
asked Jan 4 at 12:12
The BassmanThe Bassman
409817
edited Jan 4 at 12:28
The Bassman
asked Jan 4 at 12:12
The BassmanThe Bassman
409817
asked Jan 4 at 12:12
The BassmanThe Bassman
409817
asked Jan 4 at 12:12
The BassmanThe Bassman
409817
409817
Well you can split the classes intocurved-input,__lgas two different classes
– Viira
Jan 4 at 12:31
add a comment |
Well you can split the classes intocurved-input,__lgas two different classes
– Viira
Jan 4 at 12:31
Well you can split the classes into
curved-input , __lg as two different classes– Viira
Jan 4 at 12:31
Well you can split the classes into
curved-input , __lg as two different classes– Viira
Jan 4 at 12:31
add a comment |
3 Answers
3
active
oldest
votes
You could use @extend to avoid adding additional classes to your markup or (some) duplicate code, if that is your goal.
.curved-input {
border-radius: 5px;
height: 50px;
margin-right: 1rem;
}
.curved-input {
&__lg {
@extend .curved-input;
width: 300px;
}
&__sm {
@extend .curved-input;
width: 150px;
}
}
Which would generate the following CSS
.curved-input,
.curved-input__sm,
.curved-input__lg {
border-radius: 5px;
height: 50px;
margin-right: 1rem;
}
.curved-input__lg {
width: 300px;
}
.curved-input__sm {
width: 150px;
}
answered Jan 4 at 12:34
TurnipTurnip
29.1k116796
Great answer! Thanks..
– The Bassman
Jan 4 at 12:36
add a comment |
This is because you have to declare the curved-input class as well. So your class attribute will look like class="curved-input curved-input__lg".
If you'd write out your CSS in full you'll get something like this:
.curved-input {
border-radius: 5px;
height: 50px;
margin-right: 1rem;
}
.curved-input__lg {
width: 300px;
}
.curved-input__sm {
width: 150px;
}
With this in mind you'll see that you have to add the class curved-input as well.
answered Jan 4 at 12:23
Kevin KoobsKevin Koobs
414
Yes, exactly it works like that when I set it ascurved-input curved-input__lgbut is there a way to revise this that I'll just set my class ascurved-input__lgorcurved-input__smbut it will inherit thecurved-inputclass?
– The Bassman
Jan 4 at 12:25
You can by add the border-radius, height and margin to the__lgand__smclasses. But then you'll be surpassing the use of BEM like you're doing here. So I recommend usingcurved-input curved-input__lgas your class attribute
– Kevin Koobs
Jan 4 at 12:30
add a comment |
Well if you want to write it like that, try to change the first line to:
[class*="curved-input"]
answered Jan 4 at 13:32
Lukáš Gibo VaicLukáš Gibo Vaic
407414
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
});
}
});
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%2f54038762%2froot-class-is-not-read-by-sass-only-those-with-ampersand-are%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
You could use @extend to avoid adding additional classes to your markup or (some) duplicate code, if that is your goal.
.curved-input {
border-radius: 5px;
height: 50px;
margin-right: 1rem;
}
.curved-input {
&__lg {
@extend .curved-input;
width: 300px;
}
&__sm {
@extend .curved-input;
width: 150px;
}
}
Which would generate the following CSS
.curved-input,
.curved-input__sm,
.curved-input__lg {
border-radius: 5px;
height: 50px;
margin-right: 1rem;
}
.curved-input__lg {
width: 300px;
}
.curved-input__sm {
width: 150px;
}
answered Jan 4 at 12:34
TurnipTurnip
29.1k116796
Great answer! Thanks..
– The Bassman
Jan 4 at 12:36
add a comment |
You could use @extend to avoid adding additional classes to your markup or (some) duplicate code, if that is your goal.
.curved-input {
border-radius: 5px;
height: 50px;
margin-right: 1rem;
}
.curved-input {
&__lg {
@extend .curved-input;
width: 300px;
}
&__sm {
@extend .curved-input;
width: 150px;
}
}
Which would generate the following CSS
.curved-input,
.curved-input__sm,
.curved-input__lg {
border-radius: 5px;
height: 50px;
margin-right: 1rem;
}
.curved-input__lg {
width: 300px;
}
.curved-input__sm {
width: 150px;
}
answered Jan 4 at 12:34
TurnipTurnip
29.1k116796
Great answer! Thanks..
– The Bassman
Jan 4 at 12:36
add a comment |
You could use @extend to avoid adding additional classes to your markup or (some) duplicate code, if that is your goal.
.curved-input {
border-radius: 5px;
height: 50px;
margin-right: 1rem;
}
.curved-input {
&__lg {
@extend .curved-input;
width: 300px;
}
&__sm {
@extend .curved-input;
width: 150px;
}
}
Which would generate the following CSS
.curved-input,
.curved-input__sm,
.curved-input__lg {
border-radius: 5px;
height: 50px;
margin-right: 1rem;
}
.curved-input__lg {
width: 300px;
}
.curved-input__sm {
width: 150px;
}
answered Jan 4 at 12:34
TurnipTurnip
29.1k116796
You could use @extend to avoid adding additional classes to your markup or (some) duplicate code, if that is your goal.
.curved-input {
border-radius: 5px;
height: 50px;
margin-right: 1rem;
}
.curved-input {
&__lg {
@extend .curved-input;
width: 300px;
}
&__sm {
@extend .curved-input;
width: 150px;
}
}
Which would generate the following CSS
.curved-input,
.curved-input__sm,
.curved-input__lg {
border-radius: 5px;
height: 50px;
margin-right: 1rem;
}
.curved-input__lg {
width: 300px;
}
.curved-input__sm {
width: 150px;
}
answered Jan 4 at 12:34
TurnipTurnip
29.1k116796
answered Jan 4 at 12:34
TurnipTurnip
29.1k116796
answered Jan 4 at 12:34
TurnipTurnip
29.1k116796
answered Jan 4 at 12:34
TurnipTurnip
29.1k116796
29.1k116796
Great answer! Thanks..
– The Bassman
Jan 4 at 12:36
add a comment |
Great answer! Thanks..
– The Bassman
Jan 4 at 12:36
Great answer! Thanks..
– The Bassman
Jan 4 at 12:36
Great answer! Thanks..
– The Bassman
Jan 4 at 12:36
add a comment |
This is because you have to declare the curved-input class as well. So your class attribute will look like class="curved-input curved-input__lg".
If you'd write out your CSS in full you'll get something like this:
.curved-input {
border-radius: 5px;
height: 50px;
margin-right: 1rem;
}
.curved-input__lg {
width: 300px;
}
.curved-input__sm {
width: 150px;
}
With this in mind you'll see that you have to add the class curved-input as well.
answered Jan 4 at 12:23
Kevin KoobsKevin Koobs
414
Yes, exactly it works like that when I set it ascurved-input curved-input__lgbut is there a way to revise this that I'll just set my class ascurved-input__lgorcurved-input__smbut it will inherit thecurved-inputclass?
– The Bassman
Jan 4 at 12:25
You can by add the border-radius, height and margin to the__lgand__smclasses. But then you'll be surpassing the use of BEM like you're doing here. So I recommend usingcurved-input curved-input__lgas your class attribute
– Kevin Koobs
Jan 4 at 12:30
add a comment |
This is because you have to declare the curved-input class as well. So your class attribute will look like class="curved-input curved-input__lg".
If you'd write out your CSS in full you'll get something like this:
.curved-input {
border-radius: 5px;
height: 50px;
margin-right: 1rem;
}
.curved-input__lg {
width: 300px;
}
.curved-input__sm {
width: 150px;
}
With this in mind you'll see that you have to add the class curved-input as well.
answered Jan 4 at 12:23
Kevin KoobsKevin Koobs
414
Yes, exactly it works like that when I set it ascurved-input curved-input__lgbut is there a way to revise this that I'll just set my class ascurved-input__lgorcurved-input__smbut it will inherit thecurved-inputclass?
– The Bassman
Jan 4 at 12:25
You can by add the border-radius, height and margin to the__lgand__smclasses. But then you'll be surpassing the use of BEM like you're doing here. So I recommend usingcurved-input curved-input__lgas your class attribute
– Kevin Koobs
Jan 4 at 12:30
add a comment |
This is because you have to declare the curved-input class as well. So your class attribute will look like class="curved-input curved-input__lg".
If you'd write out your CSS in full you'll get something like this:
.curved-input {
border-radius: 5px;
height: 50px;
margin-right: 1rem;
}
.curved-input__lg {
width: 300px;
}
.curved-input__sm {
width: 150px;
}
With this in mind you'll see that you have to add the class curved-input as well.
answered Jan 4 at 12:23
Kevin KoobsKevin Koobs
414
This is because you have to declare the curved-input class as well. So your class attribute will look like class="curved-input curved-input__lg".
If you'd write out your CSS in full you'll get something like this:
.curved-input {
border-radius: 5px;
height: 50px;
margin-right: 1rem;
}
.curved-input__lg {
width: 300px;
}
.curved-input__sm {
width: 150px;
}
With this in mind you'll see that you have to add the class curved-input as well.
answered Jan 4 at 12:23
Kevin KoobsKevin Koobs
414
edited Jan 4 at 12:29
answered Jan 4 at 12:23
Kevin KoobsKevin Koobs
414
answered Jan 4 at 12:23
Kevin KoobsKevin Koobs
414
answered Jan 4 at 12:23
Kevin KoobsKevin Koobs
414
414
Yes, exactly it works like that when I set it ascurved-input curved-input__lgbut is there a way to revise this that I'll just set my class ascurved-input__lgorcurved-input__smbut it will inherit thecurved-inputclass?
– The Bassman
Jan 4 at 12:25
You can by add the border-radius, height and margin to the__lgand__smclasses. But then you'll be surpassing the use of BEM like you're doing here. So I recommend usingcurved-input curved-input__lgas your class attribute
– Kevin Koobs
Jan 4 at 12:30
add a comment |
Yes, exactly it works like that when I set it ascurved-input curved-input__lgbut is there a way to revise this that I'll just set my class ascurved-input__lgorcurved-input__smbut it will inherit thecurved-inputclass?
– The Bassman
Jan 4 at 12:25
You can by add the border-radius, height and margin to the__lgand__smclasses. But then you'll be surpassing the use of BEM like you're doing here. So I recommend usingcurved-input curved-input__lgas your class attribute
– Kevin Koobs
Jan 4 at 12:30
Yes, exactly it works like that when I set it as
curved-input curved-input__lg but is there a way to revise this that I'll just set my class as curved-input__lg or curved-input__sm but it will inherit the curved-input class?– The Bassman
Jan 4 at 12:25
Yes, exactly it works like that when I set it as
curved-input curved-input__lg but is there a way to revise this that I'll just set my class as curved-input__lg or curved-input__sm but it will inherit the curved-input class?– The Bassman
Jan 4 at 12:25
You can by add the border-radius, height and margin to the
__lg and __sm classes. But then you'll be surpassing the use of BEM like you're doing here. So I recommend using curved-input curved-input__lg as your class attribute– Kevin Koobs
Jan 4 at 12:30
You can by add the border-radius, height and margin to the
__lg and __sm classes. But then you'll be surpassing the use of BEM like you're doing here. So I recommend using curved-input curved-input__lg as your class attribute– Kevin Koobs
Jan 4 at 12:30
add a comment |
Well if you want to write it like that, try to change the first line to:
[class*="curved-input"]
answered Jan 4 at 13:32
Lukáš Gibo VaicLukáš Gibo Vaic
407414
add a comment |
Well if you want to write it like that, try to change the first line to:
[class*="curved-input"]
answered Jan 4 at 13:32
Lukáš Gibo VaicLukáš Gibo Vaic
407414
add a comment |
Well if you want to write it like that, try to change the first line to:
[class*="curved-input"]
answered Jan 4 at 13:32
Lukáš Gibo VaicLukáš Gibo Vaic
407414
Well if you want to write it like that, try to change the first line to:
[class*="curved-input"]
answered Jan 4 at 13:32
Lukáš Gibo VaicLukáš Gibo Vaic
407414
answered Jan 4 at 13:32
Lukáš Gibo VaicLukáš Gibo Vaic
407414
answered Jan 4 at 13:32
Lukáš Gibo VaicLukáš Gibo Vaic
407414
answered Jan 4 at 13:32
Lukáš Gibo VaicLukáš Gibo Vaic
407414
407414
add a comment |
add a comment |
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.
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%2f54038762%2froot-class-is-not-read-by-sass-only-those-with-ampersand-are%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
Well you can split the classes into
curved-input,__lgas two different classes– Viira
Jan 4 at 12:31