I downloaded an HTML/CSS template online that has it's own CSS file running on top of Bootstrap. There are also some less files that contains mixins and variables. After I change the less variables, what do I need to do have my CSS automatically change?
Links to tutorials, etc, are appreciated.
You can use watch mode, or something like gulp or grunt (see links). They're task runners that will be able to watch your file tree and run tasks based on different changes. Both are really popular, but they each have a different philosophy/paradigm: grunt is more configuration-over-code, while gulp is more code-over-configuration. It just runs generic node modules and makes great use of the streams implemented in Node to achieve concurrency and more-composable tasks.
To compile Less:
lessc [option option=parameter ...] <source> [destination]
Useful Links:
http://gulpjs.com/
https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md
http://gruntjs.com/
http://gruntjs.com/getting-started
http://lesscss.org/usage/#using-less-in-the-browser-watch-mode
http://lesscss.org/#using-less (general less usage)
There are good instructions on simple ways to do it here:
http://lesscss.org/#using-less
Related
I think this should be possible, though dont know, I use tools like 'gulp' and 'webpack' to bundle asset files but is there any tool that extracts the necessary css classes, only that are being used, from the css files and pack them.
What you are looking for is called tree shaking, and usually it's already done in the build process with webpack,
You can install this plugin for css specific tree shaking or you can look for more info here about how it works with javascript (something similar happens in css)
In Gulp there is package called Uncss
https://github.com/ben-eb/gulp-uncss
and also an addon that is available for firefox
https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/
which will help you in removed unused css
Take a look into tree shaking, there are several that are for specific css.
I'm working on a site that uses Gulp to compile its SASS, among other things. It was set up by another developer on my team. I am brand new to Gulp and don't use SASS much either. However, getting it up and running was easy.
The one problem, though, is that when I ran Gulp, even though I hadn't changed anything in the source files, it changed pretty much every generated CSS file in the project. Every file had /*! typey | GPLv2 License | https://github.com/jptaranto/typey */ added at the top, and there were many files where numeric values changed by a tiny bit (like skewX(0.39063deg) → skewX(0.39062deg)). And it also added hundreds of *.map files which didn't exist before.
This has happened to me before using Compass too. It pretty much makes looking at the diff useless to see any actual changes. Is there a way to unify the output of our Gulp so this doesn't happen?
(Related question: what's the difference between rv.js and r.js?)
I've got a series of RactiveJS-based components, each in their own module. I use the rv.js loader (linked above) mentioned on the Ractive site. I love it, but what I want to do is use that (or something similar) to build to one JS file that will work even in non-AMD/RequireJS apps. I've looked at Almond, but it seems to want to use r.js (rather than rv.js), and I'm not sure what the difference is or what changes I'd need to make.
Bonus points: is there a way to run all of this in Gulp? I'm one of those people who cringes when he has to use the command line, so please talk slowly and forgive my ignorance:)
A bit late to answer, apologies for that.
rv.js is a RequireJS plugin that loads ractive components as if they are javascript modules
r.js is the RequireJS optimizer, used to bundle together all files and minify (exactly your use-case)
RequireJS is quite large in size, and you don't want it bundled with your application js during a build.
Enter almond.js. It mimics the module resolution of RequireJS, but doesn't have the code to handle actual loading of the files over the network. The result is a smaller file size.
So, your workflow would be:
You use RequireJS during development
Use rv.js, as you are already, to load ractive components
When it's time to build, you use r.js to build
And ensure almond.js replaces RequireJS in the final built js file
Now, I use grunt, and there is a plugin for that: grunt-contrib-requirejs
For gulp, I suggest gulp-requirejs-optimize
It has options to replace requirejs with almond during the build process if you look at the documentation on that page.
Hope that helps.
I'm curious what's the easiest way to build total.css based on total.less file that contains list of another imported .less files.
P.S. there are many less files with complicated structure so online tool to get the css file is not a choice in our case.
In my opinion, the easiest way to compile LESS into CSS is using the LESS.app for mac. Alternatively, the Offical Documentation for Less has a number of other tools you can use, such as the NPM command line utility.
If you wanted to compile LESS in your browser, you could also set up less.js for compiling LESS to CSS on the client-side. (However, I only recommend this for development)
Or what is the best practice to "import" a less file in sass files?
I'm building a rails project with SASS as the solution for writing syntactic css. The SASS parts worked fine, until I find out that the styles of some open source projects are written in LESS and I really want to reuse their artwork.
Should I just let Rails precompile all LESS and SASS files, and require the result css files in a specified order?
The license of these third party projects are different. Understanding all the details about intellectual property laws seems to be too much work for the small project I'm doing (e.g. should I keep a css file MIT licensed if I changed 90% of it and just used the color palette?), this project will be open sourced as well, so I would like to keep the codes untouched for now.
Update: A easy way of translating all LESS files to SASS files would be nice as well.
From my understanding, LESS & SASS are compiled differently (although are similar)
Would you be able to translate the LESS files you wish to include?