I am on a react project I have a lot of SCSS files I want to make one SCSS for medias and it should overwrite any other SCSS how to do that because in react it is a bit different from simple HTML CSS and I can't import one file the last so that it could be the most important
create like this.
make a scss file somewhere. e.g overWriteKiller.scss
in overWriteKiller.scss white your codes
Implementation. example component
import otherScss from 'otherScss.scss';
import overWriteKiller from 'overWriteKiller/overWriteKiller.scss';
// here is your component's code going
point is that file has to be import at the very last.
I know what you mean, you can clear that mess easily, just replace all media-s to one seperate file like media.scss
And order them from highest (widest) screen to lowest if something will blow in your site just add !important to all of the medias and you can add anything there and it will be the most important
P.S. you don't need to manually add !important just search all ; -s and replace with !important; then replace !important!important with !important that would clear everything
Related
Basically, I want to use the styles that the rsuite library provides because I wanted to use a ranged date picker that it has.
The thing is that, for it to display properly, I need to make an import of the .css of the library rsuit.
I have a component with a .scss file and an index.tsx file where I import the .scss one in this way:
import './styles.scss';
Then, in styles.scss I import the library .css this way:
#use '../../../styles/breakpoints'; //These are other .scss we use.
#use '../../../styles/fonts';
#use '../../../styles/colors';
#import '~rsuite/dist/rsuite.min.css';
My problem is that, when I do this, it overrides basically everything. Changing fonts, paddings... and yes, the range date picker now works and shows properly, but I only want it to change, nothing more.
Any way I can fix this? Or any way to select what I want to import from the library .css
You can scope the imported stylesheet by importing it inside a style rule...
#someRandomID{
#import '~rsuite/dist/rsuite.min.css';
}
This will make the whole CSS work only for elements inside element with ID "someRandomID", this way it won't overwrite your styles.
Now you that you have imported the styles and that they do not impact yours, it will also not style the datepicker! The trick here would be to #extend with your class. I did not dig into rsuite, so let's say the class for the datepicker is indeed .datepicker. This means that it got included as #someRandomID .datepicker and we'd like to "alias" this as .datepicker only.
You can use #extend for this:
.datepicket{
#extend #someRandomID .datepicker;
}
You may need to do that for every styles tough, so I'm not sure it's gonna be very helpful. It would also have the very bad drawback of including the whole CSS for absolutely nothing, bloating your css file by huge amounts needlessly.
With all that in mind, I think the best bet for you would be to simply get the source CSS that you need from their github. https://github.com/rsuite/rsuite/blob/main/src/DatePicker/styles/index.less
For example I am trying to import .navbar-nav from bootstrap's _navbar.scss and not the whole _navbar.scss file to my compiled css file. Is there a way to do it?
Sorry if this was asked before.
You can try doing an extend:
.your-class{
#extend .navbar-nav;
}
However, this would only work if you had imported the _navbar.scss somewhere else or the bootstrap.scss.
Additional
// main.scss
#import ../wherever bootstrap file is/_navbar.scss;
#import _custom.scss;
// _custom.scss
.your-class{
#extend .navbar-nav;
}
One of the way to import .scss in javascript is
import { navbar-nav } from '_navbar.scss'
When using in your component you can do.
<div className={navbar-nav} />
if you want to import it in your .scss file then you can do.
#import '_navbar.scss'
.class {
#extend .navbar-nav
}
As you are learning Sass here are some explanations which may help:
Better wording helps ...
At first some wording to get a correct understandable communication here and anywhere else you are talking about coding:
SASS don't minify a given CSS, it writes the CSS. Minify means the process that a given CSS code is compressed by a postprocessor to a shorter way to write it, - i.e. comments and spaces will be removed ... But yes: as SASS writes CSS it is able to write code in a minified format.
What you mean is to 'reduce code' or 'avoid not needed code' as you only try to import, use and write! the only needed parts of a given module which is a good practice.
.navbar is a CSS class. SASS don't load CSS classes, it writes CSS classes. It doesn't matter if you 'write the code on your own to a SCSS file' or 'get the code from a framework/module' ... SASS writes the however prepared CSS classes to your CSS file.
What you mean is the SASS includes/imports files with code from a framework/module to write that code/classes to css. So yes: maybe you can say you 'load' that module/scss-file ... but you don't load as css class. (This is as important as 'classes' in coding allways means a special construct of excutable code which does something in your programm. CSS classes don't execute anything, in SASS they are content you want to write/output to css.)
Please: these wordings are important to understand each other and to understand the mechanic of the process how SASS works is going on as well.
Reducing code by importing only selected file is good practice
So, I am not sure if I did understand your question right:
No. You are not able to include/import/load a part of the code of a single scss-file only. If you do #import 'somefile.scss' you always get the whole code of the whole file.
Yes. you are able to include/import/load parts of a given framework/module as you are able to load only the special FILES(!) of a framework/module you need for your project.
Yes. That is a really good practice.
As you mentioned Bootstrap indeed is developed and allows you to do that. But head up. If you import i.e. the part navbar.scss (or other selected elements) it only works if you also load the other files navbar.scss depends on. That are almost variables, functions, mixins and sometimes needed JS components to this element as well. Please note, that importing the files the elements are based on (i.e. vars, functions, mixins) has to be done BEFORE you load the element (i.e. like navbars, grid,...) itself.
A way to organize your project
Yes. A good way to organize your project is to have a single(!!!) file which brings all the code together you write in other partial files yourself or which you import from other framework/modules.
In case of Bootstrap this can be (simplified example):
// ###> file: your 'custom.scss'
// Note: file is without leading underscore
// as this files GENERATES/WRITE the css to custom.css
// Files with underscore as _partial-footer-styling.scss
// are not compiled to write css on their own
// that files are only compiled to css when they are imported to files without underscore
#import 'path/your-own-vars';
// Note: technique importing files
// you don't need to write underscore and '.scss'
// Note: function of this file
// the file '_your-own-vars.scss' is to organize you needed vars special to your project
// it includes your own vars and bootstrap vars as well
// --> the Bootstrap vars in this file will overwrite the vars of Bootstrap which will be included next
#import 'bootstrap-path/functions';
#import 'bootstrap-path/variables';
#import 'bootstrap-path/mixins';
#import 'bootstrap-path/your-selected-component-1';
#import 'bootstrap-path/your-selected-component-2';
#import 'bootstrap-path/your-selected-component-3';
...
#import 'path/partial-your-own-additional-css-special-section';
#import 'path/partial-your-own-additional-css-footer-settings';
....
A detailed explanation how to include and use Bootstrap (partly if you like to do so) to your project is here: https://getbootstrap.com/docs/4.6/getting-started/theming/
I was looking for an easy way to prefix a style sheet and sass works just great. I don't need any building tool, just vs code sass extension, and press watch.
What I did was, renamed the css to scss and then imported it inside the main style nesting in the selector I want, like:
#wrapper {
#import 'style1';
#import 'style2';
}
The issue comes when one of the files has #font-face, they also get prefixed and that is a problem. I checked the issue tracker and apparently this is the correct behavior.
https://github.com/sass/sass/issues/2442
Given that. I am looking for a way to import only the #font-face rules to the root instead of the #wrapper selector.
Is this possible without having to change the content of 'style1' or 'style2' ?
I was able to get around this problem with node sass magic importer.
But again you need node scripting and terminal, but can be mitigated with a bundler which kinda is not what I want but at least I can sort of prebuilt it and still use a watcher.
But given the hasle to set this up for such a simple thing I would just go to the style sheet and copy the font-faces to the root of the main file anyways.
If anyone knows a solution with sass only please reply.
i have a simple but for me rather an important question. I will start a clean Project with Less and wanna include bootstrap. So my basic style.less file would look like this:
// Bootstrap Corefile
#import "bootstrap.less";
// My own Styles
header {
.make-row();
}
is this logical correct because now the bootstrap and my own styles are compressed in one file. In addition I would have a pretty big css file... And what if I want to use another css file from external plugins.
I would like to know if someone has already experience with it?
Yeah that will work. If you want to add another file you can just import that as well.
One thing that you do have to be careful of is that in the earlier version of IE it has a max number of classes it process. I can't remember off the top of my head but I think it is somewhere near 1000. So if the css at the end of the file isnt working in IE thats why.
Here is a line to the documentation to see what you can do with it. Check out the import section.
When I want to change for example the style of a bootstrap button how should I do that:
Remove the css class in the bootstrap file and create a class in my css file with my settings
Leave the original css file and create a class in my css file with !important to overwrite the original file settings.
There are surely other ways...
What is the best my also considering upgrading to new bootstrap.css file?
The best way is to:
Leave the bootstrap file untouched
Modify the class in your own stylesheet
Load your own stylesheet after the bootstrap CSS
You have the benefit of not having to use !important and you can still update bootstrap.
Note: although you can update the bootstrap-file, you still have to test your page to see whether the update broke something, but this will at least assure you that you didn't lose any work
1.) Make a backup of the file and just edit the file as you please. I wouldn't create multiple files with !important since you'll lose track of things pretty fast.