My SASS file:
#import "path/to/a/special/style-set/*"
// Custom Styles
span
color: #fff
My HTML:
<a href="index.html>Link</a>
<div id="special-link"><a href="index-special.html>I am special</a></div>
Question: How can I apply the imported style set from above to the div special-link only and not to any other divs on the page?
I thought that this is possible:
#special-link
#import "path/to/a/special/style-set/*"
but that does not seem to work.
Having ID in your Div would allows you only to style that specific div, actually you don't need to create and other stylesheet for that. But if you need to import that sass file then in your imported sass file you have to indicate the style for the id #special-link, then it should work.
Related
I am just wondering can I define primary color in App.css and then use it in component css files?
For example:
App.css
:root {
--primary-color: blue;
}
And then use it in component
Nav.css
background-color: --primary-color
Yes, as long as the file where you defined the variable is imported in the child or the parent component. I think it would even work if any of the rendered component is using that file but i am not sure about that one.
Is it possible to load property from class from different scss file? This side scss file is imported to main scss file. All properties are inherited, but margins, paddings, font styles not. Browser is not willing to load these properites. Are there any rules with extend?
Side scss file:
.section-headline {
font-size: em(30);
font-weight: 700;
line-height: auto;
color: $main-col-text;
margin-bottom: em(20);
}
Main scss file:
.i-headline {
#extend .section-headline;
}
In SASS you can declare classes in one file and import them into another without any problem, just make sure your import is done properly. And yes you can use #extend to access the rules of your imported selector.
Also try display: inline-block; and see if your margin/padding are working. Maybe you were trying to apply them to an inline element.
Does your em() function is imported somewhere ?
I found the problem. I have one scss file where are imported all scss sub-files. It looks like this:
#import 'gClass';
#import 'buttons';
#import 'general';
#import 'mixins';
#import 'typography';
#import 'pages/home';
In sub-file gClass is my class .section-headline. In pages/home is scss code with i-headline class. I tried to copy .section-headline to main scss file mentioned upper. In this case it works, but if i try to have .section-headline in gClass file, it doesnt.
I don't think it is possible, but I will ask anyway:
Can I apply an external css file (Bootstrap for instance) to a div and its children without affecting the rest of the page.
For example, I need to migrate a footer written with Bootstrap over to an existing page. That page does not use bootstrap. If I link Bootstraps css at the top of the page, the css is applied to the whole page which ruins existing css. How can I just apply the bootstrap styles to the footer section without having to rewrite most of the page's css?
Any suggestions?
I ended up using LESS to compile a new css of bootstrap with a prefix of .bootstrap as seen below. It works, but i wonder if there is a more traditional way of handling this problem.
file: bootstrap-only.less
.bootstrap {
#import 'bootstrap.css'
}
file: bootstrap-only.css
.bootstrap .container {
width: 100%;
}
file: page.html
<style>
.container { width: 20px; }
</style>
<link rel="stylesheet" type="text/css" href="bootstrap-only.css">
<div class="not-bootstrap">
<div class="container">I am 20px</div>
</div>
<div class="bootstrap">
<div class="container">I am 100%</div>
</div>
You can try usig scooped css.Please do refer the following sample code.
<div>
<style scoped>
#import "filename.css";
</style>
//your div with its children will come here
</div>
Your inline styles should not be affected by adding Bootstrap as inline styles take precedence over styles from external resources. The only elements that should be affected are the ones in the page that share class names with bootstrap classes.
You can try referencing the Bootstrap css before your own css and your stylesheet will take precedence over the Bootstrap css. Unfortunately this may add styles additional styles to some of your classes which that you didn't explicitly reference in your stylesheet and may still change the look of your page.
For those classes that exist in both bootstrap and your stylesheet it's probably best to just change the names of those classes in your stylesheet and page. A quick way to do this is to use "replace" search for the class name and replace it with the new class name most IDEs have a way to "replace all" so it's often just a bit of typing and a few clicks to change a bunch of styles.
You can try using the Angular 2+, where you can simply create an component and us it anywhere irrespective of the page css. Basically it will create a shadow DOM and will not be accessible outside that component.
Have an issue where a css framework imported into a scss file is clobbering the styles of the wysiwyg editor. Is there a way to import the framework and have it "skip" any element within a class or ID?
I've tried.. to no avail...
// app.scss file
body :not(#wysiwyg) {
#import 'node_modules/some_css_framework.scss';
}
// also tried..
body *:not(#wysiwyg) {
#import 'node_modules/some_css_framework.scss';
}
(Everything except for the #wysiwyg element, import and apply these styles..
I want to use draft.js in my project. It has its own css which I also need to import. In the documentation it is said:
This CSS should be included when rendering the editor, as these styles
set defaults for text alignment, spacing, and other important
features.
How do I include the Draft.css while rendering the component? Do I include it in my main index.html?
Also how to give an id to the editor so that I can style it (eg. border, padding, min-height, etc)
Depending on your setup, you should be able to include or import the Draft.css in the index.js file.
...
import 'draft-js/dist/Draft.css';
...
draftjs produces Draft.css in the build and is available within the node_modules. Use the css for default styling.
For background color of the editor, the following CSS class should be modified:
.DraftEditor-editorContainer {
background-color:#fff;
border-left:.1px solid transparent;
position:relative;
z-index:1
}