Coding rules

It is recommended to explicitly define @ charset "encoding name" at the beginning of the code, Enable SASS to compile the output according to the given character set.

variable

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

body {
  font: 100% Helvetica, sans-serif;
  color: #333; }

nesting

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none; }
nav li {
  display: inline-block; }
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none; }

introduce

// _reset.scss
html, body, ul, ol {
  margin:  0;
  padding: 0;
}

// base.scss
@import 'reset';
body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

html, body, ul, ol {
  margin: 0;
  padding: 0; }

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef; }

blend

@mixin border-radius($radius) {
          border-radius: $radius;
      -ms-border-radius: $radius;
     -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
}

.box {
  @include border-radius(10px);
}

.box {
  border-radius: 10px;
  -ms-border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px; }

inherit

// This code will not be output to the final generated CSS file because it is not inherited by any code.
%other-styles {
  display: flex;
  flex-wrap: wrap;
}

// The following code will be output to the generated CSS file normally, because it is inherited by its subsequent code.
%message-common {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message {
  @extend %message-common;
}

.success {
  @extend %message-common;
  border-color: green;
}

.error {
  @extend %message-common;
  border-color: red;
}

.warning {
  @extend %message-common;
  border-color: yellow;
}

.message, .success, .error, .warning {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333; }

.success {
  border-color: green; }

.error {
  border-color: red; }

.warning {
  border-color: yellow; }

Reference parent selector&

/*===== SCSS =====*/
a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

/*===== CSS =====*/
a {
  font-weight: bold;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }
  body.firefox a {
    font-weight: normal; }

data type

1.numerical value number :  1.2 , 13 , 10px
2.colour color :  blue , #04a3f9 , rgba(255, 0, 0, 0.5)
3.Boolean value bollean :  true , false
4.Null value null :  null
5.character string string : With or without quotation marks, "menu" , 'sidebar' , navbar
6.array list : Separated by spaces or commas, 1.5em 1em 0 2em, Helvetica, Arial, sans-serif
7.object map :  (key1: value1,key2: value2)
8.function function . 

Interpolation #{}

/*===== SCSS =====*/
$name: uinika;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

/*===== CSS =====*/
p.uinika {
  border-color: blue; }

Variable default value! default

/*===== SCSS =====*/
$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;
#main {
  content: $content;
  new-content: $new_content;
}

/*===== CSS =====*/
#main {
  content: "First content";
  new-content: "First time reference"; }

/*===== SCSS =====*/
$content: null;
$content: "Non-null content" !default;
#main {
  content: $content;
}

/*===== CSS =====*/
#main {
  content: "Non-null content"; }

Nested @ import

/*===== SCSS =====*/
// File demo SCSS contains the following codes
.demo {
  color: red;
}

#app {
  @import "demo"; // In the file app Introduction of demo in SCSS scss
}

/*===== CSS =====*/
#app .demo {
  color: red;
}

@media

/*===== SCSS =====*/
.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}

/*===== CSS =====*/
.sidebar {
  width: 300px;
}

@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px;
  }
}

@extend

/*===== SCSS =====*/
.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

/*===== CSS =====*/
.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  border-width: 3px;
}

multiple inheritance

/*===== SCSS =====*/
.error {
  border: 1px #f00;
  background-color: #fdd;
}
.attention {
  font-size: 3em;
  background-color: #ff0;
}
.seriousError {
  @extend .error;
  @extend .attention;
  border-width: 3px;
}

/*===== CSS =====*/
.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd;
}

.attention, .seriousError {
  font-size: 3em;
  background-color: #ff0;
}

.seriousError {
  border-width: 3px;
}

!optional

If you want @ extend not to generate any selector, you can add it after the selector! optional flag

a.important {
  @extend .notice !optional;
}

@debug

@The debug instruction prints the value of SassScript expression to the standard error output stream, which can be used to debug SASS files with complex SassScript, for example:

/*===== SCSS =====*/
@debug 10em + 12em;

/*===== CSS =====*/
Line 1 DEBUG: 22em

@warn

@The warn instruction prints the value of SassScript expression to the standard error output stream. It is useful in the scene of warning users to abandon the library or repairing minor mixin errors. There are two main differences between @ warn and @ debug:

You can use the -- quiet command line option or SASS's: quiet option to turn off the @ warn warning.

The stylesheet trace will be printed together with the message, and developers can easily see where the @ warn warning occurs in the stylesheet.

/*===== SCSS =====*/
@mixin adjust-location($x, $y) {
  @if unitless($x) {
    @warn "Assuming #{$x} to be in pixels";
    $x: 1px * $x;
  }
  @if unitless($y) {
    @warn "Assuming #{$y} to be in pixels";
    $y: 1px * $y;
  }
  position: relative;
  left: $x;
  top: $y;
}

