I have just started to use less with Sublime, I have setup less2css to autocompile .less files when they are saved and to ignore partials.
I have a main.less which imports other .less files e.g. _global.less but this means every time I make a change to global I have to save it then go back into main.less to compile it.
Is there any way to get main.less to autocompile when any partial is changed?
I have figured this out, for anyone having the same issue in the future the solution I have found is to edit "main_file" in less2css settings so for my example above I have put:
"main_file": "main.less",
I suggest to start using npm, yarn or gulp if you prefer that.
https://www.npmjs.com/package/gulp-less
Related
I'm working on a custom theme for my local WordPress site. I've set up a File Watcher in PhpStorm that compiles my scss files in myTheme/scss/ to myTheme/style.css.
This works as intended, the variables which I've declared in _variables.scss are able to be used in style.css or any file imported after it.
My problem now is that the #import '~foundation-sites/dist/css/foundation.min.css'; is being compiled as #import '~foundation-sites/dist/css/foundation.min.css'; instead of the actual css content.
I've tried using #import '../node_modules/foundation-sites/dist/css/foundation.min.css'; instead but this compiles the same way.
What am I doing wrong?
.css extension in import statement tells the compiler to generate plain CSS import instead of pulling the contents in; see https://github.com/sass/sass/issues/556#issuecomment-397771726 for reference.
I'd suggest changing your import to
#import '../node_modules/foundation-sites/dist/css/foundation' - this should help.
Note that ~ prefix is a webpack feature SASS compiler is not aware of. So, when using SASS in your file watcher, you have to either change paths to relative or pass --load-path node_modules/ to compiler
I ran into this issue and this solved it for me. Uncheck Track only root files, which is defaultly checked.
Forgive me if this is naive, but I am used to using just CSS. Sass seems pretty cool and I'm down to learn it, but for some reason many of the Javascript or jQuery plugins I'm downloading have both a CSS and SCSS file associated with the stylesheet. I don't want to have to be editing two files to get results on the page, why would both be there when they seem like copies except for a few key areas? See image below, seems like there is an extra CSS file per SCSS. Is that because some browsers cannot compile the SCSS?
CSS and SCSS in same directory
Is that because some browsers cannot compile the SCSS?
Yes. There is a command line utility which converts the .scss to .css. Probably the .map file is a reverse-conversion aid for browser inspectors that understand it.
Whenever I have generated files (like a .min.js, or in your case .css that came from a .scss), I make sure the appropriate command-line conversion tool is executed automatically as part of my build script.
I'm not sure what kind of build system you are using, but there is some command line tool for conversion that will need to be executed.
You are not expected to manually update both formats. SCSS to CSS command-line converters existed long before any browser (is there one yet?) started to support SCSS.
No browser (at least major) is able to directly use SASS (or LESS). You always need to compile scss files to css, before you could use them.
You can compile css by build tools like grunt or gulp. You can even configure it to watch updates in scss files and recompile css if anything was changed.
You could have following types of files after build:
style.scss <- this is source file
style.css <- this is css file created from SASS file
style.min.css <- this is css file minified
style.css.map <- this is source map of scss file
Here you can read why css files are minified. Here you can read what are source maps for.
I jumped into SASS tonight and I'm using Sublime Text 2 with SASS Build and SublimeOnSaveBuild. After much searching, I still cannot find how to specify a different output directory. I basically have a CSS/ directory and a SCSS/ directory which contains all of my SASS files. I want to output to ../CSS. I think it involves modifying the Package Setting file in Sublime. Here is the default preferences file:
{
"filename_filter": "\.(css|js|sass|less|scss)$",
"build_on_save": 1
}
I believe the "build" or "output" path goes there but I'm just not sure. Thanks in advance.
The answer is to change the settings for SASS Build, rather than SublimeOnSaveBuild. SASS Build creates a "Build System" for SASS and SASS Minified. You can go to Preferences -> Browse Packages, open the SASS Build folder, and then edit the two files ending with -build.
"cmd": ["sass", "--update", "$file:${file_path}/${file_base_name}.css", "--stop-on-error", "--no-cache"],
You can edit the file path there (there isn't a way to do per project yet it seems):
"cmd": ["sass", "--update", "$file:${file_path}/../css/${file_base_name}.css", "--stop-on-error", "--no-cache"],
Now, how to get them to stop building partials...that's the separate issue that I'm currently trying to find the best way to resolve. EDIT: Stopped it from building partials. Posted a blog about it here.
Perhaps this does not directly answer your question, but I'd like to try.
In my SASS installation (with Compass, however), I have config.rb in my project. In there you can actually specify where the compiled CSS file go.
...
css_dir = "css"
...
If you are not using Compass, my humble suggestion is to have a look at it. It is sort of an extension to SASS (much like jQuery to javascript)
Install 'compass'. Create your next project in the terminal using compass (this is all documented) and the config.rb file will have the appropriate folders/directories and your sass/compass compiler will do everything automatically. You can either use compass watch in the terminal or a programme like LiveReload to do the work for you. In fact, use LiveReload. Honestly, you won't regret it!!!
I am building a set of Sass stylesheets using Compass.
I also have a minified copy of bootstrap.css that I would like to include in my deployed site. However, I'm not sure where to keep it or what to do with it.
If I rename it to bootstrap.scss then Compass will pick it up and compile it. This takes a few seconds and I really don't need to add to the build time.
If I leave it named as bootstrap.css then it gets ignored.
Ideally there would be a flag, or some way of telling compass to simply copy that file across rather than attempt to compile it. Does that exist?
If your CSS file should not be compiled into your finished CSS file, then it should be placed wherever your compiled CSS files go. However, this is generally not the desired behavior: a vanilla CSS #import generates extra HTTP requests.
There isn't really a down side to having your CSS file compiled by Sass, as the compilation of that file should be cached (unless you're deleting your .sass-cache files?). Sass should only recompile a file if it or something it depends on changes.
I am trying to use one main file where I just use include sass syntax to include other scss files in order I want, it works fine but only problem assetic seems won't follow the watch of files which are includes and I had to do manually dump, either do some modifications into the main file I use for includes.
I do not expect such troubles when use pure sass watch.
Probably anyone could suggest workaround over this issue?