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.
Related
I have a _common.scss file which I import to various page.scss files:
page.scss:
#import "common";
#page {
...
}
_common.scss:
#import "partials/all";
#import "components/all";
...
But the problem is, since all my pages import _common.scss, the way I have things structured, if I make any changes inside _common.scss (or any of the files it imports), sass has to rebuild all the page css files. But if I just make _common.scss its own file and call it with a <link> tag (<link href="common.css">), then the page.scss file has errors, because it is trying to use variables and mixins defined in _common.scss and its imports.
Is it possible to structure my project so that the page.scss files can use all the mixins and variables in _common, but so that sass doesn't have to rebuild each page.css file each time I make a change to the common file? i.e. - make it so that sass only builds the common file when a change is made in common, and only builds the page file when a change is made in page?
I would say it is not possible, since the aim is to have one css for each page at the end. This said it HAS to be rebuild if something is changed in common.
please excuse my inexperience with, and lack of understanding of, Sass.
Basically I was assigned to do some edits on a site which has a main css page and a few scss subpages, all organized through an ftp directory.
I'm just confused how the index knows where to pull the scss pages in the ftp directory? I've looked through the code for the index page, as well as the linked css and js pages, and can't find any part that references the scss pages. Yet they still load within the original css? Am I missing something?
Thanks for the clarification.
SCSS is a preprocessor language. That means it will be converted to CSS. The SCSS files do not get loaded by the website. Instead you will have to make your changes to the SCSS files and then convert them to CSS. It is likely that there is a system in place which takes care of that for you. Take a look around and find out whether there is a gulpfile or a gruntfile hanging out somewhere.
The main.scss file gets compiled to the main.css file. The output produced by the sass compiler replaces the main.css file. There is no link. You need to compile your main.scss file using sass.
Apart from that, you use 'CSS file' rather than 'CSS page' as CSS is an acronym for cascading style sheet which is definitely not page in itself.
Web browsers don't know what a SCSS or SASS file is. They only load CSS.
Your site could have a build tool (grunt, gulp, rake etc) to compile your .scss source files into .css files, which is then published to your web site.
Sometimes your application server will know how to do the translation on the fly and you can just edit the .scss file.
A lot of the time many .scss files will be combined into one .css file so you are often editing a different file to what you would expect when you look at what .css is loaded the browser.
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 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 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.