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.
Related
I am gonna use css global variables in scss file so that I can change the button colour in any time.
I want to do like this:
:root {
--button-color: #FF0000;
}
$button-color: var(--button-color);
...
But this makes the issue now.
SASS variables are compile time and final value depends on all files were #import in line. CSS variables are run-time and are calculated based on cascade(say if any parent element redeclares variable - it will be applied to children).
Also take a look into docs section on difference between
You can use css-vars to compile SASS variables into CSS custom properties. But you still cannot use CSS custom properties in SASS code, say, to calculate some value - since CSS property is not initialized yet.
Even with css-vars plugins, things are rather messy, because SASS files does not describe how component tree looks like finally so we cannot see cascade.
TL;DR; don't mix SASS variables and CSS custom properties. Use first for compile-time variables/calculation only and use latest one for run-time/cascade-based styling. Probably prefer using CSS custom properties only.
My main concern is more focused towards a best practice, and to know when should I use #extend directives with classes and when with placeholder selectors? Since they both do virtually the same.
I've read a few articles where the authors would create a certain class to use them only with #extend directives. Wouldn't placeholder selectors make the compiling process more performant?
I'm thinking that maybe #extend directives should be used with classes if that class is being used by another element, otherwise these directives should be used with placeholder selectors; but I might be wrong.
If you define placeholder selector, it won't be compiled into css - it will only happen if you extend it. With class selector, it will always be compiled, regardless of whether or not you extend it. Therefore less code = more performance :)
From SASS Documentation
Sometimes you’ll write styles for a class that you only ever want to #extend, and never want to use directly in your HTML. This is especially true when writing a Sass library, where you may provide styles for users to #extend if they need and ignore if they don’t.
If you use normal classes for this, you end up creating a lot of extra CSS when the stylesheets are generated, and run the risk of colliding with other classes that are being used in the HTML. That’s why Sass supports “placeholder selectors” (for example, %foo).
So I know you can extend Foundation classes once you have the Foundation scss/css included and I know you can include the classes to the dom (OOCSS style) but here's my use-case:
I have style sheet, menus.scss. This is compiled into app.css along with Foundation.scss.
I can use the #extend here because I'm including Foundation before it.
#menu {
#extend .top-bar;
}
THE PROBLEM
Now, say I want to compile a separate sheet (because maybe it's only included on some pages)
Now if I #import Foundation into this stylesheet I will end up with the framework included twice (which is crazy of course.)
So... maybe a solution would be to have a version of the Framework that works on silent classes EG: %top-bar so I can include Foundation everywhere without fear of duplicating lots of code. I know there are some base components that will need to be included globally so that the sub-classes will work but how else can I do it?
To my knowledge silent frameworks don't exist so I'm looking for alternatives..
Ideas?
It will be perfect if you can isolate css critical to the initial page layout like grid, type, visibility components and inline them in to the page head or, if you have a ton of pages, in css file with the final size under 1-1.5k(really hard to do).
Then you can just defer auxiliary css and their size wont matter much.
Or You can use some css cleaner tool to remove selector duplicates or just make your own, it's pretty simple since the entire blocks of css will match.
Lets say that youre using Twitter Boostrap and you have their generic boostrap.css and other boostrap associated css files, and you want your own classes to have identical attributes to some of the given boostrap classes. To my understanding, you would not want to directly modify the css bootstrap files, but you would want to extend them by creating a custom.css file.
So without touching the boostrap files. How would I replicate a boostrap class for my own class? Would the only way be to copy and paste from the boostrap.css file. Or is there a way to do
.myownclass {
-- some command to replicate class 'alert alert-error' without repeating the CSS that has already been written
}
You could use a css preprocessor. Other ways already cited by other users are fine but using a css preprocessor is the best way.
Bootstrap is built using LESS, so you can use LESS. Take a look at here: http://bootstrap.lesscss.ru/less.html.
Also SASS can be used. According to me SASS is better. You find a tutorial here: http://www.1stwebdesigner.com/css/build-website-using-twitter-bootstrap-sass-1/
What are CSS preprocessors?
A browser can only understand CSS, as the styling technique for any DOM element being rendered. CSS, as a language has its own feature set, which at times might not be enough to create a clean and reusable chunk of rules. Eg. Not being able to reuse a collection of rules in multiple selectors, unavailability of variables which may lead to ambiguous pieces of data across the stylesheet. To overcome most of these limitations, the concept of a preprocessor was born – offering an advanced way of writing CSS, which extends the basic functionalities. This advanced code is later compiled as normal CSS code using respective compilers (which depends on what preprocessor you are using), which the browser will understand.
Should you use preprocessors?
The decision of adopting preprocessors for your next project, in my opinion, should be made after much analysis and solely depending on your expertise level and most importantly the project requirement and workflow of the team as a whole. Here are some tips that might help you come to a decision:
Not for beginners: If you are a beginner and starting to explore the fantastic world of CSS, I would suggest you get your hands dirty with normal CSS before moving into a framework or preprocessor of any sorts. It’s really important to understand and be able to use the core concepts of any language that you work with, and that’s true for CSS as much as any other programming language.
Are you a team of front end developers? As a team of front end developers, adopting preprocessors will be a great move. But only if somebody on the team really knows how to handle huge CSS files and structure them accordingly. By making use of the powerful features offered by the language, it is important to first structure the whole CSS into reusable chunks and define a strategy for CSS organization. Eg. Are you going with multiple CSS files for typography, forms, layout etc. Are you going for theme-able UI, where you might need to use variables extensively, etc.
Are you willing to cross the barrier? Adopting preprocessors means you are going to be implementing more programming concepts into your CSS coding approach. There will be a lot of concepts that are native to any basic programming language, which you might want to learn and implement, by using a preprocessor. This means, you will definitely need to brush-up your programming skills and might forever change the way you see a CSS code. If you are willing to cross this barrier, and feel ready to embrace the change confidently, this is for you.
In CSS this is not possible. The only way to do it, is to chain the classes in your html tags.
<div class="alert alert-error myownclass"></div>
If you are using less you can do it like this:
.myownclass {
.alert
.alert-error;
}
This will copy the settings from one class to another. The result will be the same as if you copy the contents of the class directly.
If you are using Sass you can do it without copying the class contents. Just reference the classes as shown below. This will not copy the contents, instead it will reference your custom class at the right position in your css code.
.myownclass {
#extend .alert;
#extend .alert-error;
}
Ref: Sass #extend
You would have to use LESS to avoid copy/paste:
.myClass {
.bootstrapClass;
}
Or you could use any of the other CSS preprocessors TBS has been ported to (Sass has one, not sure on the others).
You could give the element two classes - the original Bootstrap class, and then one of your own making. Then you would target it like this:
HTML
<h1 class="original_class myownclass">Hello</h1>
CSS
.original_class.myownclass {
// css code
}
Here's a little jsfiddle illustrating the concept: http://jsfiddle.net/ApEpr/
This does not require the use of a CSS preprocessor - it's just regular old CSS.
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.