SCSS was recently used in a VUE project to summarize some basic syntax.

The installation

Enter the command directly on the console:

yarn add sass
Copy the code

To get started, write lang=” SCSS “in the style tag of the Vue file

variable

Scss declares and uses a variable through the $keyword. Frequently used data such as color, RADIUS, length, etc., can be declared as variables in the header.

  • For example,
$h: 32px;
$border-color: #d9d9d9;
$color: # 333;
$blue: #40a9ff;
$radius: 4px;
Copy the code

The operator

SASS provides standard arithmetic operators, such as +, -, *, /, and %, that can be used to directly process data.

.test{
    width:$h*2;
    border-radius: $h/2;
}
Copy the code

The interpolation statement

#{} The interpolation statement does the following:

  1. You can use variables in a selector or property name:
$name: foo;
$attr: border;
p. # {$name#} {{$attr} -color: blue;
}
Copy the code
  1. Used in quoted text strings# {}Interpolation statements can add dynamic values:
p:before {
  content: "I ate #{5 + 10} pies!";
}
Copy the code
  1. incalc()Variables are used in functions
&.test >span{
    left:calc(100%- # {$h2} - 2px);
}
Copy the code

nested

  1. Sass allows you to nest one set of CSS styles into another. The inner style takes its outer selector as its parent. You can write any CSS code in the nested rules, including group selectors (,), child selectors (>), adjacent group selectors (+), and all group selectors (~).
/* --------------------SCSS---------------- */
#test {
  width: 97%;
   >.son {
    background-color: #ff0000; }}/* --------------------CSS---------------- */
#test {
  width: 97%;
}
#test >.son {
  background-color: #ff0000;
}
Copy the code
  1. The parent selector&
  • &= the parent selector of the outer layer of the nesting rule, when there are multiple layers of nesting, the outermost parent selector will be passed down layer by layer,&= Cascaded grandparent selector.
  • When using a pseudo-class selector, you need to use the parent selector of the nested outer layer directly
/* --------------------SCSS---------------- */
#main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }}}/* --------------------CSS---------------- */
#main {
  color: black; 
}
#main a {
  font-weight: bold; 
}
#main a:hover {
  color: red; 
}
Copy the code
  • As the first character of a selector, followed by a suffix to generate a compound selector
/* --------------------SCSS---------------- */
#main {
  color: black;
  &-sidebar { border: 1pxsolid; }}/* --------------------CSS---------------- */
#main {
  color: black; 
}
#main-sidebar {
  border: 1px solid; 
}
Copy the code
  1. Attributes are nested

Some CSS properties follow the same namespace (font-XXX, border-XXX, etc.) and can be nested with the beginning word as the namespace of the property.

/* --------------------SCSS---------------- */
.funky {
  font: {
    family: fantasy;
    size: 30em; weight: bold; }}/* --------------------CSS---------------- */
.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; 
}
Copy the code

Mix (a Mixin)

For code that is often reused, mixins can be “declared once, referenced everywhere”

define

Add the name and style after @mixin

For example: In float layouts it is common to add.clearfix to the parent element

@mixin clearfix {
  &:after {
    content: ' ';
    display: block;
    clear: both; }}Copy the code

reference

Use the @include directive to reference mixed styles

#parent {
  @include clearfix;
  padding: 4px;
  margin-top: 10px;
}
Copy the code

Minix instructions can also accept parameters and so on

inheritance

SCSS inheritance allows a set of styles to apply to different elements, reducing code duplication.

define

Use % to define the inheritance style

%border-style {
  border:1px solid red;
}
Copy the code

use

Inheritance is done with the keyword @extend

.container {
	@extend %border-style;
}
Copy the code

different

Unlike blending, which compiles to CSS and inserts styles under every selector that introduces blending styles, inheritance adds inherited selectors to common style selectors and does not compile into CSS files.

Compile SCSS before

/* --------------------Mixin---------------- */

@mixin border-style {
  border:1px solid red;
}
.container {
	@include %border-style;
}
.test {
	@include %border-style;
}

/* --------------------extend---------------- */
%border-style {
  border:1px solid red;
}
.container {
	@extend %border-style;
}
.test {
	@extend %border-style;
}
Copy the code

The compiled CSS

  • In the hybrid
.container {
	 border:1px solid red;
     border-radius: 5px;
}
.test {
	 border:1px solid red;
     border-radius: 5px;
}

Copy the code
  • In the inheritance
.container..test {
	 border:1px solid red;
     border-radius: 5px;
}
Copy the code