I'm creating a HTML/CSS page which is using Bootstrap. In fact I have to customize some parts. Because of several reasons some class names do not match the original from Bootstrap.
So, I have two files. bootstrap.min.css and main.less (=>main.min.css).
I'm wondering if it is possible to match classes in main.less to bootstrap.min.css.
So, I have a class .orderby (in main) which should have the same settings then .form-control (bootstrap).
Something like this:
.orderby { #.form-control }
But I have no clue how to refer to another css file.
Would appreciate if somebody can point me to the right feature.
Thank you!
You can do this with LESS's extend "all". The generic form is :extend(<indentifier> all) {}. In your case, you'd do
.orderby {
&:extend(.form-control all) {}
<your additional styles>
}
Additionally, if you don't need to use all of Bootstrap, you can import just the bits you need with LESS's reference:
#import (reference) path/to/bootstrap
Combine that with the above extend code, and you'll pull in just Bootstrap's .form-control.
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
I have several styles that use Sass' #extend or #include to inherit properties from selectors imported from Bootstrap scss files.
I would like to convert all of the Bootstrap selectors to #extend-Only placeholders, so I do not have to include any original Bootstrap selectors in my final .css output. The goal is to write my own css classes, extend from Bootstrap only where desired.
For example, I wish to have a navbar called .super-freaky-nav:
.super-freaky-nav{
#extend .navbar;
#extend .navbar-default;
#extend .navbar-top-fixed;
}
Ideally, my final .css output will not have a single reference to .navbar, .navbar-default, or .navbar-top-fixed.
Is there a way to do this without going into the _navbar.scss file and converting all of the selectors to #extend-Only classes (%navbar, %navbar-default, %navbar-top-fixed, etc)?
Thanks!
No. Sass does not have the ability to do what you're asking for. There's still a legitimate need to be able to extend normal classes and Sass has no way of differentiating between classes that should or shouldn't be extended.
One potential implementation I'm exploring uses custom importers in ruby-sass or the experimental importers feature in node-sass (2.0+) to apply a sed (find and replace) transform to the Bootstrap Sass files, replacing leading class definitions with % syntax. I haven't gotten much past experimentation, though, and I don't know what I might break without a comprehensive visual test suite. Happy to have some help with it.
I have a web page, Page-A, that uses a primary css file. I have other pages, Page-B, that use another primary css file. I'd like to use two classes of the Page-B css file into Page-A, but I do not want to override other classes and functions of Page-A css with this Page-B css file.
Is it possible to import only two classes of a css file instead of all its classes. In other words, is it possible to constrain an #import or link to load only a few classes?
What you could do is mark the classes that will be overriding everything with the !important tag in CSS, which means that it will not be overridden.
I would just input the two classes you want into the Page-A css file, as there is unfortunately no way to just import certain classes.
I would suggest making one master CSS file and input into both pages, that way all of your changes are reflected on both pages.
No. It's not possible.
But: You can still prefix your CSS rules with a class or an ID. It can helps you work with specificity (http://bit.ly/1aODhdu) and with rule importance.
You can also prefix CSS rule which will be applied-only for some nodes like html.one div html.two div so after load second CSS file will be still ignored.
No, it is not possible to import specific classes from a CSS file.
The correct way to do this would be to create a master CSS file, which all your webpages can share.
Delete the classes you need from PageBs css(OPTIONAL), add them to a new CSS file.
Link the new file to both the pages.
This way you will not override any classes and have a CSS file which has all the shared classes both pages need.
I am building a website with a framework in which the HTML is automatically generated. Twitter Bootstrap 3 needs the class "form-control" added to each input to properly apply the width to such inputs. Problem is that to add that css class from code, I would need to change the framework in many places.
Is there a work around? Maybe some javascript/jquery that searches all labels in my form, for each label it finds the associated input and finally add the css class? But I really don't know how to do it.
Thanks in advance for any help.
You could edit forms.less and recompile the css, but it could be tricky because you don't want all inputs or text areas to have that .form-control styling.
If you have an ID for your form that you want to apply it to, this should help:
$('#yourFormId input, #yourFormId textarea, #yourFormId input, #yourFormId select').addClass('form-control');
You would need to make sure you are adding all the form field types that are in your form, but that above line would probably cover most of them. This is pretty hacky though, depending on your framework there may be some sort of mixin or function to include class names in auto generated forms.
This is a bad idea because it is a "hacky" implementation of bootstrap. Not only do you need the classes you need the proper html structure. The amount of time trying to craft some magic javascript to implement these two changes would be better spent modifying the framework.
A solution could be to use Bootstrap's Less classes instead of the compiled library and somehow add the necessary tags in your code.
Take a look at this article.
I've not faced this specific problem, but in general when working with Bootstrap 3 I'll build the .less files myself with my own specific changes, e.g. in my .less file:
/* Import the Bootstrap 3 .less files */
#import url('../../Bootstrap/less/bootstrap.less');
/* Now implement my own styling below */
Working with .less, you might be able to pull in the relevant styles from the relevant part of the framework, something like this (where .mydiv is your container element) :
.mydiv {
input,
select,
textarea {
.form-control;
}
}
This would pull in the .form-control styles and apply them to input, select and textarea elements inside .mydiv. I've not tried this, but it's worth a try!
The question pretty much says it all.
For instance, if I were using, say, Twitter Bootstrap, could I define classes in my own SASS stylesheet that inherit from Bootstrap's CSS classes? Or does inheritance in SASS only work within the scope of a single file?
YES! its possible.
If you want all <button> elements to inherit the .btn class from Twitter Bootstrap's Default buttons
In your styles.scss file you would have to first import _bootstrap.scss:
#import "_bootstrap.scss";
Then below the import:
button { #extend .btn; }
**I might be mistaken, but if I get what you're trying to do, can't you just use the #extend .classname; command inside the element that you'd want to extend? Naturally, you should only modify your own code to preserve updatability.
To my knowledge, you have to use #import of the file containing the classes you want to use into your SASS file in order to utilize them in that file. However, I am not a SASS/SCSS expert, so someone may know of another way to remotely use them that I am not aware of.
Just as the accepted answer has shown this is possible with #import, however #import has been deprecated by sass
The Sass team discourages the continued use of the #import rule. Sass will gradually phase it out over the next few years, and eventually remove it from the language entirely. Prefer the #use rule instead.
The #use rule is better suited for use now, since it does not pollute the scope of the importing (user) module. unfortunately at the time of writing the use rule is only implemented in Dart sass.