I'm a bit newer to sass, but when I was learning it the Sass website said to start using #use instead of import, so after a lot of trial and error I finally figured out how to use it pretty much the same as import.
Note: I'm using Prepros for compiling.
I have this mixin in it's own file inside of a mixins folder:
// scss/mixins/_flex.scss
#mixin flex($flex-flow: row, $justify-content: center, $align-items: center) {
display: flex;
justify-content: $justify-content;
align-items: $align-items;
flex-flow: $flex-flow;
}
I tried #useing it in my main _mixins.scss file:
// scss/_mixins.scss
#use "mixins/flex" as *;
Then I tried using it in another one of my files containing common elements:
// scss/_common_elements.scss
#use "mixins" as *;
.flex {
#include flex();
}
Then I receive the error inside of Prepros log: Undefined Mixin where I call the #include flex(); line (inside of _common_elements.scss)
It was working until I decided to put the mixins in their own separate folder, but this is the same as how it's setup inside of Bootstraps source code.
This whole process of using #use has been really confusing.
Does anyone know why I might be getting this error?
I managed to fix it!
ALSO: If you can help me edit this question / answer to better explain it with proper language, please post suggestions and I'll update it.
In the _mixins.scss file I needed to use #forward "mixins/flex" instead of #use "mixins/flex" as *;:
Like this:
// scss/_mixins.scss
#forward "mixins/flex";
#forward "mixins/overlay";
#forward "mixins/etc...";
I wish they would've made this something more clear on the actual sass #use documentation.
Here are the actual docs to #forward.
to use #use command and other new features of sass, you need to install dart sass, and not node-sass;
https://www.npmjs.com/package/sass
Related
I'm coming to you because I would like to use the Tabulator http://tabulator.info/ library in a Laravel project. I have correctly installed the library in my project (import of css and js scripts).
Terminal :
npm install tabulator-tables
resources/js/app.js:
window.Tabulator = require('tabulator-tables/dist/js/tabulator.js');
resources/js/app.scss:
#import 'variables';
#import "../../node_modules/tabulator-tables/dist/css/tabulator.min.css";
#import "../../node_modules/tabulator-tables/dist/css/bootstrap/tabulator_bootstrap.min.css";
And to stylize the tables a bit, Tabulator provides a system to use sass variables.
resources/js/_variables.scss:
$backgroundColor:black;
$headerBackgroundColor: #3F3F3F;
$headerTextColor: #fff;
$borderColor:#FFE6;
$rowTextColor: #000000;
$rowSelectedBackground: #FFE6A8;
#import "../../node_modules/tabulator-tables/dist/css/tabulator_simple.min.css";
But as indicated in the documentation http://tabulator.info/docs/4.9/style#sass, it is enough to override the variables used by the library to style the tables. But when I do npm run dev, no changes are made. Would you have an idea ?
Sorry i have noticed that i import the wrong file in resources/scss/app.scss.
//wrong way
#import "../../node_modules/tabulator-tables/dist/css/tabulator.min.css";
//good way
#import "../../node_modules/tabulator-tables/src/scss/tabulator_simple";
I am currently using Sass in my ExpressJS code and have been able to generate a css file using the following command -
postcss main.css -u autoprefixer -d dist/
The css file BEFORE using autoprefixer has the following code :
.container {
display: grid;
grid-template-columns: 2px 2px;
}
The css file AFTER using autoprefixer has the following code + some commented sourceMappingURL:
.container {
display: grid;
grid-template-columns: 2px 2px;
}
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL21haW4uY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UsYUFBYTtFQUNiLDhCQUE4QjtBQUNoQyIsImZpbGUiOiJtYWluLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5jb250YWluZXIge1xuICBkaXNwbGF5OiBncmlkO1xuICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IDJweCAycHg7XG59XG4iXX0= */
The expected css output (as per autoprefixer.github.io) should be :
.container {
display: -ms-grid;
display: grid;
-ms-grid-columns: 2px 2px;
grid-template-columns: 2px 2px;
}
My confusion is two-part.
Have I messed up the autoprefixer command in anyway? Do I need to correct it somehow to get the expected output?
Am I lacking knowledge about how the current output file works ie.,
(a) Is the generated css file using the autoprefixer command enough?
(b) Do I need to do something with the sourceMappingURL to get the desired output?
Hope I have explained my question clearly enough.
Thanks in advance!
At autoprefixer.github.io there is Browserlist setting below textareas saying "last 4 version". This tells Autoprefixer to add prefixes for older browsers. Most probably you don't have .browserslistrc in the root of your project or a browserslist key in your package.json that would tell autoprefixer which browsers are you targeting, so it takes defaults. browserl.ist would help to visualize that (please compare defaults with last 4 version to see the difference in coverage).
Create browserslist in the root of your project and explicitly indicate the baseline of browsers you are targeting. Here you will find examples on how to construct your queries. Don't worry about source maps - there's nothing you have to do on that side.
Note: Prior to prefix Grid for IE11 (if that's your case), I encourage you to get aquatinted with CSS Grid in IE: CSS Grid and the New Autoprefixer
I'm using Bulma with Webpack 4. I'm trying to change the colour of button.is-primary to be pink instead of turquoise.
Here's the entire contents of my .scss file.
#charset "utf-8";
#import url('https://fonts.googleapis.com/css?family=Poppins:600');
$body-size: 14px;
$primary: $pink;
#import "../../node_modules/bulma/bulma.sass";
This is getting me the following error on build.
1>Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
1>
1>$primary: $pink;
1> ^
1> Undefined variable: "$pink".
Now, if I set $primary to be a specific hex colour it builds fine, so this issue seems to be because I'm trying to use the existing colour variable $pink. It does make sense to me that it hasn't been defined at that point, but the docs clearly say that I can add my overrides before importing Bulma, and their example does the same thing.
Can anyone point me in the right direction?
EDIT: here's the documentation screen I'm looking at.
https://bulma.io/documentation/customize/with-webpack/
I note that in their example they do set new values for derived variables BUT only where they've redefined the intial value, like this...
$pink: #FA7C91;
If I change my .scss file as follows it does then compile and work as expected.
#charset "utf-8";
#import url('https://fonts.googleapis.com/css?family=Poppins:600');
$body-size: 14px;
$pink: #FA7C91;
$primary: $pink;
#import "../../node_modules/bulma/bulma.sass";
This should clarify things for you: https://versions.bulma.io/0.7.0/documentation/overview/customize/
// 1. Import the initial variables
#import "../sass/utilities/initial-variables";
// 2. Set your own initial variables (optional)
$pink: #ffb3b3;
// 3. Set the derived variables
// Use the new pink as the primary color
$primary: $pink;
In my case, I forgot that I was importing Bulma via its compiled .css file.
Of course, you cannot override the Sass variables that way because after compilation they don't exist. To override Bulma's variables you need to import its .sass file(s), not its .css file.
Sharing in case anyone else makes the same mistake.
Hi everybody I'm new to learning Gulp and I can't seem to get over this hurdle. I am trying to compile my sass and I will set it to gulp-watch. It will work fine for a little while, but then it will show an error- the file is not found or unreadable.It looks something like:
events.js:154
throw er;// Unhandled 'error' event
Error: app/scss/main.sass
Error: File to import not found or unreadable: layout1
Parent style sheet: stdin on line 2 of stdin
I have tried to look on this site for the solution to my problem and I thought putting the includePaths would work (maybe I'm doing it wrong) but I'm still getting errors. Could someone please help me out?Here are some images of my project. Here is a link to some pictures: http://imgur.com/a/pQBHV
Looks like there are a few issues:
1) You should probably use the scss extension with all your files and update the sass task in your gulp file to watch for changes like so: gulp.src('app/scss/*.scss') or since, in theory, all files contained in that folder should be sass, you could do this instead: gulp.src('app/scss/*') which will watch all the files in the directory.
2) There's also an issue with the names of your sass files. You need to prepend the files you wish to import with an underscore so the compiler knows these files are partials.
So your sass files should look like:
_layout1.scss
main.scss
_normalize.scss
_styles.scss
And import the partials in main.scss:
#import 'normalize';
#import 'layout1';
#import 'styles';
More info http://sass-lang.com/guide#topic-4
I want to use #import in my scss file. It was working okay, but now I do #import "vars"; (I have _vars.scss file in the same dir) and Prepros returns error saying such file doesn't exists. What is wrong?
style.scss:
body {
background: white
}
#import "vars";
_vars.scss:
$grey: #777;
$violet: #490a3d;
$text: #414141;
$separator: #d6d8d8;
$title: #0d0d0d;
$white: #fff;
I solved it. Problem was with Prepros (too bad, it's a great piece of software). It turned out,my directory name was the cause of all this. It was named [projects], since I keep there all my "temp" stuff. I moved the files to other directory and it works great.