Regular updates

[twpd/master.git] / sass.md

diff --git a/sass.md b/sass.md
index 6f98202..4458676 100644 (file)
--- a/sass.md
+++ b/sass.md
@@ -3,7 +3,7 @@ title: Sass
 category: CSS
 layout: 2017/sheet
 tags: [Featured]
-updated: 2017-08-26
+updated: 2020-07-03
 weight: -5
 keywords:
   - Variables
@@ -18,6 +18,13 @@ keywords:
 ## Basics
 {: .-three-column}
 
+### Introduction
+{: .-intro}
+
+This is a quick reference to [Sass stylesheets](https://sass-lang.com).
+
+- [Sass documentation](https://sass-lang.com/documentation) _(sass-lang.com)_
+
 ### Variables
 
 ```scss
@@ -34,13 +41,20 @@ body {
 
 ```scss
 .markdown-body {
-  p {
+  a {
     color: blue;
+    &:hover {
+      color: red;
+    }
   }
+}
+```
 
-  &:hover {
-    color: red;
-  }
+#### to properties
+```scss
+text: {
+  align: center;          // like text-align: center
+  transform: uppercase;   // like text-transform: uppercase
 }
 ```
 
@@ -130,9 +144,12 @@ body {
 ### Composing
 
 ```scss
-@import './other_sass_file`;
+@import './other_sass_file';
+@use './other_sass_file';
 ```
 
+The `@import` rule is discouraged because will get eventually [removed from the language](https://sass-lang.com/documentation/at-rules/import).  
+Instead, we should use the [`@use` rule](https://sass-lang.com/documentation/at-rules/use).  
 The `.scss` or `.sass` extension is optional.
 
 ## Color functions
@@ -189,7 +206,7 @@ alpha($color)       // → 0..1 (aka opacity())
 
 #### RGB
 
-```
+```scss
 red($color)         // → 0..255
 green($color)
 blue($color)
@@ -354,6 +371,10 @@ $i: 6;
    position: absolute;
    left: 0;
 }
+@else if $position == 'right' {
+   position: absolute;
+   right: 0;
+}
 @else {
    position: static;
 }