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
Related
I have a folder with all my .scss files that I want to compile into .css files using gulp. My gulpfile.js looks like this:
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass',
function (){
return gulp.src('css/modules/*.scss')
.pipe(sass())
.pipe(gulp.dest('css'))
}
);
When I run the gulp sass command, I get the error that a variable ($med-green) is not defined in blocks.scss. It is defined in base.scss, which gets compiled first because it compiled in alphabetical order (and I do end up with a base.css file). The main.scss file is in the css directory and all the other files are in the css/modules directory, so I know the paths are correct. The How do I get the variables to be visible to all the .scss files? What am I missing?
I also have a main.scss file that imports all my .scss files. If I could use that to compile them into 1 .css file (which is the ultimate goal), then that would be great. When I try to do that, I get the error "Error: File not found with singular glob". The main.scss file looks like this, where modules is a subfolder of css, where my main.scss file is.
#import "./modules/_reset.scss";
#import "./modules/_base.scss";
#import "./modules/_header.scss";
#import "./modules/_footer.scss";
#import "./modules/_blocks.scss";
#import "./modules/_interviews.scss";
#import "./modules/_search.scss";
in your case, there is two things to tell >>>
first: to solve your problem, you need to compile only one file (main.scss) that already imports all other scss files
second: scss files starting with ( _ ), get ignored when compiling in gulp-sass,
it is like telling the gulp-sass compiler that these files are for import only.
Try with this:
return gulp.src('css/main.scss')
in your sass task. You don't want individual css files for each of your modules/*.scss files, that is the point of partials and imports - you just want the one, main.scss, which imports them all. Individually, one file will not see the other's variables because each of them do not import all the others.
You want just main.css at the end to include in your html file.
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 have two less files. one named main.less which imports bootstrap.less (which includes bootstrap variables.. etc.) and dash.less which has just styles for my dashboard. These two files should generate two css files. main.css and dash.css.
I'm including the main.css in to all my pages and the dash.css in to just the dashboard.
What i'm trying to do is: compile the main.less with included bootstrap variables in to main.css. Then compile the dash.less using the bootstrap.less variables in to dash.css. However this will result the contents of bootstrap.less to be included again in the dash.css which i don't want because i'm already including the main.css in my html.
Has anyone ever came across this ?
After trying several methods my decision was to use a grunt task to remove the duplicate css blocks.
Found a way. I had to use import like this:
#import (reference) "bootstrap.less";
.myclass{color:#bootstrap-variable;}
.anotherclass{.classDefinedInBootstrapLessWhichUsesAVariableDefinedInVariablesLess}
Using "reference" will source the imported file but not include it.
Compiling all less files to one file will be good .But if you want to have variables of bootstrap.less in dash.less. Then there is one solution , if you see in bootstrap with less dump in bootstrap.less , component wise less files are included like -
// Core variables and mixins
#import "variables.less";
#import "mixins.less";
// Reset
#import "normalize.less";
#import "print.less";
etc.so if you want to use variables you can import '#import "variables.less"' in your 'dash.less' thats it :)
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 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