@error

@The error instruction throws the value of a SassScript expression as a fatal error, which contains a friendly stack trace, which can be used to verify the parameters of mixin and function, for example:

@mixin adjust-location($x, $y) {
  @if unitless($x) {
    @error "$x may not be unitless, was #{$x}.";
  }
  @if unitless($y) {
    @error "$y may not be unitless, was #{$y}.";
  }
  position: relative;
  left: $x;
  top: $y;
}

SASS currently does not provide a way to capture @ error.

@if

@The if instruction receives a SassScript expression. When the expression returns data other than false or null, it will choose to use the next nested statement,

/*===== SCSS =====*/
p {
  @if 1+1==2 {
    border: 1px solid;
  }
  @if 5 < 3 {
    border: 2px dotted;
  }
  @if null {
    border: 3px double;
  }
}

/*===== CSS =====*/
p {
  border: 1px solid; }

@If statements can be followed by multiple @ else if statements and one @ else statement. If @ if statements fail, SASS will try @ else if statements one by one until one succeeds; If all fail, the @ else statement is executed. For example:

/*===== SCSS =====*/
$type: monster;
p {
  @if $type==ocean {
    color: blue;
  }
  @else if $type==matador {
    color: red;
  }
  @else if $type==monster {
    color: green;
  }
  @else {
    color: black;
  }
}

/*===== CSS =====*/
p {
  color: green; }

@for

@The for instruction is used to repeatedly output a set of styles. Each time, there will be a counter variable to adjust the output result. The instruction has two forms: @ for $var from through and @ for $var from to.

$var can be any variable name (such as $i) and a SassScript expression that returns an integer. If it is greater than, the counter will be decremented rather than incremented.

@The for instruction will set $var as a continuous value within the specified range. For from The through value range includes the value of and, for from To runs from, but does not include the value of.

/*===== SCSS =====*/
@for $i from 1 through 3 {
  .item-#{$i} {
    width: 2em * $i;
  }
}

/*===== CSS =====*/
.item-1 {
  width: 2em; }

.item-2 {
  width: 4em; }

.item-3 {
  width: 6em; }

@each

@The format of each instruction is @ each $var in, where $var can be any variable name (such as $length or $name), and ` ` is a SassScript expression that returns list or map.

@Each rule sets $VaR to each item in the list or map, and the actual value of $var will be used in the output style.

/*===== SCSS =====*/
@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

/*===== CSS =====*/
.puma-icon {
  background-image: url("/images/puma.png"); }

.sea-slug-icon {
  background-image: url("/images/sea-slug.png"); }

.egret-icon {
  background-image: url("/images/egret.png"); }

.salamander-icon {
  background-image: url("/images/salamander.png"); }

Multiple assignment

@Each instruction can be executed with @ each $VAR1, $var2 The format of in uses multiple variables. If ` ` is a list element in a list, each element in the sub list will be assigned to its own variable, for example:

/*===== SCSS =====*/
@each $animal, $color, $cursor in (puma, black, default), (sea-slug, blue, pointer), (egret, white, move) {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}

/*===== CSS =====*/
.puma-icon {
  background-image: url("/images/puma.png");
  border: 2px solid black;
  cursor: default; }

.sea-slug-icon {
  background-image: url("/images/sea-slug.png");
  border: 2px solid blue;
  cursor: pointer; }

.egret-icon {
  background-image: url("/images/egret.png");
  border: 2px solid white;
  cursor: move; }

@while

@The while instruction can be used to repeatedly output nested styles until the return result of SassScript expression is false. It can be used to implement more complex loops than @ for statements, but it is less used in daily development.

/*===== SCSS =====*/
$i: 6;
@while $i>0 {
  .item-#{$i} {
    width: 2em * $i;
  }
  $i: $i - 2;
}

/*===== CSS =====*/
.item-6 {
  width: 12em; }

.item-4 {
  width: 8em; }

.item-2 {
  width: 4em; }

type of output

Although the CSS format of SASS default output is good, the other four output formats provided by sass can be used according to the personal habits of developers. That is, you can set it through the: style option or directly use the -- style flag on the command line.

:nested

nested is the default output format of SASS. Each attribute occupies one line, but the indentation is not fixed. Each rule is indented based on its nesting depth. For example:

#main {
  color: #fff;
  background-color: #000; }
  #main p {
    width: 10em; }

.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline; }

:expanded

The extended format is similar to the CSS style of manual handwriting. Each attribute and rule has an exclusive line. The CSS attribute in the rule will be indented, but the rule itself will not be indented in any special way, for example:

#main {
  color: #fff;
  background-color: #000;
}
#main p {
  width: 10em;
}

.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline;
}

:compact

