Access HTML by id through SASS
Is there a possibility to access an HTML element by id through SASS? I use SASS in combination with React in TSX files. Normally for styling I would define a SASS entry and add that entry to the list of classes, as shown in the following example:
Report.sass:
.city {
color: red;
}
Report.tsx:
import * as React from "react";
import * as Style from "./Report.scss";
export class Report extends React.Component<{}, {}> {
public render() {
return <div className={Style.city}>Test text for cities</div>;
}
}
This example works perfectly fine. But if I now gave the div tag an id, I would need to also change the SASS file accordingly. This through fails, as shown here:
Report.sass:
#city {
color: red;
}
Report.tsx:
import * as React from "react";
import * as Style from "./Report.scss";
export class Report extends React.Component<{}, {}> {
public render() {
return <div id="city">Test text for cities</div>;
}
}
I believe that the SASS file forgets about the #city entry as there is no pointer in the Report.tsx to it. Am I right with this assumption? How could I make the SASS command work with the city id?
css reactjs sass jsx tsx
asked Nov 26 '18 at 1:41
SocratesSocrates
1,71382547
add a comment |
Is there a possibility to access an HTML element by id through SASS? I use SASS in combination with React in TSX files. Normally for styling I would define a SASS entry and add that entry to the list of classes, as shown in the following example:
Report.sass:
.city {
color: red;
}
Report.tsx:
import * as React from "react";
import * as Style from "./Report.scss";
export class Report extends React.Component<{}, {}> {
public render() {
return <div className={Style.city}>Test text for cities</div>;
}
}
This example works perfectly fine. But if I now gave the div tag an id, I would need to also change the SASS file accordingly. This through fails, as shown here:
Report.sass:
#city {
color: red;
}
Report.tsx:
import * as React from "react";
import * as Style from "./Report.scss";
export class Report extends React.Component<{}, {}> {
public render() {
return <div id="city">Test text for cities</div>;
}
}
I believe that the SASS file forgets about the #city entry as there is no pointer in the Report.tsx to it. Am I right with this assumption? How could I make the SASS command work with the city id?
css reactjs sass jsx tsx
asked Nov 26 '18 at 1:41
SocratesSocrates
1,71382547
add a comment |
Is there a possibility to access an HTML element by id through SASS? I use SASS in combination with React in TSX files. Normally for styling I would define a SASS entry and add that entry to the list of classes, as shown in the following example:
Report.sass:
.city {
color: red;
}
Report.tsx:
import * as React from "react";
import * as Style from "./Report.scss";
export class Report extends React.Component<{}, {}> {
public render() {
return <div className={Style.city}>Test text for cities</div>;
}
}
This example works perfectly fine. But if I now gave the div tag an id, I would need to also change the SASS file accordingly. This through fails, as shown here:
Report.sass:
#city {
color: red;
}
Report.tsx:
import * as React from "react";
import * as Style from "./Report.scss";
export class Report extends React.Component<{}, {}> {
public render() {
return <div id="city">Test text for cities</div>;
}
}
I believe that the SASS file forgets about the #city entry as there is no pointer in the Report.tsx to it. Am I right with this assumption? How could I make the SASS command work with the city id?
css reactjs sass jsx tsx
asked Nov 26 '18 at 1:41
SocratesSocrates
1,71382547
Is there a possibility to access an HTML element by id through SASS? I use SASS in combination with React in TSX files. Normally for styling I would define a SASS entry and add that entry to the list of classes, as shown in the following example:
Report.sass:
.city {
color: red;
}
Report.tsx:
import * as React from "react";
import * as Style from "./Report.scss";
export class Report extends React.Component<{}, {}> {
public render() {
return <div className={Style.city}>Test text for cities</div>;
}
}
This example works perfectly fine. But if I now gave the div tag an id, I would need to also change the SASS file accordingly. This through fails, as shown here:
Report.sass:
#city {
color: red;
}
Report.tsx:
import * as React from "react";
import * as Style from "./Report.scss";
export class Report extends React.Component<{}, {}> {
public render() {
return <div id="city">Test text for cities</div>;
}
}
I believe that the SASS file forgets about the #city entry as there is no pointer in the Report.tsx to it. Am I right with this assumption? How could I make the SASS command work with the city id?
css reactjs sass jsx tsx
css reactjs sass jsx tsx
asked Nov 26 '18 at 1:41
SocratesSocrates
1,71382547
asked Nov 26 '18 at 1:41
SocratesSocrates
1,71382547
asked Nov 26 '18 at 1:41
SocratesSocrates
1,71382547
asked Nov 26 '18 at 1:41
SocratesSocrates
1,71382547
asked Nov 26 '18 at 1:41
SocratesSocrates
1,71382547
1,71382547
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
I think theres some misunderstandings about css and html.
You can have both a class and id tag for each html element.
Therefore it will compile fine if you have the following:
<div id="NewYork" className={Style.city}>
This is an unorthodox way to apply styles in React though. The easier way is to import the stylesheet via
import './Report.scss';
then you can use your styles more freely like so:
<div id="NewYork" className="city">
answered Nov 26 '18 at 2:22
Shawn AndrewsShawn Andrews
965718
Your second example does not work with my settings. If I change fromimport * as Style from "./Report.scss";toimport './Report.scss';and from<div className={Style.city}>Test text for cities</div>to<div className="city">Test text for cities</div>the CSS properties vanish and have no effect the result. Is there any special project setting necessary for this to work?
– Socrates
Nov 26 '18 at 13:32
You could tryrequire('./Report.scss')but theimportway should work if its not giving you an error. The.city { ... }would apply toclassName="city"
– Shawn Andrews
Nov 26 '18 at 17:26
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%2f53473762%2faccess-html-by-id-through-sass%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I think theres some misunderstandings about css and html.
You can have both a class and id tag for each html element.
Therefore it will compile fine if you have the following:
<div id="NewYork" className={Style.city}>
This is an unorthodox way to apply styles in React though. The easier way is to import the stylesheet via
import './Report.scss';
then you can use your styles more freely like so:
<div id="NewYork" className="city">
answered Nov 26 '18 at 2:22
Shawn AndrewsShawn Andrews
965718
Your second example does not work with my settings. If I change fromimport * as Style from "./Report.scss";toimport './Report.scss';and from<div className={Style.city}>Test text for cities</div>to<div className="city">Test text for cities</div>the CSS properties vanish and have no effect the result. Is there any special project setting necessary for this to work?
– Socrates
Nov 26 '18 at 13:32
You could tryrequire('./Report.scss')but theimportway should work if its not giving you an error. The.city { ... }would apply toclassName="city"
– Shawn Andrews
Nov 26 '18 at 17:26
add a comment |
I think theres some misunderstandings about css and html.
You can have both a class and id tag for each html element.
Therefore it will compile fine if you have the following:
<div id="NewYork" className={Style.city}>
This is an unorthodox way to apply styles in React though. The easier way is to import the stylesheet via
import './Report.scss';
then you can use your styles more freely like so:
<div id="NewYork" className="city">
answered Nov 26 '18 at 2:22
Shawn AndrewsShawn Andrews
965718
Your second example does not work with my settings. If I change fromimport * as Style from "./Report.scss";toimport './Report.scss';and from<div className={Style.city}>Test text for cities</div>to<div className="city">Test text for cities</div>the CSS properties vanish and have no effect the result. Is there any special project setting necessary for this to work?
– Socrates
Nov 26 '18 at 13:32
You could tryrequire('./Report.scss')but theimportway should work if its not giving you an error. The.city { ... }would apply toclassName="city"
– Shawn Andrews
Nov 26 '18 at 17:26
add a comment |
I think theres some misunderstandings about css and html.
You can have both a class and id tag for each html element.
Therefore it will compile fine if you have the following:
<div id="NewYork" className={Style.city}>
This is an unorthodox way to apply styles in React though. The easier way is to import the stylesheet via
import './Report.scss';
then you can use your styles more freely like so:
<div id="NewYork" className="city">
answered Nov 26 '18 at 2:22
Shawn AndrewsShawn Andrews
965718
I think theres some misunderstandings about css and html.
You can have both a class and id tag for each html element.
Therefore it will compile fine if you have the following:
<div id="NewYork" className={Style.city}>
This is an unorthodox way to apply styles in React though. The easier way is to import the stylesheet via
import './Report.scss';
then you can use your styles more freely like so:
<div id="NewYork" className="city">
answered Nov 26 '18 at 2:22
Shawn AndrewsShawn Andrews
965718
answered Nov 26 '18 at 2:22
Shawn AndrewsShawn Andrews
965718
answered Nov 26 '18 at 2:22
Shawn AndrewsShawn Andrews
965718
answered Nov 26 '18 at 2:22
Shawn AndrewsShawn Andrews
965718
965718
Your second example does not work with my settings. If I change fromimport * as Style from "./Report.scss";toimport './Report.scss';and from<div className={Style.city}>Test text for cities</div>to<div className="city">Test text for cities</div>the CSS properties vanish and have no effect the result. Is there any special project setting necessary for this to work?
– Socrates
Nov 26 '18 at 13:32
You could tryrequire('./Report.scss')but theimportway should work if its not giving you an error. The.city { ... }would apply toclassName="city"
– Shawn Andrews
Nov 26 '18 at 17:26
add a comment |
Your second example does not work with my settings. If I change fromimport * as Style from "./Report.scss";toimport './Report.scss';and from<div className={Style.city}>Test text for cities</div>to<div className="city">Test text for cities</div>the CSS properties vanish and have no effect the result. Is there any special project setting necessary for this to work?
– Socrates
Nov 26 '18 at 13:32
You could tryrequire('./Report.scss')but theimportway should work if its not giving you an error. The.city { ... }would apply toclassName="city"
– Shawn Andrews
Nov 26 '18 at 17:26
Your second example does not work with my settings. If I change from
import * as Style from "./Report.scss"; to import './Report.scss'; and from <div className={Style.city}>Test text for cities</div> to <div className="city">Test text for cities</div> the CSS properties vanish and have no effect the result. Is there any special project setting necessary for this to work?– Socrates
Nov 26 '18 at 13:32
Your second example does not work with my settings. If I change from
import * as Style from "./Report.scss"; to import './Report.scss'; and from <div className={Style.city}>Test text for cities</div> to <div className="city">Test text for cities</div> the CSS properties vanish and have no effect the result. Is there any special project setting necessary for this to work?– Socrates
Nov 26 '18 at 13:32
You could try
require('./Report.scss') but the import way should work if its not giving you an error. The .city { ... } would apply to className="city"– Shawn Andrews
Nov 26 '18 at 17:26
You could try
require('./Report.scss') but the import way should work if its not giving you an error. The .city { ... } would apply to className="city"– Shawn Andrews
Nov 26 '18 at 17:26
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%2f53473762%2faccess-html-by-id-through-sass%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
