This question already has answers here:
Import regular CSS file in SCSS file?
(15 answers)
Closed 7 years ago.
I am trying to find out if Compass can merge .css files rather than using a third party tool to merge the .css files after Compass has compiled the .scss files. I have looked around the web and on here but nothing so far. I thought the config.rb may have an option for this but all I found is compress feature.
Anyone tried this or have a found a third party tool that works well with compass?
I'd wanted to do this same thing for quite some time. I finally settled on the following solution.
Take the following structure (i.e. with your modules in a sub-folder of sass)
project
sass
modules
header.scss
blog-posts.scss
footer.scss
something-else.scss
main.scss
stylesheets
Update main.scss to contain:
#import 'modules/header.scss';
#import 'modules/blog-posts.scss';
#import 'modules/footer.scss';
#import 'modules/something-else.scss';
Run the following command (from the project folder) in order to build
compass compile . sass/main.scss -s compressed
This just compiles main.scss, which inturn goes and imports each of your modules. Additionally the compressed style option minifies the output.
It's not compression, but you can exclude files from being copied to the output directory by prepending an underscore to their names. For example:
scss/
_core.scss // will not be copied
theme.scss // #import 'core';
css/
compass compile
create ../css/theme.css
css/
theme.css
Related
I am currently restructuring my project using the 7-1 architecture as proposed in https://sass-guidelin.es/#architecture.
Now, i am using flaticons in my project. Where in the structure should i put the folder and scss file provided by flaticon, and where should i import it?
The 7-1 pattern lists the following sub-directories along with main.scss:
./
base/
components/
layout/
pages/
themes/
abstracts/
vendors/
main.scss
Where to place external library/framework scss
The vendors folder is meant for SCSS of external libraries/frameworks like _flaticons.scss
If flaticons is a directory with many things rather than a single file, then you can just place the whole flaticons directory in the vendor's folder.
Import
In main.scss in the sass-root directory: #import 'vendors/flaticons';
or the following if your stuff is in a directory: #import 'vendors/flaticons-directory/flaticons-main-file'
Be mindful of the ordering of imports in main.scss because it's possible to define general variables and mixins in one file, and refer to them in other files, so the files that define them must be imported before the files that use them.
Additionally, the SASS will be compiled to CSS rules in the same order that they are imported, so the normal inheritance / cascading will apply to the compiled CSS rules.
I wanted to use Bootstrap 3 and Less together. Here is what I did:
installed Node.js
installed Less using npm
downloaded bootstrap source (in a different directory than my project's directory)
copied the entire '/less' subfolder to my project's working directory.
created my custom .less file (e.g. styles.less) and included the following:
#import '../less/bootstrap.less';
#import '../less/utilities.less';
compiled in the Node command prompt using: ' lessc styles.less > styles.css '
My question:
Do I now need to only include the compiled styles.css file with my project or do I have to include all the bootstrap components as well?
Also, is this workflow recommended? (I actually read something similar in a smashingmagazine.com article).
PS: Apologies in advance for this silly (I think) question.
Thanks!
If you used
#import "bootstrap.less";
..inside your main less file, then the bootstrap.less will be included during compiletime and will be inside your compiled styles.css.
After your styles.css has been compiled, you only need to include this file into your project.
PS. Also take a look inside your styles.css file, to see what has been compiled inside there. Or play around yourself/experiment. For example, create 2 different less files, #import them inside your main.less, compile and see what happens.
I am learning less and im struggling to understand how the output .css files are defined. I am using a sample template that has already got less files defined which are
about-section.less
base.less
callout-section.less
mixins.less
responsive.less
styles.less
theme-default.less
in visual studio i have defined the following folder structure and dropped all the less files into the less directory so it looks something like this
>content
>>css
>>less
>>>about-section.less
>>>base.less
>>>callout-section.less
>>>mixins.less
>>>responsive.less
>>>styles.less
>>>theme-default.less
>>>header.less
>>>footer.less
To compile the less files i am using something called winless (http://winless.org/) which is just a program that lets you choose a direcorty that contains less files and each time i save in Visual studio all the files get compiled.
Winless state the following
If you have a folder called 'less' and a folder called 'css' on the
same level, add the parent folder. WinLess will then automatically use
the css folder as output folder.
When my less files are compiled the css directory is populated with four .css files which are
>>css
>>>mixins.css (contains nothing)
>>>responsive.css (contains minified css (media queries))
>>>styles.css (contains minified css)
>>>theme-default.css (contains nothing)
What i dont understand is how do you define which .css files are created as output? i dont require mixins.css, resposive.css or theme-default.css.I just need styles.css because that contains everything.
Why doesnt header.less, footer.less etc output as .css where is it defined that mixins.css, responsive.css, styles.css and theme-default.css are created as .css files?
My styles.less looks as follows
#import "mixins.less";
#import "theme-default.less";
#import "base.less";
#import "header.less";
#import "footer.less";
#import "responsive.less";
#import "about-section.less";
#import "callout-section.less";
thanks
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.
This question already has answers here:
Import regular CSS file in SCSS file?
(15 answers)
Closed 7 years ago.
I can use Sass to compile multiple .SCSS or .SASS input files into a single .CSS output file using #import as described here.
If I use #import to include normal .CSS files, they are not merged. The output .CSS file still contains the #import directives. That makes sense.
But is there a way I can override this behavior, perhaps a command-line switch to the Sass compiler? In other words, can I tell Sass to attempt to forcibly merge #import "foo.css"; just as if it were a .SCSS file?
I'm using a third-party library (Google Closure Library) with many .CSS files. I'm only using a few of these in my project. I'd rather avoid manual solutions such as renaming all these files as .SCSS (although this seems to work) or copying and pasting their contents into my .SCSS file (also works). And I don't want to serve them all to be imported on the client-side. I'd really just like Sass to include the few .CSS files that I use 'as is' and produce a single output stylesheet. Possible? Are there any other tools I should look at?
every CSS file is a valid SCSS too.. so if you change the files you need "invisibly" imported or merged to _filename.scss then #import from the main scss file using #import "filename"; (extension optional) it should compile to one big CSS with no #import statements inside it
edited to add: sorry just saw your edit after a browser crash.. and see it's not what you're looking for, I don't know of another way
I haven't found a way to do this in Sass.
My workaround is to import third part libraries directly from their URLs. Of course this only works for CSS libraries that are served via URLs. It's still importing multiple files but at least I don't have to rename files and otherwise manage a modified copy of the vendor's CSS library.
Example:
// ORIGINAL: locally managed, modified copy (bad), no #import in output (good)
#import 'my_modified_copy/closure/goog/css/common.scss';
// WORKAROUND: vendor-managed (good): #import in output (bad but acceptable)
#import 'http://closure-library.googlecode.com/svn/trunk/closure/goog/css/tab.css';
Before release, I'll probably add a script to pull a current version from the vendor and rename all .css files as .scss files. But for now, the above workaround is acceptable for development.
This can be done server-side and save you a bit of hassle if that's an option. Since you're just merging the files together and since it's just CSS there shouldn't be any conflicts in the information that should harm your site. Also, this way gives you flexibility to make updates to the CSS as frameworks are improved.
Ruby is not my language of choice but still very viable to do everything needed here. There is a tool out there written in Ruby that will do this for you with CSS as well as JS files. Take a look at this blog post to get the rundown:
http://cjohansen.no/en/ruby/juicer_a_css_and_javascript_packaging_tool
I hope that this is helpful, and please let me know if you need anything else on this one.