I'm looking for a simple way to select an existing react element in my css. I've tried searching it but only found confusing answers about tons of libraries I can use, and none seemed to fit what I'm trying to do.
I want to have a regular .scss file, where if I have the react element called Foo, I can do something like this:
Foo {
color: red;
}
This would be great because I could continue with .scss files which I like, and could select components. How can I do this (or achieve similar behaviour)?
Notice that I'm not the one creating the element so I can't just apply a class to all of them.
You can do it easily, by adding className=Foo and called it in Sass by(.Foo) and by using compiler program to convert Sass to CSS such as (Prepros) and call the CSS file as a link to your main HTML file
Related
I was looking for an easy way to prefix a style sheet and sass works just great. I don't need any building tool, just vs code sass extension, and press watch.
What I did was, renamed the css to scss and then imported it inside the main style nesting in the selector I want, like:
#wrapper {
#import 'style1';
#import 'style2';
}
The issue comes when one of the files has #font-face, they also get prefixed and that is a problem. I checked the issue tracker and apparently this is the correct behavior.
https://github.com/sass/sass/issues/2442
Given that. I am looking for a way to import only the #font-face rules to the root instead of the #wrapper selector.
Is this possible without having to change the content of 'style1' or 'style2' ?
I was able to get around this problem with node sass magic importer.
But again you need node scripting and terminal, but can be mitigated with a bundler which kinda is not what I want but at least I can sort of prebuilt it and still use a watcher.
But given the hasle to set this up for such a simple thing I would just go to the style sheet and copy the font-faces to the root of the main file anyways.
If anyone knows a solution with sass only please reply.
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.
I have mistakenly pasted couple of CSS selectors in the same CSS file twice, as time passes I am being able to track them manually and delete the later one. I wanted to know if there is any better way to find if a CSS selector has been used twice in my CSS file so that I could merge/delete them?
Here is one possible solution:
Copy both files into a CSS code formatting tool e.g. http://www.codebeautifier.com/
Format it so each CSS ruleset is on one line, e.g. p { font-size: 13px }
Put the result into a sorting program, e.g. the sort command on Linux/Mac terminal.
There are online tools that can do this too.
Now all the duplicated selectors should be next to each other. You should be able to combine them by hand pretty easily.
Also, don't forget that different ordering of CSS rules can have different results.
Also try this https://codebeautify.org/remove-duplicate-lines
With Polymer I can include my CSS styles in the element definition simply by adding a <style> tag. What I would like to do though is to add a preprocessor to those styles. Something like https://autoprefixer.github.io/ would be great.
Is there a way to do so without an external CSS file?
Use a build step to extract inline resources to separate files - something like gulp-html-extract.
Once you have the source extracted, you can process it separately.
You would then use a tool like Vulcanize to re-inline your styles back into your main component.
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.