In Angular 2, I have a CSS class in my styles.scss file:
.FirstClass {
}
I'm trying to extend this class in a component's .SCSS file (eg.: MyComponent.scss) like:
.SecondClass {
#extend .FirstClass;
}
I'm getting an error that says .FirstClass is not found. Do I assume correctly that class and style in styles.scss can be globally referred? Please help me in this.
If you have any file, and you want to use one of its classes in another file, you have to import it first.
styles.scss
.FirstClass{}
MyComponent.scss
#import 'styles.scss'
.SecondClass{
#extend .FirstClass;
}
SCSS is compile to CSS, hence, if you need to make any changes in the file itself that not related plain css, you have to take it into consideration.
Related
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 want to remove pb-x and pm-x classes from there:
<div class="my-title pb-4 pm-4"> ... </div>
and include them to my-title defined in my scss that imports bootsrap's functions, variables, mixins:
Something like:
.my-title{
#include pb-4;
#include mb-4;
}
But the problem is that there are no such mixins (BS publish some classes as mixins but not this time).
Spacings pb-x pm-x are created there: https://github.com/twbs/bootstrap/blob/master/scss/utilities/_spacing.scss
And it looks like I need to access $spacers array and reference 4th element? How can I do this?
Since $spacers was conveniently defined in bs _variables.css I've found that my goal can be achieved using:
.my-title {
// ...
padding-bottom: map-get($spacers, 3); // .pb-3
margin-bottom: map-get($spacers, 4); // .pm-4
}
Additionally custom mixins (pb-3) or placeholders (%pb-3) classes could be created using this way. I like to extend bs with missing classes that publish theirs variables (e.g. input color is missed) but this time I stay with simple map-get($spacers, 3)
Did you try #extend ? Not sure if the below code serves your purpose.
.my-title{
#extend .pb-4;
#extend .pm-4;
}
How have you imported bootstrap in the scss file where you define .my-title ?
Suppose you define .my-title in index.scss file.
You can then import bootstrap at the top of index.scss file using
#import "path/to/bootstrap.css";
If including .css file do not work, try renaming bootstrap.css to bootstrap.scss. This will surely work. Now you can ommit the .scss extension from import, if you want.
#import "path/to/bootstrap";
You need to use #extend instead of #import. There is no pm-4 class in Bootstrap. Did you mean mb-4?
.my-title{
#extend .pb-4;
#extend .mb-4;
}
https://www.codeply.com/go/4jpl7TRudJ
I have a style library with the general styling for my project. This library is packed into one library.css file. In this library, I have a class a.
In one of my scss stylesheets I'd like to extend this calss a from library.css:
#import 'library.css';
.b {
#extend .a
}
When I do this, I'm told that class a was not found in library.css.
Is there any way to extend a class from a CSS stylesheet?
When you add an #import at-rule to your Sass code, you need to be careful what you wish to achieve. #import is actually valid CSS, so Sass needs to evaluate and figure out your intentions here. Sass extends the CSS #import rule and does not recreate it. According to the documentation:
#import takes a filename to import. By default, it looks for a Sass file to import directly, but there are a few circumstances under which it will compile to a CSS #import rule:
If the file's extension is .css.
If the filename begins with http://.
If the filename is a url().
If the #import has any media queries.
As a result, if you put the .css extension after the filename in an #import at-rule, Sass will just output this line of valid CSS code. You can test this by removing your #extend directive, which will make your code compile. You will see that the entire output file is this:
#import 'library.css';
Sass is not going to follow that CSS file and make it's contents available to the #extend directive.
What you could do is remove the file extension from your #import at-rule.
#import 'library';
.b {
#extend .a
}
However, this will actually output the entire contents of the file library.css into your CSS file that this Sass file compiles to, which I am assuming is not your goal.
To fix that, you could create a partial Sass file that contains placeholder selectors.
%a {
color: red;
}
The good thing about placeholder selectors is that they have no output of their own. According to the documentation:
On their own, without any use of #extend, rulesets that use placeholder selectors will not be rendered to CSS.
Their importance and usefulness is detailed on this page.
Import the partial Sass file in your Sass stylesheet and use the #extend directive like this:
.b {
#extend %a;
}
And to make sure your library.css file is consistent, convert it into Sass, import the same partial file on top of it containing your placeholder selectors and simply use the #extend directive inside .a selector as well.
#import 'placeholders';
.a {
#extend %a;
}
I have a main.css:
#import '~bootstrap/less/bootstrap.less';
#import url('./base.css');
#import url('./components/navbar.css');
I want to override bootstrap's default body background-color, so I have
body {
background-color: #efefef;
}
inside base.css,
but that does not override bootstrap's property. If I import ~bootstrap/dist/css/bootstrap.min.css instead of ~bootstrap/less/bootstrap.less, I am able to see my changes, but not with less file. How can I achieve that?
That's because you cannot import a .less file in a .css file. it has to be converted first.
If you want to import the .less file, you'd have to have a main.less and convert that to .css
You can use GRUNTJS for that.
I have a problem. I'm using vaadin inside liferay. I've successfully written a fully responsive (yeah, tables too) theme for vaadin, based on bootstrap. Now I'm importing it to liferay. Everything went fine 'till I needed to upgrade Liferay, where their new responsive theme is using same classes name as bootstrap, but with different behaviour (sad, very sad face).
The solution I've thought so far is to apply a class to the vaadin compiled css, like:
.daVaadinTheme {
#import bootstrap.css;
}
so the content will be compiled like:
.daVaadinTheme h1.insideTheFile{
}
.daVaadinTheme h2.insideTheFile{
}
But, as you may figured out, is not obviously working.
Do you have any solution?
Read carefully! This is NOT a duplicate of the answer you've posted. I'm trying to import a CSS file inside a CSS/SCSS class of another file, like the example I've written above. My problem is not to simply import a CSS file inside another one...
SOLUTION: (kudos to Mathias Jørgensen)
using #import from another scss file:
in test.scss:
.daVaadinTheme{
#import "bootstrap.scss";
}
Name your inner file with an underscore, and ending in scss. .Yes, even if it's plain css, i.e. foo.css → _foo.scss
Have an outer File like so:
#main .content { // if that's, where you want them to rule only
#import 'foo';
}
Reasons:
import only works with scss
underscore-files are glady skipped by sass (also as in gulp.src(<some wildcards).sass())
if you have no influence in your repo about the css filename whatsoever. or it's a major pain on upgrades, consider using a symbolic link under an .scss extension...
You need move your code into mixin:
// botstrap.scss
#mixin bootstrap {
h1.insideTheFile{
}
h2.insideTheFile{
}
}
Then, you can import normal:
// test.scss
#import "bootstrap"; // No extension
#include bootstrap; // The name of "mixin"
or with context:
// test.scss
#import "bootstrap"; // No extension
.daVaadinTheme {
#include bootstrap; // The name of "mixin"
}
If you want to add certain styles to a class using sass/scss I think what you're looking for is
.myClass { #import bootstrap.css; }