I'm integrating SCSS into an existing product with a few dozen clients. I'm fairly new to the technology, and was wondering if there's a standardized way to accomplish what I'm trying to do.
I'd like to set up the project in such a way that I can have client-specific overrides to the default. Be able to do something like this:
- scss_dir
- default_dir
- main.scss
- _stuff.scss
- _more_stuff.scss
- client_1_dir
- client_2_dir
- _stuff.scss
When I compile the SCSS files, the resulting CSS files will be based mostly on the default settings but with the possibility for client-specific overrides.
Is there a standardized way to do this?
One idea that came to mind would be to copy all the files to a temp directory and have the client-specific files simply overwrite the defaults. I'm not thrilled about that since it would mean copying an entire file if you wanted to change a single thing, and the files would almost certainly fall out of sync as new features are added.
You could do this with #import statements if you put all the default CSS in a partial and each client specific CSS in it's own partial. Something like this:
client-one.scss
#import '_default-styles.scss';
#import '_client-one.scss';
client-two.scss
#import '_default-styles.scss';
#import '_client-two.scss';
Related
I am having problems with "creating" an Understrap Child theme.
I am using Visual Studio Code and I have a plug in Live Sass Compiler.
The problem I am facing is that when I change/create the variables in _theme.scss and save it, no changes are shown on the website.
My child theme structure:
-understrap-child
*functions.php
*index.php
*style.css
-sass
-theme
*_theme.scss
*_theme_variables.scss
My understanding is that a scss file with an underline is a partial scss file, and as such is not a stand alone file. If I save a regular scss file, without an underline it creates a regular file.
So my questions comes down to, do I need another .scss / .css file where the values from _theme.scss would be applied?
If I can provide any additional information, please let me know.
Edit1:
I think the problem is that I am not importing the underscore/partial files to any other non-underscore files. Since underscore files are partials, I am quite sure they need to be imported into non-underscore / specific files?
VScode - Live Sass Compile console
--------------------
Watching...
--------------------
Change Detected...
_theme_variables.scss
--------------------
Compiling Sass/Scss Files:
--------------------
Watching...
--------------------
Change Detected...
_theme.scss
--------------------
Compiling Sass/Scss Files:
Edit2:
I have downloaded an understrap-child theme from github, but the problem persists.
Edit3:
I have not resolved this problem. I am now using another theme without issue.
write variables colors in
_variable_theme.scss
then import this file in :
_theme.scss ==>
#import '_variable_theme.scss'
for example:
//_variables_theme.scss
$primary-color: #302AE6;
$secondary-color: #536390;
$font-color: #424242;
$bg-color: #fff;
$heading-color: #292922;
// _theme.scss
#import '_variable_theme.scss'
body{background:$primary-color}
, try it.
I faced a similar issue. If you're using an understrap-child theme, the variable overrides can be made on src/sass/theme/_child_theme_variables.scss; I was able to successfully modify $primary value here.
The earlier mistake was expecting theme changes on modifying src/sass/assets/understrap/theme/_theme_variables.scss !!
I'm trying to make my SCSS files more modular by splitting it into individual partial files. It's all well until suddenly I have a bunch of .css and .css.map files in my partials directory because I've, naturally, saved all of them, and the Sass watcher dutifully compiled all of them too.
How do I achieve a clean structure like Bootstrap's while not having to manually delete every partial .css files? Ideal scenario is that every time I edit and save the partial files, Sass watcher compiles only the main .scss file.
I'm using VS Code on Mac with a Sass watcher plugin. Is it achievable in this environment?
https://sass-lang.com/guide
A partial is simply a Sass file named with a leading underscore. You
might name it something like _partial.scss. The underscore lets Sass
know that the file is only a partial file and that it should not be
generated into a CSS file. Sass partials are used with the #import
directive. (#import is soon to be deprecated, with a move to #use and #forward instead. https://sass-lang.com/documentation/at-rules/import)
Thanks Arkellys.
Ideally you have a main .scss file, like style.scss for example, and then the other partials exist, like _header.scss for example.
Once you have a partial like that, it's prudent to import it in the main .scss file, at the top of the file. In this case, it would be #import 'header';
Notice that we do not import the underscore...
If you don't have any errors after this, and it's still not compiling then check whether you have properly referenced the compiled css in the head of your html.
We have Webpack for our project and we need to customize a great amount of things. I.E. we need to create our own theme. According to the docs, I should have:
#import 'theme/_import';
#import '~uikit/src/scss/variables';
#import '~uikit/src/scss/mixins';
#import "~uikit/src/scss/uikit";
Where the theme folder is a copy of uikit/src/scss/theme. However, I get an error:
Undefined variable: "$global-muted-background".
So what should I do in this situation?
Did I rightfully copy that theme folder? Is it meant for copy-paste and then modification? If yes, what do I import before that folder so that the necessary variables are declared?
Should I copy the whole variables-theme.scss file and modify it instead? In that case, what's the purpose of splitting each component's variables into files, as the docs suggest? Also, everything would be a mess.
Where should I put my custom global variables? In theme/variables and then import them in theme/_import?
I'm trying to suppress a specific error that is related to a SASS file in Visual Studio. I'll mention that everything works great, the CSS file is generated exactly as the SASS files should generate it, and even with this error on VS, so I think maybe it's a bug on VS.
Basically what I'm doing is that I have 2 SASS files that I declare some variables in them as settings for another SASS file that contains some mixins that work according to the settings file that provided in the context.
For exmaple, these are the 2 files for the settings:
_settings-ltr.scss
$bi-app-left: left;
$bi-app-right: right;
_settings-rtl.scss
$bi-app-left: right;
$bi-app-right: left;
And this is the file that uses those settings:
_mixins.scss
#mixin padding-left($distance) {
padding-#{$bi-app-left}: $distance;
}
#mixin padding-right($distance) {
padding-#{$bi-app-right}: $distance;
}
Now, basically the error says that the variable "$bi-app-left" is undefined (and "$bi-app-right" as well), and I'm really not defining these variables in the "_mixins.scss" file, I pass them to the context in some other SASS file, like this:
site.scss
#import '_settings-ltr.scss';
#import '_mixins.scss';
And it works great, except that error from VS:
My Question
How can I disable this error specifically, without disabling other SASS file errors?
This is because of how the VS SCSS editor resolves variables. It does so from the perspective of the file being edited; because the SCSS editor instance for _mixins.scss does not know how the imports are resolved in site.scss, it doesn't have a way to resolve this reference. If _mixins.scss had an #import chain up to the _settings-ltr.scss (or -rtl), then it would be able to resolve the variable and the error wouldn't be shown.
Similar feedback has been raised here as well. It would be worth opening a new feedback item to better describe the scenario (and also what you're using to compile SCSS, e.g. if you're using WebPack) so the team can prioritize this as a design change. It won't get addressed right away, but we do take the number of feedback items into account for prioritizing the backlog. (And I'd love to have more ammunition to make this feature a priority...)
Currently, there isn't a way in VS to disable a specific SCSS error. This could be another feature request, but it would be a low priority to implement.
I have activated intellisense for files declared elsewhere by referencing the main file (i'll name it mainfile at my example) that imports all the other using /// <reference path="./../mainfile" />.
The code should change depending on the nesting of the mainfile (replace with the name of your own starting file that imports everything else).
Also the difference between the scss file you are adding it. For instance for two folders deep ./.. for three ../.. and so on.
Another example. I usually name my starting file main and all scss files are two - three folder deep.
../../main
./../main
Sadly i did not find a dynamic way to reference the path based on unknown members of files. Also that line has to be added to every single file.
The solution above offers intellisense which sorts the error and you can see the values on hover, go to definition etc as well.
When working with Sass for Materialize and wanting to add my own .scss code to a project is it a better practice to directly modify the existing .scss files within the project, or to create your own separate .scss files, compile them to a different .css and refer to it at a later point in an HTML file to override the existing styles?
I would suggest never overwrite the classes of any library's .css or .sccs file if you are using some library like materialize or bootstrap.
Always create your own custom classes and use your CSS to modify the layout. Use your own CSS selectors while writing classes.