I have just migrated from LESS to SASS/SCSS, because of most advice I've found on the net and new version of bootstrap.
But I am really missing one important feature of LESS that every class style can be treated as an mixin.
.social-icons__list {
.list-inline;
}
The problem is that I cannot use #include for simple class, it should be annotated with #mixin. And in case of placeholderI need also to annotate class with %.
But like in my case, I need to extend existing class and get behavior like using placeholder.
In case of SASS it generates following CSS
.list-inline, .social-icons__list {
padding-left: 0;
list-style: none;
margin-left: -5px; }
But I need to copy styles only
.social-icons__list {
padding-left: 0;
list-style: none;
margin-left: -5px; }
I would accept it, but I also had to download bootstrap sass sources and #import "../external-dependency/bootstrap-sass-3.3.7/assets/stylesheets/bootstrap";
And this line of code makes compiler to copy all styles from bootstrap sources into my compiled file.
So maybe there are solutions to these problems.
I would be grateful for any help.
Sass doesn't have class-as-mixin feature like Less. You only real option is #extend though, it's worth nothing the differences in how this behaves, that it hoists the class name to the class that you are #extend-ing.
The bootstrap issue is a separate one, as if you wanted to use BS classes as less mixins you would still need them in your compiled file. The best strategy for that is use the official bootstrap sass only import the parts you are using. There are also #mixins defined for most styles/components so you can just import the mixins files and use those if you don't want any actual classes.
Related
In Bootstrap 4 there is a Sass varaible called $enable-rounded which
"Enables predefined border-radius styles on various components."
(https://getbootstrap.com/docs/4.1/getting-started/theming/#sass-options)
I have a requirement to remove the rounded corners on the Breadcrumb component, but I don't want to remove it from any other components. Therefore I can't use $enable-rounded to do what I need.
However, I don't know what the optimal way to do this is.
The Sass for _breadcrumb.scss contains this:
.breadcrumb {
display: flex;
flex-wrap: wrap;
padding: $breadcrumb-padding-y $breadcrumb-padding-x;
margin-bottom: $breadcrumb-margin-bottom;
list-style: none;
background-color: $breadcrumb-bg;
#include border-radius($border-radius);
}
How do I override #include border-radius($border-radius); without modifying _breadcrumb.scss?
All of the CSS for my app is condensed into 1 file (app.css) which is built from a Sass file (app.scss) which first includes the relevant Bootstrap 4 Sass files. So I could do something like this:
// app.scss
#import breadcrumb;
#import // other_bootstrap_sass_files
// CSS specific to my app
.breadcrumb {
border-radius: 0;
}
This seems a bit too similar to Bootstrap 3 where you had to override what you didn't want.
Is there a smarter way to do this with Sass for Bootstrap 4?
I think that for your specific case where you want only breadcrumbs without border-radius and all other components still have it, your only solution is doing like you mentioned in your question:
.breadcrumb {
border-radius: 0;
}
This seems a bit too similar to Bootstrap 3 where you had to override what you didn't want.
Personally I dont't see any other solution, only because you don't want to edit the original _breadcrumb.scss
If you look at the _variables.scss file, you can see all the variables that are set with !default - think of this as a preferences file. When the SCSS is compiled, your new values are swapped for the default values without having to overwrite the CSS.
Seems like $breadcrumb-border-radius: $border-radius !default; is what you want.
Two ways of resetting that value:
1) Make a copy of the _variables.scss file and place it in your project directory (I like changing the name to, say, _myvariables.scss ), look for that variable, remove the !default and change it to $breadcrumb-border-radius: 0;
OR
2) Make a file, say _myvariables.scss, that contains $breadcrumb-border-radius: 0; (and any other default values you want to change later on).
Next, import that new file BEFORE your bootstrap scss. In your example that would be your app.scss file:
// app.scss
#import myvariables.scss; //no underscore because it's a partial
#import // other_bootstrap_sass_files including the breadcrumb component
Now, when the SCSS is compiled, the breadcrumb radius will be set to 0 without changing anything else or overwriting css.
I have a two components that both rely on effects from hover.css. Both components have SASS files that (simplified) look something like this:
#import '~hover.css/scss/hover';
.some-class a {
#include underline-from-left;
}
Additionally, I have the hover.css library included in my global styles in style.css:
#import '~hover.css/scss/hover';
.some-global-class {
#include some-other-mixin-from-hover;
}
This all works and compiles fine, except for the rather large fly in the ointment that I end up with full hover.css in my compiled application three times - once in styles.js and twice in main.js (once for each component). This is obviously not a sustainable pattern.
If I don't #import hover.css in my components though, Angular won't compile them because they reference a mixin that can't be found. I've tried deep linking just the effects I need from hover.css but that's a hornet's nest because those files have downstream dependencies on other parts of the hover library. This obviously isn't specific to hover, but any scenario in which you'd want to import and use a vendor library in an Angular component's CSS file without duplicating the library.
Any ideas?
What do you have on your hover.scss file? Is it only mixins or other CSS as well? If you only have mixins then you should be fine, if you have some CSS then it will get taken. For example:
This would not cause repetition:
#mixin underline-from-left {
text-decoration: underline;
}
If you have something like this, then the span block will be repeated as many times as you would import it:
#mixin underline-from-left {
text-decoration: underline;
}
span {
display: block;
}
Perhaps an idea is to separate mixins from actual CSS, and then import only the mixins file.
I'm trying to import some classes from a CSS file like bootstrap.css to my site.scss SASS file, not all of them. The problem with following code is that I get all bootstrap classes in my compiled site.css file:
site.scss
#import "bootstrap";
.my-div-md-6
{
/*some other styles*/
#extend .col-md-6;
}
On the other hand, It is possible to do this with LESS by importing bootstrap.css as reference using this code:
site.less
#import (less, reference) "bootstrap.css";
.my-div-md-6{
/*some other styles*/
&:extend(.col-md-6);
}
The compiled output of LESS is very light as below:
site.css
.my-div-md-6 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
#media (min-width: 992px) {
.my-div-md-6 {
float: left;
}
.my-div-md-6 {
width: 50%;
}
}
.my-div-md-6 {
/*some other styles*/
}
Is it possible to achieve this with SASS? If yes, giving a quick example would help.
Unfortunately, there is not simple answer and at the time of writing this, Ruby Sass does not natively support the LESS import (reference) feature.
TLDR; Suggestions:
use uncss or postcss to remove the compiled css from file before finalising stylesheet.
if you can, use mixins and placeholder classes as a rewrite of the scss file, but this is the MOST time consuming.
import "file" as partial such that file="_file.scss" and #extend .class if you absolutely have to, (manual method but suppose it'll work)
UNCSS
You can use uncss as a package from npm to remove the compiled css (I know this isn't efficient, but if you had to use SASS), then you'd remove the chaff that's generated from the example bootstrap import.
HOW?
QUOTE: SO-Answer-Joesph
How? The process by which UnCSS removes the unused rules is as follows:
The HTML files are loaded by PhantomJS and JavaScript is executed.
Used stylesheets are extracted from the resulting HTML.
The stylesheets are concatenated and the rules are parsed by css-parse.
document.querySelector filters out selectors that are not found in the HTML files.
The remaining rules are converted back to CSS.
So yes, it removes selectors not in the DOM at runtime. If you have dynamically added selectors, you can make uncss ignore them by commenting: /* uncss:ignore */ before them, e.g...
MAKE SURE YOU ADD THE MEDIA OPTION IN UNCSS
REF: SO-Answer-Deksden
SASS Background research:
Summarising above:
nex3: one of the core leads for sass, has been at google and working on dart. They released dart-sass (unstable release) as a rewrite in favour to replace and improve upon ruby sass. This is interesting as this rewrite also explains the lack of feature development in Ruby Sass as well as the need for a rewrite. Since a core contributor of a ruby sass port: i.e. libsass (C++ implementation of ruby-sass) left the libsass team, it brings a further impetus to improve on sass performance.
Credit:
Joesph
Deksden
I'm relatively new to SASS and bootstrap. I use bootstrap with SASS and struggle a little bit with a concept.
I always used CSS like this: one base CSS-file with the basic layout (eq. base.css). Every template includes additionally a different CSS-file (eq. sitemap.css, team.css, news.css). This CSS-files only contain the parts of the respective templates. So I can overwrite the definitions in the previous files.
In SASS everything is compiled in one file. In combination with bootstrap I actually struggle with the concept I used until now.
Every time I want to add a new CSS-file to the existing definitions, I get an error because I have to reinclude the complete bootstrap structure. But if I reinclude it, the whole bootstrap code gets written into the additional files (eq. sitemap.css, team.css, news.css) too. If I include both files in my HTML-tree, the bootstrap definitions (like the whole normalize block) gets defined two or more times.
I have this setup:
- css
|-- source
| |-- base.scss
| |-- team.scss
| |-- vendors
| | |-- bootstrap...
└-- output
|-- base.css
└-- team.css
In base.scss I include the bootstrap stuff. I do also need the bootstrap stuff in team.scss, but not all the main stuff like the normalize things.
How do I achieve that? Is that even possible or do I have to switch my css needs by adding a css-class to the body tag (like body.team)? But then I have to carry the whole CSS stuff of every page in one file. Isn't this crab?
Edit to clear things up a bit:
This is in base.scss:
#import "settings/vars";
#import "vendors/bootstrap";
...
header {
#extend .container;
...
.contentbox {
margin-top: $mainGap;
}
...
}
...
and this is in team.scss:
header .contentbox {
#extend .sr-only;
}
It's absolutely clear that "#extend .sr-only;" doesn't work in team.scss because of the absence of bootstrap. But if I include bootstrap with
#import "vendors/bootstrap";
in the first line of team.scss, I would automatically add all the standard 16kb bootstrap things to team.css as well. However, these definitions are already in base.css. So I would have a preventable overhead.
I think I know there is no way to say: "Hey bootstrap. I already included you in base.scss. So you don't have to write the whole main definition of yourself into team.scss again. But I need you because I like you as an usable framework. So please provide me the functions and variables anyway.". But perhaps?
What I do in this case is to compile base.scss with Bootstrap and all the base code and my customized _variables.scss. Then if I want to add team.scss I just import the mixins and the custom variables that I will need to use from Bootstrap. Sounds great!
but...
Since .sr-only and other are just provided as classes instead SASS mixins, you can't #include it, like you could do with the .transition mixin for example.
So, for the moment if you are using SASS, you have 2 options:
Import the Bootstrap module with the class you want to extend/reuse
//contain the .sr-only definition
#import "vendors/bootstrap/_scaffolding";
#import "vendors/bootstrap/_variables";
header .contentbox {
#extend .sr-only;
}
Copy/Paste the class from the Bootstrap source and extend it:
#import "vendors/bootstrap/_variables";
// Copy/Paste the .sr-only class to reuse, very un-DRY
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
border: 0;
}
header .contentbox {
#extend .sr-only;
}
What you're searching for is named a partial in Sass I guess:
If you have a SCSS or Sass file that you want to import but don’t want to compile to a CSS file, you can add an underscore to the beginning of the filename. This will tell Sass not to compile it to a normal CSS file. You can then import these files without using the underscore.
For example, you might have _colors.scss. Then no _colors.css file would be created, and you can do
#import "colors";
and _colors.scss would be imported.
FYI, in LESS it'd be an import option: #import (reference) "colors"
We are using a framework that allow us to modify the color scheme use throughout the application. I cannot play a lot with the color and would like to reuse them in some classes. So let say that the framework define this class
.StyleFromFramework {
color:#515151;
background-color: #FFFFFF;
}
is located in a css file that I can't modify cause this file is handled by the framework (if I modified this file, all my modification will be lost when the new version of the framework is installed)
I would like to reuse the color of this classes in another class in a file containing all my updates.
.NewStyle {
color: **.StyleFromFramework:color**
Font: Verdan 11 px;
}
Is there a way to do that ?
I would try the following.
.StyleFromFramework, .NewStyle {
color:#515151;
}
.StyleFromFramework {
background-color: #FFFFFF;
}
.NewStyle {
background-color: none; /* or some other value... */
}
The first rule shares the color, and the the other two rules specify properties that are specific to the two other classes.
You should take a look at less.css which does exactly what you're looking for.
perhaps I didn't understand you correctly, but CSS is not dynamic language in which you can reuse rules and components.
I would recommend to use SASS/SCSS framework or something similar (LESS, Stylus... etc.)
In those frameworks, This is one of the most useful features, lets you share a set of CSS properties from one selector to another
read more here: http://sass-lang.com
Using a CSS preprocessor like Sass, Less or Stylus allows the use of variables which then can be reused in your project.
Foundation for instance can be completely restyled with Sass.