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?
Related
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.
I am attempting to simply change the colour of the "is-primary" class in bulma. I am attempting to write a scss file to change the values without installing bulma via npm. I am attempting to import by using the cloudfare link, is this possible?
this is my scss file:
#import "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4./css/bulma.cssbulma/sass/utilities/initial-variables";
$tech-blue : #2c3e50;
$primary : $tech-blue;
#import "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.3/css/bulma.css";
This file compiles but I cannot find the corresponding css file and makes no affect to my actual page.
I don't think that this is possible. The variables in use by Bulma are only accessible by SCSS. So you need to build the whole thing to have your colors blend in. The rendered CSS already contains:
a {
color: #00d1b2; /* can't change that later on */
…
}
A feature request for Bulma would be to make those variables accessible via CSS variables. That way you could easily customize the look even with the pre-rendered CSS from the CDN.
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';
I tried several times to use #import 'reset' in my sass code. Unfortunately its not importing. The rest of the code sublime highlights and recognise with no problem. What should I do to #import the reset.css through sass?
When #importing CSS files into your SASS, you need to specify file extension (e.g. #import "reset.css";). See documentation.
Note: Importing file with .css extension will result in a real "CSS import" at runtime instead of inline SASS-like import. If you want to inject the contents of the file into your compiled CSS, change file extension to .scss.
I’m diggin into Liferay theming with Sass.
One thing I really like to know is: How to make use of variables defined in the theme within a custom portlet.
Because I want to have generic theme related styles within my theme and portlet specific styles within the portlet to increase maintainabilty und portability.
Lets say I have the follwing file within my theme:
css/_ aui_variables.scss
Within this file I have overridden the default values of the Bootstrap variables defined in the parent theme:
_styled/css/_aui_variables.scss
Of course I would like to make use of these variables in my portlet specific Sass files which I would like to place within portlets main.css (which is compiled by the Sass parser as well).
Please let me know that this is possible.
When trying to import my variables in the portlets main.css via:
#import "foobar-default-theme/css/_aui_variables";
My console in Eclipse (Liferay IDE) shows me the following error message:
File to import not found or unreadable: foobar-default-theme/css/_aui_variables.
Load paths:
/Users/mkuehnel/Documents/Projects/foobar/liferay-portal-6.2-ce-ga2/tomcat-7.0.42/webapps/ROOT/html/css/common
/Users/mkuehnel/Documents/Projects/foobar/liferay-portal-6.2-ce-ga2/tomcat-7.0.42/temp/25-foobar-top-navigation-portlet/css
/Users/mkuehnel/Documents/Projects/foobar/liferay-portal-6.2-ce-ga2/tomcat-7.0.42/webapps/ROOT/WEB-INF/lib/sass
/Users/mkuehnel/Documents/Projects/foobar/liferay-portal-6.2-ce-ga2/tomcat-7.0.42/temp/liferay/ruby/gems/compass-0.12.2/frameworks/blueprint/stylesheets
/Users/mkuehnel/Documents/Projects/foobar/liferay-portal-6.2-ce-ga2/tomcat-7.0.42/temp/liferay/ruby/gems/compass-0.12.2/frameworks/compass/stylesheets
Compass::SpriteImporter
/css/main.css:2
[…]
Any hints appreciated.
Best regards,
Michael