About SCSS
SCSS syntax uses the .scss file extension. With a few exceptions, it is a superset of CSS, which means that all valid CSS is also valid SCSS. Due to its similarity to CSS, it is the easiest syntax to learn and the most popular syntax.
variable
All SASS variables start with $, for example:
$blue : #1875e7;
div {
color : $blue;
}If the variable needs to be embedded in the string, it must be written in #{}.
$side : left;
.rounded {
border-#{$side}-radius: 5px;
}Calculation function
SASS allows calculations to be used in the code:
body {
margin: (14px/2);
top: 50px + 100px;
right: $var * 10%;
}Nested
SASS allows selectors to be nested. For example, the following CSS code:
div h1 {
color : red;
}Can be written as:
div {
hi {
color:red;
}
}Attributes can also be nested, such as the border-color attribute, which can be written as:
p {
border: {
color: red;
}
}Note that a colon must be added after the border.
Reference parent element
Within the nested code block, you can use & to refer to the parent element. For example, the a:hover pseudo-class can be written as:
a {
&:hover { color: #ffb3ff; }
}Comment
SASS has two annotation styles.
The standard CSS comment / comment / will be retained in the compiled file.
Single-line comment // comment, only kept in the SASS source file, and omitted after compilation.
!default
The meaning is "by default", that is, "the default value is", for example:
$heading-font-family：$body-font-family !default;`
inherit
SASS allows a selector to inherit another selector. For example, the existing class1:
.class1 {
border: 1px solid #ddd;
}To inherit class1 from class2, use the @extend command:
.class2 {
**@extend** .class1;
font-size:120%;
}Mixin
Mixin is a bit like a macro in C language, a code block that can be reused.
Use the @mixin command to define a code block.
@mixin left {
float: left;
margin-left: 10px;
}Use the @include command to call this mixin.
div {
@include left;
}
The power of mixin is that you can specify parameters and default values.
@mixin left($value: 10px) {
float: left;
margin-right: $value;
}
When using, add parameters as needed:
div {
@include left(20px);
}
The following is an example of a mixin to generate a browser prefix.
@mixin rounded($vert, $horz, $radius: 10px) {
border-#{$vert}-#{$horz}-radius: $radius;
-moz-border-radius-#{$vert}#{$horz}: $radius;
-webkit-border-#{$vert}-#{$horz}-radius: $radius;
}
When used, it can be called as follows:
#navbar li { @include rounded(top, left); }
#footer { @include rounded(top, left, 5px); }
Color function
SASS provides some built-in color functions to generate series of colors.
lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c
Insert file
@import command is used to insert external files.
@import "path/filename.scss";
If you insert a .css file, it is equivalent to the css import command.
@import "foo.css";
Advanced usage
Conditional statements
@if can be used to judge:
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
}
There is also the @else command:
@if lightness($color) > 30% {
background-color: #000;
} @else {
background-color: #fff;
}
loop statement
SASS supports for loops:
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
Also supports while loop:
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
each command
The function is similar to for:
@each $member in a, b, c, d {
.#{$member} {
background-image: url("/image/#{$member}.jpg");
}
}
Custom function
SASS allows users to write their own functions.
@function double($n) {
@return $n * 2;
}
#sidebar {
width: double(5px);
}
Mapping function
In Sass map itself comes with seven functions:
map-get($map,$key): According to the given key value, return the relevant value in the map.
map-merge($map1,$map2): merge two maps into a new map.
map-remove($map,$key): Remove a key from the map and return a new map.
map-keys($map): Returns all keys in the map.
map-values($map): Returns all the values in the map.
map-has-key($map,$key): Determine whether the map has a corresponding value value according to the given key value, if yes, return true, otherwise return false.
keywords($args): returns a function parameter, this parameter can dynamically set the key and value.
Sass Maps functions
1、map-get($map,$key)
The function of map-get($map,$key) is to return the corresponding value of $key in $map according to the $key parameter. If $key does not exist in $map, a null value will be returned. This function includes two parameters:
$map: The defined map.
$key: The key to be traversed.
//SCSS
$social-colors: (
dribble: #ea4c89,
facebook: #3b5998,
github: #171515,
google: #db4437,
twitter: #55acee
);
.btn-dribble{
color: map-get($social-colors,facebook);
}
//Compiled css
.btn-dribble {color: #3b5998;}
2 、 map-has-key ($ map, $ key)
The map-has-key($map,$key) function will return a Boolean value. When there is this $key in $map, the function returns true, otherwise it returns false.
@if map-has-key($social-colors,facebook){
.btn-facebook {
color: map-get($social-colors,facebook);
}
} @else {
@warn "No color found for faceboo in $ social-colors map. Property ommitted."
}
But I always feel that it is silly to write this way. It is impossible to write an @if statement every time I get a key. In fact, there is no need to be so complicated, we can customize a function, such as colors():
@function colors($color){
@if not map-has-key($social-colors,$color){
@warn "No color found for #{$color}in $social-colors map. Property omitted.";
}
@return map- get($social-colors,$color);
}
With this function, we can use it like this
.btn-dribble {
color: colors(dribble);
}
.btn-facebook {
color: colors(facebook);
}
.btn-github {
color: colors(github);
}
.btn-google {
color: colors(google);
}
.btn-twitter {
color: colors(twitter);
}
.btn-weibo {
color: colors(weibo);
}
当然，如果你对 Sass 的指令熟悉的话，可以使用 @each：
ocial-network:dribble,facebook,github,google,twtter,weibo;<br>@each $social-network,$social-color in $social-colors {
.btn-#{$social-network} {
color: colors($social-network);
}
}
3、map-keys($map)
The map-keys($map) function will return all the keys in $map. These values are assigned to a variable, then he is a list. Such as:
map-keys($social-colors);
The returned value is:
"dribble","facebook","github","google","twitter"
in other words:
$list: map-keys($social-colors);
Is equivalent to:
$list:"dribble","facebook","github","google","twitter";
At this time, you can do many things with Sass's list.
In the above example, you can make a modification through map-keys($map):
@function colors($color){
$names: map-keys($social-colors);
@if not index($names,$color){
@warn "Waring: #{$color} is not a valid color name.";
}
@return map-get($social- colors,$color);
}The
most different point in the above code is that we use map-key s to extract all the keys of the $social-colors map and assign them to a list named $names. Then return $color at the position of $names by index($names,$color). If this position does not exist, a prompt message will be returned, and if it exists, the correct value will be returned.
Similarly, you can traverse all the values through @each or @for:
// @each
@each $name in map-keys($social-colors){
.btn-#{$name}{
color: colors($name);
}
}
//@for
@for $i from 1 through length(map-keys($social-colors)){
.btn-#{nth(map-keys($social-colors),$i)} {
color: colors( nth(map-keys($social-colors),$i));
}
}
Although the methods used are different, the final CSS is the same
4、map-values($map)
The map-values($map) function is similar to the map-keys($map) function. The difference is that map-values($map) gets all the value values of $map, which can be said to be a list. Moreover, if there is the same value in map-values($map), all will be obtained.
As in the previous example, use:
map-values($social-colors)
will return:
#ea4c89,#3b5998,#171515,#db4437,#55acee The
value and the value before it are also separated by commas.
5、map-merge($map1,$map2)
map-merge($map1,$map2) The
map-merge($map1,$map2) function is to merge $map1 and $map2, and then get a new $map. This method is the best way if you want to quickly insert new values into $map
Such as:
$color: (
text: #f36,
link: #f63,
border: #ddd, backround
: #fff
);
$typo:(
font-size: 12px,
line-height: 1.6
);
//If you want to combine these two To merge $map into one map, we just need to do this:
$newmap: map-merge($color,$typo);
//A new map will be generated:
$newmap:(
text: #f36,
link: #f63,
border: #ddd,
background: #fff,
font-size: 12px,
line-height: 1.6
);
so you can do other things with the help of functions such as map-get( ).
But one thing to note, if $map1 and $map2 have the same $key name, then the $key in $map2 will replace the value in $map1
6、map-remove($map,$key)
The map-remove($map,$key) function is used to delete a certain $key in the current $map to get a new map. The returned value is still a map. He can't directly delete another map from one map, he can only get a new map by deleting a key in the map. Such as:
$map:map-remove($social-colors,dribble);
returns a new map:
facebook: #3b5998,
github: #171515,
google: #db4437,
twitter: #55acee);
If the deleted key does not exist in $map, the new map returned by the map-remove() function is the same as the previous map.
map-deep-merge new mapping function
Recently, I found that the map-deep-merge mapping function frequently appeared in the SASS variable definition list that comes with vuetify, and there is no direct corresponding content in web search.
Finally, find the relevant definitions on the SASS official website, as follows:
map.deep-merge($map1, $map2) //=> map The explanation is: "Identical to map.merge(), except that nested map values are also recursively merged." The
sample code is as follows:
$helvetica-light: ("weights": ("lightest": 100, "light": 300))
$helvetica-heavy: ("weights": ("medium": 500, "bold": 700))
@debug map.deep-merge($helvetica-light, $helvetica-heavy)In fact, the following forms are more common in Vuetify applications:
$grid-breakpoints: map-deep-merge( ( 'xs': 0, 'sm': 600px, 'md': 960px, 'lg': 1280px - 16px, 'xl': 1920px - 16px ), $grid-breakpoints );
reference
http://www.ruanyifeng.com/blog/2012/06/sass.html
https://sass-lang.com/documentation/modules/map#deep-merge
https://www.cnblogs.com/kt520/p/5711740.html
https://vuetifyjs.com/en/api/vuetify/