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.
Related
My team is making a project using Vue 3 with SASS. There were 3 ways to organize the folders:
1- each view page is inside a separate folder inside views folder. Each of these folder has a .vue file and a .scss file. The .scss file is using #import from a main .scss file inside assets/scss folder.
2- view pages are not on separate folders, and instead they're importing .css files for each one, which are on assets/css folder.
3- use inline .scss coding on each .vue file.
We opted for the first option, but then I noticed I couldn't use #use with this method or the vue project won't compile. Since there's a recommendation to use #use instead of #import for SASS, should we use the second method (import .css files instead) or the 3rd?
Thanks!
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.
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.
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'm more familiar with SASS, wherein I can create scss files that start with an underscore so that the scss compiler ignores them. I then import these files into a main.scss file, and they are then compiled into that. Then my HTML onlt links to the main file.
Is there a similar mechanism for LESS? I know how to import files into a LESS file, but will the child LESS files compile to separate CSS files anyway?
I did some experiments, and apparently the underscore at the name beginning works for LESS as it does SASS. (At least using CodeKit on Mac).