I'm using elixir to compile my scss files.
assuming that this is my folder structure:
- app.scss
- header.scss
- footer.scss
- home/
- home1.scss
- home2.scss
For one file I can use mix.sass('app.scss'); but what if for all files in my directory without need to add them one by one?
I've tried:
mix.sass('*.scss');
mix.sass('**/*.scss');
mix.sass(['*.scss']);
mix.sass(['**/*.scss']);
and the only file I can get is the public/css/app.css
How can I compile all files in order to get something like:
- app.scss
- header.scss
- footer.scss
- home/
- home1.scss
- home2.scss
I think the wildcard solution doesn't work at all.
Have you tried to import your file dependencies, with #import "file2", and only process those files?
Assuming:
home1.scss
#import "../app"
#import "../header"
#import "../footer"
// home1 css
home2.scss
#import "./home1"
// home2 css
with:
mix.sass('home1.scss');
mix.sass('home2.scss');
you'll generate only home1.css and home2.css with the dependencies style on them.
This way you'll improve your code and get a better control from dependencies.
You can provide the file globs as an array, like this:
mix.sass(['./app.scss', './home.scss'])
Or you could import just one sass file in elixir and use the sass import directive in that file to include the rest of the files.
#import 'home.scss';
http://sass-lang.com/documentation/file.SASS_REFERENCE.html#import
Related
In my project i use many scss files (more than 100 files).
The file structure is similar to the BEM project.
scss/
--block/block.scss
----/__elem/block__elem.scss
--menu/menu.scss
----/__elem/menu__elem.scss
and etc...
All files compiled to css files with gulp-sass plugin and concatenated to 1 css file app.css
The same folder i have 2 scss files.
_variables.scss - for define custom variables
style.scss - main file (i use that file to import my variables).
scss/
_variables.scss
style.scss
In style.scss file contained import line with variables
#import "utilities/variables";
Yes, all variables is successful define in style.scss file, but how to define my variables for others scss files (for all scss files in folders and subfolders)?
For another files except style.scss in gulp project gives an error message:
out: error sass/menu/menu.scss (Line 5: Undefined variable: "$laptop".)
Thanks in advance.
I solved this problem. Now i just concatenate all scss file with variables and only then connect them to the general css.
Something like this:
sass/**/*.scss + _variables.scss> app.scss > app.css
Novice web dev here getting set up with SASS for the first time. Currently using Grunt to compile my css from a main SASS file.
So I have three files:
//main.css
/*some css*/
//main.scss
#import 'header';
//_header.scss
/* some sass */
When I edit and save the _header.scss file, I also have to save the main.scss file. Only then will gulp compile changes in the main.css file.
Is there a way to "autosave" every file that contains an import of a partial?
Based on what your providing I am thinking it has something to do with your main.css stuff at the top of your file. I am assuming that you have actual css below that comment in the real file?
Best practice is to #import everything at the top of the file before you do anything else.
If that is exactly what you have in the real file then it might be with how your running grunt.. Would you be able to provide your grunt config file please?
If I want to split my scss into multiple files, does every file need an import statement.
Eg if I have
_variables.scss,
Header.scss
Footer.scss
Content.scss
Will the (bottom) 3 files require imports in them (if they're using variables)
I want to have a final file eg Site.scss that merges the 3 with imports
or should the variables imports go in Site.scss too?
Every file needs an import statement, but they can all be in the root file.
Here's a great little tutorial that I've been following to make it work:
How to Structure a SASS Project
In your Site.scss file, import the _variables.scss at the top and all other files below it
#import 'variables';
#import 'Header';
#import 'Footer';
#import 'Content';
That way all other files can use the variables. You don't need to include _variables.scss in every other files.
I use Laravel 5 and Elixir.
I have app.scss which imports _bootstrap.csss (installed by bower), and these files are compiled to one file public/css/app.css.
Also I have some CSS files in other dependencies (installed by bower), and I want to add them to public/css/app.css.
How can I do it?
First you'll need to rename your .css file as a .scss file, then you can import the new .scss file into the app.scss file using the same method _bootstrap.scss is imported.
#import "path/to/css/file.scss";
In you app.scss file you can import both formats .scss and .css
To import a SCSS file this is the sintax: (without extension)
#import '~bootstrap/scss/bootstrap';
Instead to import a CSS file you have to add the .css extension
#import "~jquery-ui/themes/base/core.css";
I have _header.scss, _footer.scss and _main.scss and I want to combine them all into one and generate style.css.
I know it has to do with file watchers, but I haven't been able to figure out how to combine multiple files into one.
Create file styles.scss that contain this code
#import 'header';
#import 'main';
#import 'footer';
It's not a PHPStorm feature, it's a SASS feature.
In style.scss it should start out with:
#import "_header";
#import "_footer";
#import "_main";
PHPStorm doesn't have to combine the files, Scss does.
#SlawaEremkin above is correct.
Be sure that the import file is named without an underscore (not a SASS partial) otherwise there won't be an output CSS file.
Correct
styles.scss
Incorrect
_styles.scss