normally I use SCSS, which my PHPStorm IDE transpiles into nice css for me. I use a lot of includes, which in SCSS if you use an underscore as a prefix (eg _layout.scss) the transpiler recognises that this is going to be an include, so doesn't transpile it.
So I've started using LESS, but it doesn't have this same rule. Every LESS file gets transpiled, whether it uses an underscore prefix or not. But this bugs me, because there's unnecessary css files in my project, which gets annoying mostly when I search.
So my question is, is there a standard prefix I can use in LESS which won't transpile the file?
Related
i'm trying to implement rtl/ltr in my nuxt application.
this is my project structure
|--assets
|--scss
|--**/*.scss
|--bundle.scss
|--bundle-rtl.scss
so styles are compiled into the bundle and bundle-rtl normally.
the problem is this .. how can i switch between theses two scss files without changing them manually within my nuxt.config (automatically change the scss file when the language is changed).
among these files is a mixin file with many mixins related to rtl and ltr switching so i need to use them in each vue file that i have. which is why i can't just compile them to css (with gulp or webpack for example) and include them in head.
aside from all of this, is this the best way to implement ltr/rtl in nuxt or is there a better way?
In my opinion, you should write modern CSS that takes this into account rather than having a duplicate. This will have the benefit to also be usable by other languages.
Check this awesome article: https://css-tricks.com/building-multi-directional-layouts/
Lately I was working on a vue3/vite + ts project and wanted to add eslint and prettier, but I'm getting confused what settings I should use in the eslint file(section "extends") and/or how to spell them. If I look at the official eslint vue homepage, they write the prettier stuff like the not commented out lines(picture below).But if I look at the official eslint-config-typescript page they write it like the commented out lines(picture below).
And if I google I find both examples in projects. So my question is:
Is there any difference between the writing?
Or do they do the same and it doesn't matter which one I take?
I don't know much about vue3/vite + ts, but I see here 2 moments:
Usage of #. It is likely to be related to webpack (I believe you use vue-cli). It usually means something like that: resolve: {alias: {'#': path.resolve('src')}}, So, # is just an alias for some path in your system, usually root/source folder for your project. You can find the exact path in webpack.config.js.
vue/prettier vs prettier/vue. Just location of the package. You either take prettier bundled with vue or a standalone prettier package that contains some custom/adopted version for vue. They are likely to be pretty much the same, check their package.json files for versions.
I would like to start using Less rather than writing CSS from scratch, but is it possible to use Less in such a way that all the following things are true:
I can write Less within my own text editor (TextMate)
I don't have to compile the CSS manually after each edit, but can just save the Less file
my CSS is not reliant on JavaScript (at least not in production).
I've tried to Google the answer to these questions, but I can't figure out a clear answer. Thanks for your help.
The short practical answer
There are several tools out there that help you to compile your LESS into CSS on the fly each time you save your LESS file. Most tools do much more than just compiling LESS, they also come with "live reload" functionality, compile coffeescript, handlebars, SCSS, run JSlint, combine JS, etc.
LESS compile tools selection:
http://gruntjs.com/ < open source, comand line interface
http://koala-app.com/ < GUI, cross platform, free
http://crunchapp.net/ < GUI, cross platform, free, based on AIR
http://wearekiss.com/simpless < GUI, cross platform, free
http://alphapixels.com/prepros/ < GUI, windows, freemium
http://incident57.com/less/ < GUI, Mac, small simple tool, free
http://incident57.com/codekit/ < GUI, Mac, commercial, powerful
https://github.com/Mte90/Plessc < GUI, Linux, free
Please consider project size. most of the tools work really great if you work alone, but for team work you'll need some sort of configuration standard (config file).
When using LESS CSS, you still have to write your css styles from scratch. Not unless you have and use your own css framework. If you use or have as such, you may just have to define your VARIABLE and MIXINS,and your additional custom styles.
Such LESS CSS Framework includes Twitter Bootstrap. You don't have write CSS from scratch when you use it in your font-end development, you only need to add/adjust your own customizations.
You can write LESS with your editor (TextMate). Since LESS file is also a CSS file with an extension of LESS (style.less). Only that your browser cannot parse the LESS file without using LESS in client side (by linking to less.js file in your document head). If you checkout this page, you can see that TexTMate is listed as one of the Editors that supports LESS (It has syntax highlighting).
You don't have to compile LESS to CSS file manually.
When compiling LESS file to CSS file, you have the Command Line compilers and the GUI compilers. When using Command Line compiler, you'll have to use of course your terminal to command the compiling ($ lessc style.less style.css). When you opt to use the Command line option, you'll have to install NPM and Node.js. Install NPM first, before Installing Node.js, since NPM will let you install Node.
You will not rely on JavaScript in production, if using LESS, because you only use LESS during development. You will be using JavaScript (less.js) when you opt to use LESS in Client Side (browser side).
Here are some links that will give more info about LESS Usage http://lesscss.org/#synopsis:
This
This
This
LESS CSS is a CSS Pr-processor just like Sass
Some LESS Examples
Using Variables: Using variables during development, makes your work flow faster. Changing colors is just a breeze using variables.
#black: #000;
#grayDarker: #222;
body {
color: #grayDarker;
background: #black;
}
Read more examples from the given links.
I have two files:
black.less
/* imports */
#import "elements.less";
#import "crush.less";
#import "tree.less";
I'm using the less watch functionality by adding:
less.watch();
Sure enough I can see the traffic getting black.less. Black.less hasn't changed though so any change in any of the files being imported is not counted as a change and the style is not updated.
If I however touch black.less the style updates as it should.
Is there a way to automatically update regardless of if it's an imported file or the actual less file being added to the page i.e. so that I only have to change let's say tree.less.
/K
I use Grunt and the grunt-contrib-less plugin to watch all of my less files and compile them into CSS as they change.
Then I use live.js in the browser to watch the CSS files.
The advantage to doing it this way is that I can do the same thing with my HTML and JS files, as well as run tests, lint my JS files, etc.
Remy Sharp recently wrote a post about how newer versions of Chrome support the ability to save files that you edit in the dev tools back to the file system.
He advocates Never having to leave devtools. Just do your edits right in the browser. The advantage to this solution for you is that you could continue to use the client-side Less compiler.
(I still like my robust text editors and command-line too much to ditch them entirely, but thought this answer would likely appeal to at least a few people who arrived at this question.)
Here's another quick way.
watch -n 1 touch black.less
This may be too late for op, but I had the same question and maybe others have it too.
less-watch-compiler will watch a directory (and sub-directories) for changes and compile any less code to a destination folder. The cool bit is that you can specify the main file and only the main file will be compiled when any file in the source directory is changed.
Usage:
less-watch-compiler [options] <source_dir> <destination_dir> [main-file]
Sorry for the horrible question wording, let me explain.
For a project I'm working on, I'd like to manage various dependencies for my LESS files on the server. Because of the way the project is structured (different components symlinked in different ways), it's much more limiting to just use #import to build dependencies etc.
Ideally I'd like to just spit out a list of required LESS files in the section, e.g.:
<link rel='stylesheet/less' href='/path/to/some/file.less' type='text/css' media='all' />
<link rel='stylesheet/less' href='/path/to/some/other-file.less' type='text/css' media='all' />
Then, for example, if a variable or mixin is defined in file.less, I'd like to be able to use it in other-file.less.
From what I can tell, that doesn't work. Each LESS file seems to exist in its own scope and variables etc in one are not available in the other.
Is this correct? Is the scope entirely limited to a single file and any #imports therein? I'm reasonably sure that it is, but not entirely.
For now, my workaround is more complex than I'd like: I'm building dependencies server side, and then munging them into a giant, single development.less file on the fly. (Note that for production purposes, I have a build process that compiles and minifies my less so that I serve straight up CSS).
I've looked at browser.js in the LESS source code for clues but thought I'd ask here first if this was possible or even desirable. I was a bit surprised at this behavior since it's not how multiple javascript files and inline code work.
Why It Doesn't Work
Each <link> of a LESS file preprocesses that file and resolves it to just a plain CSS output. No variables or anything are left in the "scope" of the html itself, so there is nothing for the second <link> to be able to use. That is why one cannot read the other.
A Possible Help
With LESS 1.5 an #import can be made to just be a reference (and thus not compile direct output into the file). So your other-file.less could do this:
#import (reference) file.less;
To gain the dependencies needed for it.