In my style.less I'd like to define, that all elements with the class .element nested within an element of the class .group have the same properties of the bootstrap-class .col-sm-6.
Unfortunately I can't directly add the class .col-sm-6 to the elements.
In that project, bootstrap is available in the folder tapestry5/bootstrap/css/bootstrap-darkly.css releative to my style.less. (How) Can I also use CSS-classes as mixins within my style.css? I tried:
#import (reference) "tapestry5/bootstrap/css/bootstrap-darkly.css";
.group .element {
.col-sm-6;
}
Unformtunately I get a Less4J Exception:
Could not find mixin named ".col-sm-6". - line 4 - position 3
Is it impossible to use CSS as mixins, or is something wrong with my syntax?
If you change the css file you have available to less file ending and import it (as all CSS is valid LESS). The less compiler will be able to find and use .col-sm-6 as a mixin.
#import (reference) "tapestry5/bootstrap/css/bootstrap-darkly.less";
.group .element {
.col-sm-6;
}
If you're going to be using the Bootstrap LESS, you may as well make use of their mixins instead of their CSS. As seven-phases-max suggested in his comment, you can use make-*-column instead of using the CSS classes.
You'd do this instead:
.group .element {
.make-sm-column(6);
}
Related
I am trying to import a website into OBS Studio via the browser source. Unfortunately the website I am importing is set to light theme via giving the html element of the website the class tw-root--theme-light.
This can be changed very easily by changing this class to tw-root--theme-dark but OBS Studio does not let you edit the html. I can only append CSS.
Is it possible to overwrite the class tw-root--theme-light to inherit all of its values from tw-root--theme-dark?
There is no way to inherit all values from another class in pure CSS.
CSS inheritance is from parent element to child element, this doesn't apply for rulesets such as CSS classes.
We can achieve this, with CSS preprocessors such as Sass & LESS, by extending the classes:
example in Sass (with SCSS syntax):
.block {
display: block
}
.green {
background: green
}
.green-block {
#extend .block; // in LESS, the syntax would be the same but without #extend
#extend .green; // in LESS, the syntax would be the same but without #extend
}
I would just use those CSS classes but override with the new CSS classes all the styles that you need to override.
If you need to inherit all the styles from the CSS class, just use the same CSS class twice and, if necessary, create a new class to override the styles that you don't need.
I work with CSS rarely, but I really want to style my chart. The chart is from a vue.js library and has predefined CSS classes. I just don't know how I am able to access them.
HTML:
CSS:
This is how the document describes the use of CSS with the library:
It's hard to get the full picture only from the images you shared. But it should be relatively easy to just override the default styles that the library uses. If you know what the class names are.
For example:
<style scoped>
year: {
display: block;
}
</style>
Take a look at scoped styles docs.
What you need is a "deep" selector.
So if you want to override child component's styles your css should look like
.vtc-statistik /deep/ .vtc {
}
The thing is that your scoped styles get compiled to
.daten[data-v-bla-bla]{
...
}
b[data-v-bla-bla]{
...
}
/* and .vtc-statistik with nested .vtc */
.vtc-statistik .vtc[data-v-bla-bla] {
...
}
in order to work the way you expect it to work it should get compiled to
/* */
.vtc-statistik[data-v-bla-bla] .vtc{
...
}
where data-v-bla-bla is a unique id of your component.
Btw. Nested styles are not part of CSS specifications. You should use SCSS / PostCSS / Less to process them.
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 am working with Drupal and with that, I don't always have the freedom to add a class by altering a html tag, however. I would like to apply some Twitter Bootstrap styling on an element from my custom.css file (the bootstrap css file is loaded, so styling is available).
To illustrate it better, for example, I would like to apply class="img-polaroid" (TB base styling) to an image that I can interface as div.someClass in my custom css stylesheet. I don't have simple way to alter the img tag to have class="img-polaroid someClass".
I would like to accomplish the same in my custom stylesheet. In another words, the merge happens not in the html tag but in the css stylesheet itself. How can I accomplish this with the current technologies in place? Are we there to make this possible?
Thank You
p.s. I am aware of alternatives:
-use JS to append class
-Copy and past the styling of class="img-polaroid" into div.someClass {...}
But both seem like not so nice solutions
How you go about this depends on which CSS Preprocessor you're using. You must choose one if you want to avoid modifying TB itself or the markup.
Sass
.foo {
#extend .bar;
}
Output:
.bar, .foo {
// styles
}
LESS
.foo {
.bar;
}
Output:
.bar {
// styles
}
.foo {
// styles
}
You can locate the part of the CSS code that you want to apply to the element in the bootstrap stylesheet and rewrite the selectors or copy the code to another file with new selectors so the style applies to both
.selector-from-bootrap,
.my-new selector{
...
}