I have some .less files in a folder of my project.
I use PHPStorm, and it can automatically compile the .less files in CSS format.
Because I have to import some of these .less files into the main less file, I don't want them to be compiled as a single CSS file; instead, I just want the main.less file that I imported the other .less files into it, to compile in a CSS file so I can add it to a page.
For instance in SCSS, for this purpose we add an underscore at the beginning of the file name; then that SCSS file won't compile again.
I tried to use this way in LESS, too but it didn't work.
Related
I have this template - web template - editorial when I added it to my existing Meteor app it does not load the scss files, only the css file which is in the client directory. Though I put the scss files in the public folder. What best way can I add this? because I could not get it to work i decided to compile the scss to css.
sass_folder
scss_subfolder
----base_scss_subfoler
_partial1.scss
_partial2.scss
----components_scss_subfoler
_buttons.scss
_textbox.scss
----layouts_scss_subfoler
_pages.scss
_footer.scss
----libs_scss_subfoler
_functions
_vars
_skels
_mixins
main.scss
ie8.scss
ie9.scss
css_output_folder
I have tried to compile the files by doing thus on the cmd: sass --update scss:css it only compiled the main.scss, ie8.scss, ie9.scss to the css folder, other are not compiled. How do I compile all at once and maintain the same sub-directory folder in the css folder. Why and how do I do this?
If other files name start with _ character then these files are partials meaning they get no compiled and their content can only used with import.
Read the official doc about partials.
The files with names starting with underscore are considered as partials and not compiled to css files. That is why you are not seeing those in your output css.
Please navigate to section with heading 'Partials' in this document ... and read the next 2 sections.
You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. This is a great way to modularize your CSS and help keep things easier to maintain. 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.
Say I've built a .CSS file that I compiled from a .SCSS file.
What happens if one of my team members directly edits the .CSS file, and I come along and recompile a change to the .SCSS file?
How do I stop the direct updates to the CSS file being lost?
You can't.
You must enforce .css files to be only written by scss compiler.
I am successfully using Compass to generate a CSS file but it is also outputting my partials to the CSS directory. How can I make it only output the stylesheets that will be used in the page? There's no need to add the partials to the destination css directory.
From the manual:
If you have a SCSS or Sass file that you want to import but don’t want
to compile to a CSS file, you can add an underscore to the beginning
of the filename. This will tell Sass not to compile it to a normal CSS
file. You can then import these files without using the underscore.
http://sass-lang.com/documentation/file.SASS_REFERENCE.html#partials
I have the following sass directory
sass
config.rb
-base.scss
-mixins.scss
-main.scss
site
-dowmloads.scss
-messages.scss
...
...
This works fine, however I don't want all my .scss files to compile to css files.I just want to output main.css because it imports the other files.
Whenever I do compass watch all the css get created...
Is this possible?
Start the filename with an underscore. You can then import this and it's styles will only get added to the file that imports it. The actual file itself will never get generated into it's own css file.
Hope it helps.
I had a doubt regarding compiling the scss file using compass. For example I have 2 directories, 1 for Sass and another 1 for my CSS files. In my css directory, I have 2 CSS files... "xuvs.css" and "site.css"....
If I make changes in the "xuvs.scss" file, so during the final compilation, by default Compass applies the changes to "xuvs.css"... So is it possible to apply those changes in the "site.css" instead of "xuvs.css" file using compass?
By default, Sass and Compass will output .css files for any matching .scss files that are not prefixed with an underscore. This is why your "css" directory contains the two compiled files: one for each of your .scss files.
It is possible to modify xuvs.scss and have it compile into site.css: you would do this via the #import rule, however, unless you changed the file name of xuvs.scss to _xuvs.scss, you would still have a separate, compiled file named xuvs.css. Files that are prefixed with an underscore are called partials.
It is considered a "best practice" to create partials and #import them into a single, compiled "base" .scss file. In your case, this compiled file would be called site.css.