compact format takes up less space than the above two formats, which focuses on selectors rather than CSS properties. Each CSS rule occupies a separate line, which also includes all CSS properties. Each nested rule will create a new line, and the non nested selector will output a blank line as a separator, for example:

#main { color: #fff; background-color: #000; }
#main p { width: 10em; }

.huge { font-size: 10em; font-weight: bold; text-decoration: underline; }

:compressed

Compressing the compressed format minimizes the size of the generated file and produces a newline at the end of the file. There are few extra spaces except for the necessary selector separation. This format allows CSS attribute values such as colors to be represented in the shortest way. Due to the poor readability of the code, it is mainly used in the production environment.

#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}

Sass function

Reprinted to: https://www.jianshu.com/p/7f879ce0cbb9

1. String function

• unquote ($string): delete quotation marks in the string;
• quote ($string): add quotation marks to the string;
• Convert upper case string to lowercase string
• To lower case ($string): converts string uppercase letters to lowercase letters

2. Digital function

• percentage($value): convert the number without unit into percentage value;
• round($value): round the value to the nearest integer;
• ceil($value): round up;
• floor($value): round down;
• abs($value): absolute value of fetching;
• min($numbers...): find the minimum value between several numbers;
• max($numbers...): find the maximum value between several numbers;
• random(): get random number

3. List function

• length($list): returns the length value of a list;
• nth($list, $n): returns a tag value specified in a list;
• join($list1, l i s t 2 , [ list2, [ list2,[separator]: connect two columns together to form a list;
• append($list1, v a l , [ val, [ val,[separator]: put a value at the end of the list;
• zip($lists...): combine several lists into a multidimensional list;
• index($list, $value): returns the position value of a value in the list.

//SCSS
.demo1 {
  width : length(10px);   //Returns the number of values in the list, separated by spaces. Commas cannot be used.
  height:  length(border 1px solid)  //In the same list, there can be values of different types and different units
}
.demo2 {
  width: nth((Helvetica,Arial,sans-serif),2);   //Specifies the value of a position in the list, 1 is the first label value in the list, and so on.
  height: nth((1px solid red) border-top green,1);
}
.demo3 {
  margin: join((10px 20px),(30px 40px));  //Join two lists into one list, separated by commas.
  padding: append((10px,20px,20px),30px);  //Inserts a value into the list and is at the bottom
  border: zip(1px 2px 3px,solid dashed dotted) ;  //Each multidimensional list must be converted into a single value
}
.demo4 {
  width: index(1px solid red, 1px);   //Returns the position of the corresponding value in the list. The first value is 1, and so on.
  height:  index(1px solid red, yellow)  //If the specified value is not in the list, the returned value will be false, and the copyright belongs to the author.
}
//CSS
.demo1 {
  width: 1;
  height: 3;
}
.demo2 {
  width: Arial;
  height: 1px solid red;
}
.demo3 {
  margin: 10px 20px 30px 40px;
  padding: 10px, 20px, 20px, 30px;
  border: 1px solid, 2px dashed, 3px dotted;
}
.demo4 {
  width: 1;
}

4. Introduction function

• Type of ($value): returns the type of a value;
• unit($number): returns the unit of a value;
• unitless($number): judge whether a value has a unit;
• comparable($number-1, $number-2): judge whether two values can be added, * subtracted and combined

5. Ternary conditional function

if($condition,$if-true,$if-false);

//SCSS
.demo1{width:if(true,8em,20em)}
.demo2{height:if(false,8em,20em)}
//CSS
.demo1 { width: 8em;}
.demo2 {height: 20em;}

6. Functions of maps

• map-get( m a p , map, map,key): returns the relevant values in the map according to the given key value;
• map-has-key( m a p , map, map,key): judge whether the map has a corresponding value according to the given key value. If yes, return true; otherwise, return false.
• Map keys ($map): returns all the keys in the map.
• Map values ($map): returns all values in the map.
• map-merge( m a p 1 , map1, map1,map2): merge two maps into a new map.
• map-remove( m a p , map, map,key): delete a key from the map and return a new map.
• keywords($args): returns the parameters of a function, which can dynamically set key and value.

7. Color function

• rgb( r e d , red, red,green,$blue): create a color based on red, green and blue values;
• rgba( r e d , red, red,green, b l u e , blue, blue,alpha): create a color based on red, green, blue and transparency values;
• red($color): get the red value from a color;
• green($color): get the green value from a color;
• blue($color): get the blue value from a color;
• mix( c o l o r − 1 , color-1, color − 1,color-2,[$weight]): mix two colors together.

8. Custom function

//SCSS
@function column-width($col, $total) {
  @return percentage($col/$total);
}
.col-3 {
  width: column-width($col:3, $total:8);
}
.col-5 {
  width: column-width($total:5,$col:8);
}

//CSS
.col-3 {  width: 37.5%; }
.col-5 {  width: 160%; }