Created by Kamila Klavíková
Not updated since we don’t use them in our project.
& represents the parent selectors of a nested rule. It's most commonly used when applying a modifying class or pseudo-class to an existing selector.
Arithmetical operations +, -, *, / can operate on any number, color or variable. Units are ignored, if the conversion is impossible or not meaningful. The result has leftmost explicitly stated unit type.
@var-name
Sometimes, you may want to group your mixins, for organizational purposes, or just to offer some encapsulation. You can do this pretty intuitively in Less. Say you want to bundle some mixins and variables under #bundle, for later reuse or distributing:
#bundle() {
.button {
display: block;
border: 1px solid black;
background-color: grey;
&:hover {
background-color: white;
}
}
.tab { ... }
.citation { ... }
}Now if we want to mixin the .button class in our #header a, we can do:
#header a {
color: orange;
#bundle.button(); // can also be written as #bundle > .button
}Note: append () to your namespace (e.g. #bundle()) if you don't want it to appear in your CSS output i.e. #bundle .tab.
Leaner Style Sheets
All about Less Examples are taken from this site.
Can be used istead of or in combination with cascading. Let's say we have the following CSS:
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
In Less, we can also write it this way:
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
The resulting code is more concise, and mimics the structure of your HTML.
Less doesn't care where you put @import statements.
It's a way of including (“mixing in”) properties from one rule-set into another rule-set.
So say we have the following class:
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}And we want to use these properties inside other rule-sets. Well, we just have to drop in the name of the class where we want the properties, like so:
#menu a {
color: #111;
.bordered();
}.post a {
color: red;
.bordered();
}The properties of the .bordered class will now appear in both #menu a and .post a. (Note that you can also use #ids as mixins.)
Variables and mixins are first looked for locally, and if they aren't found, it's inherited from the "parent" scope. They do not have to be placed before a line where they are referenced.
https://www.keycdn.com/blog/sass-vs-less
https://css-tricks.com/sass-vs-less/
If you want to create a mixin but you do not want that mixin to be in your CSS output, put parentheses after the mixin definition.
01. Use Sass for sharing styles
Sass has a lot of nice features for writing individual stylesheets, but where it really shines is that it creates a consistent visual identity by encapsulating design logic in functions and mixins, and re-uses them over and over. That's why design systems like Google's Material Design and IBM's Carbon use Sass!
02. Use PostCSS for transforming styles
Six years ago, it was common to see Sass users using mixins for cross-browser compatibility or right-to-left language support. Today, PostCSS is the best tool for that job. Let humans write standards-compliant Sass stylesheets and leave the compatibility work up to the machines.
03. Use mixins for all styles in partials
Even if those mixins are only used once! Only the root Sass file should actually produce CSS. This ensures you know exactly what order your CSS is generated in, and it makes it way easier to share styles later if they're written to be shared from the start.
04. Keep your styles neat and clean with a linter
The stylelint linter provides a ton of excellent lints that will help ensure you aren't using any invalid CSS properties or other easy mistakes. The stylelint-scss plugin adds a bunch of checks just for Sass users, some written by the Sass team itself.
5. Give Dart Sass a try
First released in 2018, Dart Sass is the new reference implementation for Sass. It's fast, it's easy to install as a pure JavaScript package, and it's rapidly developed—which means it's always the first implementation to support new Sass features and new CSS syntax.
https://www.creativebloq.com/news/5-pro-sass-tips-for-better-css