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
Related
I have two scss files in a folder scss which will be included into a primary app.scss file. All of these are transpiled to corresponding css files in /css folder:
scss/global/swatches.scss:
$swatch-bg: rgba(30,30,45,1);
scss/global/panels.scss
.panel {
background-color: $swatch-bg;
}
And then they are both included in my app.scss file:
scss/app.scss:
#import 'global/swatches.scss';
#import 'global/panels.scss';
and then I run:
sass --watch scss:css
This correctly creates all expected files inthe css/folder.
However, if I now modify panels.scss which contains a reference to a variable (imported in app.scss) the watcher complains it can't find the variable. But if I edit and save app.scss after, it will correctly compile and the variable is correctly parsed too.
So it seems, if I edit app.scss, any variables defined in any of the imported files will be available to subsequent imported files when sass is compiling. But this is only true when editing app.scss.
How can I get it to compile correctly without having to add the same imports to each file? Is what I am trying to do even possible?
I managed to resolve this by using partials instead in the following manner:
Firstly, rename all my imports to include a prefix, for example:
global/_swatches.scss
and then in my main file (app.scss) import is as follows:
#import 'global/swatches';
Notice the lack of the underscore and .scss file extension
As you can see I have a lib\css folder with one scss file where I imported bootstrap.scss and an index.css where my code scss is compiled. The compilations works, the issue is WHY all these other .css and .css.map files are created???
If you have multiple scss files and you don't want every file to be converted in CSS then create a folder named scss. In that folder create the main scss file named style.scss or whatever name you want and move your scss files in this folder. Now rename all scss files except style.scss by adding _ at the start of the file name for example:
header.scss will be _header.scss.
Now import every scss file in style.scss. A file named _header.scss will be imported in style.scss as follows:
#import "header";
Now watch your scss folder as follows:
sass --watch path/to/scss:CSS
This will compile your scss files from scss folder and make only one CSS file.
I am new to gulp plugins and am trying to get sourcemaps to work
file structure
css/
sass/
theme/
_some-style.scss
_some-style-2.scss
_some-style-3.scss
style.scss
style.css
style.css.map
In my style.scss file I have
#import "theme/some-style";
#import "theme/some-style-2";
#import "theme/some-style-3";
great so I am only getting, _some-style-3.scss to appear in my dev tools when I inspect. I know I have a path issue here but not sure how to fix it.
Gulp file:
gulp.task('sass', function () {
return gulp.src(css/sass/theme/**/*.scss)
.pipe(sourcemaps.init())
.pipe(sass.sync().on('error', sass.logError))
.pipe(sourcemaps.write())
.pipe(gulp.dest(css));
});
Your input is a bit confusing as you have different paths in your file structure, your import statements, and your gulp file. I'll base my answer on the path you provided in the file structure.
Your file structure says "theme" is directly under "sass", so your #import statement should be #import "theme/_various-scss-file.scss"
You need to specify the scss file in gulp.src not just the path, for example gulp.src('css/sass/style.scss'). And output path, according to your file structure and assume your gulp file is in the same folder as the css folder, should be gulp.dest('css').
Figured it out. Unrelated to paths. I didn't include that I was also compressing my scss first and that is interfering with the sourcemapping
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'm using SASS and I have the following file structure:
resources/
style.scss
partials/
_variables.scss
_components.scss
components/
componentA/
componentA.scss
style.scss includes _variables.scss and _components.scss.
Variables are defined in _variabels.scss
SASS files located in the components directory are included from _components.scss
Unfortunately, if I create a variable in _variables.scss it's not accessible to any of the component sass files (eg, componentA.scss). It complains that the variable isn't defined. Is this a limitation of SASS? Do I need to define some sort of global scope or something?
You must import _variables.scss before using any variable.
By the example given, the error comes from the componentA.scss that is compiled to a separate css file to css/components/componentA/componentA.css so when the stylesheet is compiled it has no variables defined because componentA.scss doesn't import the _variables.scss