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.
Related
I have some problems with SASS in ionic,
Whats the problem?
The problem is that custom stylesheet's doesn't work how it should.
I have sass folder with ionic.app.scss file and _test.scss file with some code.
I imported _test.css in ionic.app.scss file like this:
#import "../scss/test";
And when I edit and save ionic.app.scss, it's works perfectly, compiled in min.css and working in my browser, but when I edit and save my _test.scss file, nothing happening. _test.scss file only works, when I compile my ionic.app.scss file.
Can someone help me with that? What I miss??
Without seeing your folder structure, It's a shot in the dark but i think your _test.scss file isnt being watched.
Try moving it to be in the same directory as the other files and change your import to be.
#import "{folderName}/test";
Just make sure its within the scss folder with the other files
First of all I'm assuming you are using Ionic 1.x.x in my answer. You have a couple of places where you should check.
First is the ionic.project file:
"watchPatterns": [
"www/**/*",
"!www/lib/**/*"
]
Make sure you have your directory inside the watchPatterns. This most probably is correct since it's the Ionic default. You however mentioned sass folder in your question so I can't be sure. This is why I'm suggesting all the custom folder stuff below. Although you also mentioned that ionic.app.scss is located in the same folder so the folder probably is the default ionic folder if you have not changed the name of the folder.
Secondly in your gulpfile.js you have the following:
sass: [
'./scss/**/*.scss',
'./www/customfolder/**/*.scss'
],
Make sure your css file is included in these paths. The second one is a possibility when a custom folder is used. Just set the path correctly. This will then use the default ionic gulp task sass and watcher watch.
After this you should be able to include your custom SASS stylesheet in the scss/ionic.app.scss file (not in www folder) with the following:
#import "www/customdirectory/style"; // If custom directory
/* IN YOUR CASE */
#import "style";
If the _style.scss file is in the same directory as the ionic.app.scss then you do not need to set the path, just the name of the file is enough.
Hopefully this can be helpful to you when trying to solve your problem.
I'm saving files as _import.scss and importing them into a main Sass file using #import "import". However, when I save these import files, something is automatically creating files called _import.css and _import.css.map.
I have no idea how this is happening. I'm using Sublime Text, and I have the Sass, Compass, and Bourbon gems installed on my system. However, there's no sass --watch running in my command line. How are these files being generated automatically and how do I stop it? I just want the main file to import the files and only then create a .css file from that one file.
My project directory looks somewhat like this:
- project
- scss
_import1.scss /* these files are to be imported */
_import2.scss
_import3.scss
style.scss /* this is where the imports go */
index.html
style.css /* the ONLY file I want generated automatically
(from scss/style.scss) */
Basically I just want to run sass --watch scss/style.scss:style.css without generating a huge clutter of files from my imports.
Wow, okay. Five minutes after typing this out I found the answer myself. I feel stupid. Anyways, the something creating these files was Sublime Text's packages 'Sass Build' and 'Sass Build on Save' which I installed ages ago and completely forgot about.
I have asked to clean up the LESS library and style file referenced in the head section of the application for redundancy and decreasing load time. The style file is basically style.less file and it is containing all other less files, I need to come up with single CSS file that could be style.css so everything is fine like I am getting the CSS output as style.css but there are a couple of files which are not compiling and changing in CSS. Below is a preview of style.less with other imported less files.
content of style.less
#import url('variables.less');
#import url('mixins.less');
#import url('base.less');
#import url('kendo.less');
#import url('header.less');
#import url('navigation.less');
#import url('lists.less');
#import url('treeview.less');
Where that variables.less and mixins.less are not compiling in CSS I don't know what is missing, there are nested rules applied in them may be they are making errors as I heard that there is a need for a config file to process nested variables and mixins when imported and used for plain CSS. I am unable to find the solutions to this, your help will be highly appreciated. Many thanks.
Here are my settings for the Web Essentials LESS Compiler:
OPTIONS > WEB ESSENTIALS > LESS
Auto-compile dependent files on save: TRUE
Compile files on build: TRUE
Compile files on save: TRUE
Create source map files: TRUE
Custom output directory: _PATH_TO_OUTPUT_YOUR_ONE_CSS_FILE
Don't save raw compilation output: FALSE
Process source maps: TRUE
Strict Math: FALSE
Show Preview Pane: TRUE
ALL of your LESS files except the main import LESS file should be prefixed with "_". So for example:
_base.less
_variables.less
style.less (holds the imports for base and variables).
Make sure you are using Web Essentials version 2.5. There was an error in the version after 2.5 that mucked up the precompiler. I don't know if they have updated with fixes yet.
I am planning on dividing up my LESS CSS into multiple files to modularize my CSS and make it easier to manage and maintain. Ultimately I will be using #import to import all of my modular CSS files into one file that will get enqueued in WordPress.
Is #import a bad idea for performance?
Yes, using multiple imports will incurr equivalent number of file requests the browser has to make.
As long as you compile the LESS source into a CSS file and include that CSS file as the stylesheet for your site, performance will not be an issue.
For example when you make a Wordpress theme you can make a folder for your CSS and then compile it using for example simpLESS (if you are on Windows)
Sample template directory structure:
-themes/
-your-theme/
-less/
-main.less
-import.less
-etc.
-style.css <- this is the target file you would compile into
-index.php
-etc.
You can setup the target file to compile into easily. Also, simpLESS will keep the first top comment in the resulting file so that you can put your theme information in it.
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.