Is it necessary to have a .scss partial file start with an underscore? The documentation states that a partial should start with an underscore, because the file would otherwise compile to a CSS file.
However I've noticed gulp-sass compiles files without an underscore into one complete CSS file just fine.
1. Partials must start with an underscore if you do not want them to be generated into a css file.
2. A scss file can import another file without an underscore and still compile correctly.
Take this example:
sass
+-- base
| +-- _normalize.scss
+-- components
| +-- site-header.scss
+-- utilities
| +-- _icons.scss
+-- site.scss
Here we can see that site-header.scss and site.scss do not have underscores. If I ran a gulp task to compile anything within the sass folder, two files would be output.
site-header.css
site.css
We do not want to generate site-header.css but because we have omitted the underscore the compiler only ignores files with an underscore and generates a css file for it.
site-header.scss can still be referenced in site.scss with an #import
#import 'components\site-header';
This will result in the same outcome whether it is prefixed with an underscore or not.
Related
Say my Main.scss file has this:
#import "TestFile";
Then I run:
sass --source-map Main.scss Main.css
Then the generated source map will have:
sources: ["main.scss","testfile.scss"]
This will cause file not found in case-sensitive web server, http://xxx.xxx.xxx/testfile.scss will not get the content from http://xxx.xxx.xxx/TestFile.scss
May I know if this is by design? And if there is any walkaround to make the generated source list match the original file name case?
Thanks!
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
I have a file structure as follows:
all_skins
|— 1
|— css
|- _skinVariables.scss
|— file.scss
|— file.css
|— 2
|— css
|- _skinVariables.scss
|— file.scss
|— file.css
|— 3
|— css
|- _skinVariables.scss
|— file.scss
|— file.css
common_css
| _specificCode.scss
| _otherCode.scss
Inside my scss file for each "skin" I'm importing some general scss partials such as _skinsVariables and _specificCode. The _skinVariables partial changes for each skin, and the _specificCode is a general partial reused in all the scss files located outside the all_skins directory.
The problem is that whenever I make a change in the specificCode partial file, I need to recompile manually each scss file to generate the new css with the modified code.
I'm using PhpStorm's file watcher, so any change to the specific scss file triggers the watcher, but a modification to the included _specificCode (or any included partial) doesn't trigger it.
Is there any way to compile all the scss files inside a parent folder? There are over 30 of these numbered sub-folders, so doing it by hand is time consuming.
Any solution using command line, PhpStorm itself, or other software such as grunt will do for me (least desired).
Edit:
The file.scss would be as follows:
#import "skinVariables";
#import "../../../common_css/specificCode"
To be a bit clearer, the problem is that I have the partials included in all my file.scss, to make life easier most of the code comes from the partials.
When I modify a partial that is imported in all the files, such as _specificCode.scss, I would need all the file.scss to be re-compiled, but this doesn't happen.
The way the watchers seem to work at the moment is that they're triggered only when a modification is done to the file.scss itself, not to the partial that is being included.
Any work around this?
So now you have the file watcher set to watch the open files and in case of modification it should compile ONLY the file itself.
What you need is to set your scss transpiler to compile the /all_skins/1/css/file.scss, /all_skins/2/css/file.scss, etc., but I don't know if the ruby transpiler you're using is capable of this setting.
I solved something similar with http://gulpjs.com (Grunt alternative) with Gulpfile.js config like this (altered to your paths):
gulp.task('styles', function() {
return gulp.src([
'all_skins/**/*.scss'
])
.pipe($.sass())
.pipe($.autoprefixer('last 3 version'));
});
Then set a PhpStorm's file watcher to watch whole all_skins and common_css folder (can be set by "scopes") and run gulp task named "styles" and it should work.
I have set up Mindscape Web Workbench with my Visual Studio 2010 project so that the compiled SCSS files are outputted to a separate folder. My intended structure is something like this:
Styles/
|
|– output/
| |– toMain.css
| |– toMain.css.map
|
| – toMain.scss
But what I'm getting is 2 outputs, like so:
Styles/
|
|– output/
| |– toMain.css
| |– toMain.css.map
|
| – toMain.scss
| |– toMain.css
| |– toMain.css.map
I've double checked the output settings for the toMain.scss file via Mindscape > Web Workbench Settings and the only output I see is indeed that file set for the Styles/output folder, but I'm still getting the duplicate. I don't have any other extension in VS2010 that handle SASS, and I can't seem to find any information about this issue anywhere. Are there any other settings for the extension that could be causing this?
EDIT: It may be worth noting that I'm using Team Foundation Server with this project - so the outputted CSS is excluded from source control. I'm not sure if this makes a difference.
i had that too before.
File with .map extension is use to decode your compressed file, for example you have .js file that you minimize to .min.js, to help decompress your file you can use .map.
So if you said that .map is shown at your generated folder, it means that you're css it compressed.
So you have 2 options :
1. do not compress your css file.
2. find the setting to not generate .map file.
im using prepros theres a setting for that.
I am using a css file that I import through npm. Respectively it is saved in my "/node_modules" directory.
I want to compile this file with my other scss files with elixir and am searching for a way, how to include it properly.
The options I could do is:
Rename the file from file.css to file.scss and import it in my app.scss
Copy the file.css file to my "resources/assets/" directory, rename it to scss and include it in my sass compilation like this:
Now I want to know, if there is a way to reference the file from the "node_modules" directory, without touching the file, because I want other people who download the project and use "composer install" and "npm install" to be up and running.
Or is the most common way to handle this, just to copy every required file from my "node_modules" directory to my resources/assets folder? Seems odd, since the included bootstrap file of the laravel framework is added just through an scss import in the app.scss file.
Now I want the same, but scss files can't import css files, which I have in my case, which would require for me to just rename it, which would not work out of the box on any other environment, since the "node_modules" directory is not included in version control.
Any recommendations, on what the best way is to compile css files in my "node_modules" directory?
If you look at the Elixir documentation you will notice there are many handy functions you can use. One of them is the mix.copy() function (you can copy single file or whole directory, for example whole jquery folder).
elixir(function(mix) {
mix.copy('node_modules/blabla/file.scss', 'resources/assets/sass/file.scss');
mix.sass(['file.scss', 'app.scss']);
});
This way each time you call gulp it will first copy the scss file from node_modules dir and then will compile sass.
Just add a dot before file path.
mix.scripts([
'./node_modules/autosize/src/autosize.js',
'./bower_components/jquery-tokenize/jquery.tokenize.js'
], 'public/js/app.js');
var elixir = require('laravel-elixir');
var path = require('path');
/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Less
| file for our application, as well as publishing vendor resources.
|
*/
function node_modules(filename) {
return path.join('../../../node_modules/', filename);
}
elixir(function (mix) {
var base = [
node_modules('bootstrap-sass/assets/javascripts/bootstrap/tooltip.js'),
node_modules('bootstrap-sass/assets/javascripts/bootstrap/collapse.js')
];
});