Please enable JavaScript.
Coggle requires JavaScript to display documents.
SASS (Sass Modules, a Primer, what is SASS? Syntactically Awesome Style…
SASS
Sass Modules, a Primer
-
- In a module system, that will no longer work each file that we import would become available inside app-styles.scss, but they would have no access to each other or to the variables (like $font-path) that are defined locally.
- By making it all explicit, we’re not just adding boilerplate – we’re making it possible to look at a single file and know:
- Exactly what other files are required
- Exactly where variables, mixins, and functions are coming from
- If we add variables, mixins, or functions, we only have to worry about their name being unique in this one file
- Over the next few years, Sass features of import will be removed entirely.
- Accoutrement will not be passed along to other files that we use after it.
- Accoutrement will not be passed along when this file is imported, used, or forwarded in another place
- By default, Accoutrement “members” (variables, mixins, and functions) are namespaced
- <namespace>.$variable, <namespace>.function(), or <namespace>.mixin():
- use 'accoutrement/sass/tools';
- include tools.animate('fade-in');
- use 'accoutrement/sass/tools' as amt;
- We can even use as * to make external members available without a namespace – but I don’t recommend it very often. Namespaces are a good thing.
- (Note that as * does not make members “global” in a project-wide sense, it just removes the local namespace.)
- use 'sass:math';
forward
- I’ll often group small Sass files together in a directory like layout/, and then merge them all together in a file called layout/_index.scss – so I can import them all at once:
// layout/_index.scss
@forward 'banner';
@forward 'nav';@forward 'main';
@forward 'footer';
// app-styles.scss
@use 'layout';
Configure modules once
- A module can only be configured once
- Configuration has to happen the very first time you use a module
-
what is SASS?
- Syntactically Awesome Style Sheets
- Extension for CSS
- Skill for Front-End Developers
- Preprocessor
Why we use SASS?
- Save Time
- Make less error
- Clean and organize the code
- Programming features
- Variables
- Functions
- Loop
- Extend
- Control Flow
- Advanced Structure
VS code extension
- Live Sass compiler => from the bar in the bottom of VS code click on watch sass
Programs
- import => deprecated
- use
- we use underscore in front of the file name (_name.scss) to tell the compiler to not to compile this file
-
CSS variables VS SASS variables
- SCSS is a preprocessor. That means it is not CSS, but is converted into CSS at 'compile time'. In the resulting CSS code there is no resemblance to the original SCSS code. Hence you cannot change the variable values at CSS 'runtime'.
- Historically SCSS is a fairly old technique. It was invented by the motivation that CSS lacks certain features amongst which are variables (and nesting and loops and mixins etc.).
- CSS variables are a quite recent addition to the CSS standard. They didn't render SCSS variables useless, because you can do things to SCSS variables which you can't do with CSS variables (to my knowledge) like color calculations.
- On the other hand you can do things with CSS variables that you can't do with SCSS variables like changing at runtime.
- BTW: CSS variables are not the official jargon. They should be called custom properties. But everyone calls the variables.
- Addendum 1 :One difference I was not talking about. You can't change SCSS variables with JavaScript. CSS Custom Properties however can be accessed and changed with JS
- Addendum 2: This article on CSS Tricks has a good overview: https://css-tricks.com/difference-between-types-of-css-variables/
-
Property Declarations And Placeholder
border-radius: if($rounded, 6px, null);
rezero => property: if(condition , ifTrue... , ifFalse...);
-
-
- forward, use => files doesn't have a mixins or variables
- use => file has mixins or variables
Gulp.js
- const sass = require("gulp-sass")(require("sass"));
-
Other CSS Preprocessor
Stylus, Less, PostCSS