I am using webpack as the build tool, less as the css pre-processor in my application.
I have a less file named variable.less which contains the general values like color,size for the whole site, then different components require different less which use the variables defined in the variable.less
Now we need to create multiple themes for the site, I am not sure how to get start, any suggestions?
Related
I am using sass mixed with sass modules to scope styles for each component
I found myself importing the variables file at every sass module
I import by the new "#use"
would that make my final compiled css bundle bigger or sass handles it under the hood ?
also is there a better practice than adding the two lines importing the variables and mixins at every sass module it gets repetitive.
To answer first question:
Compiled bundle size won't be bigger. SASS resolve variable references under the hood to map the values.(per my understanding with SASS ways of working)
To answer your second question:
Try to have a look at the SMACSS on how to structure your presentation code. You can apply that structure to scss as well.
For e.g. essentials variables/mixins/extends can be clubbed in a utility file like _dependencies.scss and then include this one file rather including n number of imports.
I have two large projects, each project has a relatively simple web front-end with multiple themes: different colors and fonts. These themes are the same across projects
One of these projects uses scss and the other uses less. Neither are my strong suit and i am not allowed to make them use one or the other in both places. What i would like to do however is have a shared folder with a file for each theme which could hold all the variables for that theme.
This would allow me to avoid duplication and make maintenance slightly easier, while promoting consistency between the two projects which must have the same colors and fonts between them. Is there a relatively simple way of doing this?
You should read the SASS and LESS documentation. You'll see that SASS and LESS although similar both have different ways of declaring variables. So Importing a LESS file to a SASS file, and vice-versa, will not have the result you expect.
I would suggest, since it's an easy change, adapting the LESS file to a SASS file or a SASS file to a LESS file and create the base for what you want from there.
I am building an app with theming requirements that can only be determined at run time. At build time it is possible to have theme variables available for all themes.
Is it possible to get webpack to build node modules - in this case bootstrap - with different variables file? I guess at build time I would want it to build multiple versions/themes of bootstrap. Then at run time I could reference the correct css file based on some prefix.
e.g.
theme1.bootstrap.css
theme2.bootstrap.css
theme3.bootstrap.css
I am using bootstrap 4, with webpack 2.
Is possible with webpack and how can I achieve this?
Definitely. I'm assuming you are determining the themes based on a user profile type system. Take a look at below and add an if statement to look for the variable in sql then simply apply the css. simple. Try creating it and if you run into trouble post the code you have on here and i'm sure someone can help. Add stylesheet to Head using javascript in body script-in-body. also if you aren't using already bootstrap allows for theme file so you can keep the overall style loading and simply apply the color scheme you want so that you only need to load the bulkier script once.
You can use the webpack plugin themes-switch, put all your theme files in a directory, the plugin would compile themes to individual files. Then use function changeTheme to switch themes at runtime.
https://github.com/terence55/themes-switch
Let's say I have a large Sass/Less project such as Bootstrap, and I want to use one single element of it, (say, a text box.) Is is possible to have Sass/Less compile just the classes needed for that, referencing whatever variables and mixins that are across multiple files, just to compile that 1 (or 2, or 5, or 10) class(es)?
You could create mixins that aren't executed immediately by adding parenthesis. In my less library, I use a node script to create an autoload.less file which I can reference.
From there, I create my final classes as:
#import "autoload.less";
.myClass {
#myLessModule > .aMixin();
}
I don't think this is a perfect solution but it is working fairly well for me, and the resulting stylesheets do not contain excess stylings.
There currently aren't any features in Less/Sass to accommodate this. What you are looking for is a post-build process to remove unused CSS classes. The most notable currently is Uncss which has plugins available for most build tools (Gulp, Grunt, etc)
I am making a static website with Flask and using the flask-bootstrap extension to simplify the front-end development. I concurrently have been learning Rails and so I understand that there are a few of these languages that compile down to CSS (LESS/SASS/SCSS). As I understand it, Bootstrap by default uses LESS, and in my Rails app I had to convert LESS variables (with an # symbol at the beginning) into SCSS variables (with a $). This wasn't too difficult, no problem.
I noticed that in Miguel Grinberg's tutorial (Flask Web Development, O'Reilly) Bootstrap is used (Flask-Bootstrap extension), and there is the brief mention of {% block styles %} used to include stylesheets that way, I am confused about how I can go about modifying the existing LESS variables that come by default with Bootstrap so that I can modify the grid structure and not mess things up with my own custom stylesheets. I want to be able to do, for example, is modify the #body-bg LESS variable, or any of the ones here: http://getbootstrap.com/customize
It is very interesting question. I also was interesting in creating styles dynamically. You need follow another ways. It is not possible by the way you have described above.
You mentioned you used Flask-Bootstrap. This extension adopts the Flask project to use the Twitter Bootstrap styles. I have not fond any SASS/LESS functionality.
http://pythonhosted.org/Flask-Bootstrap/#
https://github.com/mbr/flask-bootstrap
If you look at the static folder of the extension you will not find any tracks of SASS/LESS.
As I know Twitter Bootstrap is generated by LESS. There is also a SASS fork. You regenerate styles and replace them in the static folder of the Flask-Bootstrap project.
If you want to do it dynamically you need create your own solution. I do not know a ready extension. It is the very challenging task.