How would I nest classes like this in SCSS using #import?
.example.test {
color: red;
}
This can be done in SCSS without the use of #import like this:
.example {
&.test {
color: red;
}
}
But how would I do it using #import? Let's say we have a file called rules.scss with the following content:
.test {
color: red;
}
If I were to do
.example {
#import 'rules.scss';
}
Would output
.example .test {
color: red;
}
How would I #import rules.scss with the classes nested together, for example, the follow CSS:
.example.test {
color: red;
}
EDIT per your edit:
first rename the file rules.scss to _rules.scss (note the leading underscore)
Then...
.example {
#import "rules";
}
Here is the SASS/SCSS #import documentation:
Please be aware that #import is in the process of being removed:
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.
(Note that only Dart Sass currently supports #use. Users of other
implementations must use the #import rule instead.)
Related
I have style.scss (my main scss), _style2.scss, and style.css
// style.scss
body {
background:red;
}
#import '_style2.scss';
div {
background: blue;
}
When this is compiled to style.css it looks like exactly what i want it to look like:
// style.css
body {
background: red;
}
p {
background: green;
}
div {
background: blue;
}
Because #import will be eventually removed from Sass, now we should use #use and #forward, but I can't make it to work with #use and #forward because: Error: #use rules must be written before any other rules.
It only works when my #use is at the beginning of the file, but i want to import my _style2.scss in the middle, how to do it?
This might seem basic, but I can't figure out how to use CSS variables in LESS?
variables.css:
.root {
--header-color: white;
--content-color: yellow;
}
styles.less:
#import "../variables.css";
.header {
color: #header-color;
}
I get error "#header-color is undefined".
LESS allows you to use normal CSS code, so use one option could be just use the variable as CSS:
#import "../variables.css";
.header {
color: var(--header-color);
}
Also, you can save the css var to a LESS var:
#import "../variables.css";
#header-color: var(--header-color);
.header {
color: #header-color;
}
I would like to use the "&" parent selector in LESS in combination with a nested #import statement to override variable definitions within a specific scope. Consider the following files
style.less:
#import 'component-variables.less';
#import (multiple) 'component.less';
.#{contrastWrapperClass}, .#{contrastWrapperClass}&{
#componentBackgroundColor:#00ff00;
#import (multiple) 'component.less';
}
component-variables.less:
#contrastWrapperClass: componentContrast;
#componentBackgroundColor: #ff0000;
component.less:
.component {
background-color: #componentBackgroundColor;
}
I would expect this to compile to
.component {
background-color:#ff0000;
}
.componentContrast .component,
.componentContrast.component {
background-color:#00ff000;
}
it actually compiles to:
.component {
background-color:#ff0000;
}
.componentContrast .component,
.componentContrast .component {
background-color:#00ff000;
}
In this example, the goal would be to switch the background-color for any .component element that also has the "componentContrast" class or is a child of an element with the "componentContrast" class.
Say I am using SASS and I want to borrow heavily from some existing stylesheet, be it another SASS stylesheet or a CSS one. I can #import that other sheet, then use #extend to use some of its rules. Is there an option to then exclude all the other stuff I didn't use from the resulting CSS?
#import takes the whole stylesheet/partial and puts it in your stylesheet, there's no way to exclude any of the rules aside from overwriting them all to defaults. If you have an originating SASS file you could abstract them all into partials and then #import what you need into your new file.
There's no way to import another sass file so that #extends can be used without rendering the content. Create and import a partial full of %placeholders to use #extend without renders content would be a good choice if it wasn't be rendered like this:
_import.scss
%button {
color: #fff;
width: 72px;
height: 24px;
}
main.scss
#import "import";
.button-blue {
#extend %button;
background-color: blue;
}
main.css
.button-blue {
color: #
width: 72px;
height: 24px; }
.button-blue {
border: 1px solid #fff; }
So I think that the best way to achieve your goal is import a partial with some mixins in your style, I 've been using sass for half a year and so far I haven't had a need to import #extends yet so please, tell me what you want to do exactly with the #extend and I will try to help you to get it with a #mixin
tl:dr version: is there a way to #extend a css class and not have the original class appear in my compiled css without changing all my css classes to %placeholder classes?
Short answer based on the below answers: it appears there is no way to do this unless you go through and convert the css to silent/placeholder classes e.g. convert .one{} to %one{} and even then that will cause problems with media queries.
I have a css file (lets call it "style.css") which contains 200+ CSS classes to style various elements like forms and buttons etc. What I want is to include some of those classes in a project and other classes from that file in other random projects/websites. With each new project I also want to give the classes random semantic class names of my choosing.
My preprocessor of choice when working with CSS is SCSS and I really need an answer that uses the power of SCSS.
Here is a quick example of what I'm talking about - loading css into a SCSS file and then extending that css with my own class names:
//style.css
.one {
color: red;
padding-top: 1px;
}
//style2.scss
#import "style.css";
.two {
#extend .one;
}
The problem here is that my SCSS file will compile to CSS and look like this:
//style2.css
.one {
color: red;
padding-top: 1px;
}
.two {
color: red;
padding-top: 1px;
}
But what I want to do is only include the second class, which I gave a special name.
I've tried a few ways of doing this but here's one example that does not work but is along the lines of what I was thinking I should be able to do:
A.) First, I grab the style.css file and chuck copy/paste it into a style.scss file.
B.) Second I wrap all the whole thing in a placeholder/silent class, like so:
//style.scss
%placeholder {
.one {
color: red;
padding-top: 1px;
}
}
C.) Then I import that SCSS file and try and extend a class of my choosing that is within the placeholder, like this:
//style2.scss
#import "style";
.two {
#extend .one;
}
When I try and compile this I get a blank css file (and rightly so for trying to be too tricky). The other thing I know is that you can't extend nested selectors so "#extend %placeholder .one;" is also out of the question.
My question is this: does anyone know of a way to import and then extend a css class so that the compiled result does not include the imported css?
The only other solution I can think of is to just delete the imported css from the top of my file before I let it out into the wild. But this is honestly less than ideal solution.
Thank you in advance to any answers :)
You're using placeholders incorrectly, the placeholder should simply be one, no need to wrap it. Try this:
// style.scss
%one {
color: red;
padding-top: 1px;
}
// style2.scss
#import "style";
.two {
#extend %one;
}
Note that there is an issue with this approach. While the outputted CSS is leaner than using a mixin (#include), you will not be able to use %one inside of any #media queries. Ie. this will not work:
// style2.scss
#import "style";
#media screen and (max-width:1024px) {
.two {
// This won't produce CSS as it's inside the media query
#extend %one;
}
}
The only way I'm aware to get around this is to use a mixin instead of a placeholder which will result in more CSS (if you use one more than once).
// style.scss
#mixin one() {
color: red;
padding-top: 1px;
}
// style2.scss
#import "style";
#media screen and (max-width:1024px) {
.two {
#include one();
}
}
I've detailed the difference in output between mixins and placeholder selectors on my blog if you're not aware.