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.
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.
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.
When I run sass --watch app.sass:app.css terminal shows that changes have been detected to sass but won't compile to css. I am using Bourbon so all my .scss and .sass files are imported via mixins.
ex.
>>> Sass is watching for changes. Press Ctrl-C to stop.
>>> Change detected to: css/2-modules/top-nav.scss
Make sure the file you are saving with an _filename.scss has been properly imported into the mainfile.scss. if you have not imported the _filename.scss it will detect a change but not compile.
I had the same issue! In my case, it was caused by having several #imports listed like this:
#import 'colors';
#import 'fonts';
#import 'size';
When i changed it to this it all started working again:
#import 'colors', 'fonts', 'size';
Although it should not be needed:
"Sass imports have the same syntax as CSS imports, except that they allow multiple imports to be separated by commas rather than requiring each one to have its own #import." - sass-lang.com/documentation
check for the Config.rb file in your folder.
without it you have to Ctr c every time and pass this command sass --watch scssname:cssname
then You can find your code in css.
Are you sure all of your partials are being imported into app.scss? I had the same issue, only to realize the partial file I was modifying (_custom.scss) wasn't actually being imported by the main.scss.
Create scss file by correct naming (make sure there is underscore "_")
_custom.scss
Import _custom.scss in main.scss (no underscore required)
// main.scss
#import "custom";
Compile the code
sass --watch main.scss main.css
This will compile the code properly.
In your style folder create a file.scss with "_" in the beginning. For example: _fileName.scss
Import it at the start of your principal scss file. For example:
// in **mystyle.scss**
do : **#import "fileName"** (without the underscore )
Run your sass in the terminal. For example:
sass mystyle.scss:mystyle.css --watch
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.