Sass is different from SCSS

SCSS is a new syntax introduced by Sass 3. Its syntax is fully compatible with CSS3 and inherits the powerful functions of Sass.

Sass and SCSS are actually the same thing, which we usually call Sass. There are two differences between them:

  • The file name extension is different“Sass” means “Sass”..sassThe suffix is the extension, while SCSS is the.scssThe suffix is the extension name
  • Grammatical writing is different.Sass In strict termsIndent syntax rulesTo write,Without braces ({}) and semicolons (;)And theSCSSThe grammar of writing and oursThe CSS syntaxThe writing is very similar.

The suffix of SASS before 3.0 is. SASS, and that after 3.0 is. SCSS.

Sass supports two different grammars. The two grammars can be loaded with each other.

Sass syntax (indented syntax) :

@mixin button-base()
  @include typography(button)
  @include ripple-surface
  @include ripple-radius-bounded

  display: inline-flex
  position: relative
  height: $button-height
  border: none
  vertical-align: middle

  &:hover
    cursor: pointer

  &:disabled
    color: $mdc-button-disabled-ink-color
    cursor: default
    pointer-events: none
Copy the code

SCSS grammar:

@mixin button-base() {
  @include typography(button);
  @include ripple-surface;
  @include ripple-radius-bounded;

  display: inline-flex;
  position: relative;
  height: $button-height;
  border: none;
  vertical-align: middle;

  &:hover { cursor: pointer; }

  &:disabled {
    color: $mdc-button-disabled-ink-color;
    cursor: default;
    pointer-events: none; }}Copy the code

SCSS installation

Install CSS-loader, style-loader, Node-sass, and Sass-loader first

npm install css-loader style-loader --save-dev
npm install node-sass sass-loader --save-dev
Copy the code

Add the loader to the webpack.config.js configuration file

const path = require("path");
const {VueLoaderPlugin} = require('vue-loader');
module.exports = {
    entry: './webapp/App.js'.output: {
        filename: 'App.js'.path: path.resolve(__dirname, './dist')},module: {
		rules: [{test: /\.scss/,
                use: ['style-loader'.'css-loader'.'sass-loader'] {},test: /\.vue$/,
				use: 'vue-loader'}},plugins: [
		new VueLoaderPlugin()
	],
	mode: "production"
}
Copy the code

SCSS api

Variables, the$At the beginning

$border-color:#aaa; // Declare variables
.container {
	$border-width:1px;
    border:$border-width solid $border-color; // Use variables in attribute values
}
Copy the code

$border-color is a global variable outside of curly braces. As the name indicates, it can be used anywhere. $border-width is declared in. Container and is a local variable that can only be used inside

Variable names in SCSS use hyphens or underscores to refer to the same variable

$border-color and $border_color are the same variable

(1) The underlined or underlined variable name refers to the same variable. (2) Var declarations are ignored, but assignments are performed, just as var declarations are in ES5.

$border-color:#aaa; // Declare variables
$border_color:#ccc;
.container {
    $border-width:1px;
    border:$border-width solid $border-color; // Use variables
}
// Compiled CSS
.container {
    border:1px solid #ccc; // Use variables
}
Copy the code

The interpolation of grammar#{ }

Using #{} for variables that use Scss in selector and attribute names means that operators near it are treated as pure CSS, which avoids all sorts of operations.

/* $variable */
$name:button;
$new-border:border-radius; * Italic style */* Interpolation */
div> # {$name#} {{$new-border} :10px;
}
Copy the code

Nested rules

CSS example

/*css*/
.container ul {
    border:1px solid #aaa;
    list-style:none;
}

.container ul:after {
    display:block;
    content:"";
    clear:both;
}

.container ul li {
    float:left;
}

.container ul li>a {
    display:inline-block;
    padding:6px 12px;
}
Copy the code

SCSS implementation

Nested selectors

/*scss*/
.container ul {
    border:1px solid #aaa;
    list-style:none;
    
    li {
        float:left;
    }
    
    li>a {
        display:inline-block;
        padding:6px 12px; }}.container ul:after {
    display:block;
    content:"";
    clear:both;
}
Copy the code

Parent selector in nesting&

The parent selector can only be used inside a nesting, otherwise SCSS will report an error if it cannot find the parent element. In all kinds of pseudo-class selectors, the parent selector is very common

/*scss*/
.container ul {
    border:1px solid #aaa;
    list-style:none;
    
    li {
        float:left;
    }
    
    li>a {
        display:inline-block;
        padding:6px 12px;
    }
    
    &:after {
        display:block;
        content:"";
        clear:both; }}Copy the code

Nested composite selectors

You can write any CSS code in nested rules, including group selectors (,), child selectors (>), adjacent group selectors (+), group group selectors (~), and so on

/*scss*/
.container ul {
    border:1px solid #aaa;
    list-style:none;
    
    li {
        float:left;
        
        >a {
            display:inline-block;
            padding:6px 12px;
        }
    }
    
    &:after {
        display:block;
        content:"";
        clear:both; }}Copy the code

Child selectors can be written to the right of the outer selector (as in the following example) or to the left of the inner selector (as in the above example)

Be careful when writing to the right of the outer selector. It will apply to all nested selectors

li> {a {
        display:inline-block;
        padding:6px 12px; }}Copy the code

Nested properties

When SCSS recognizes an attribute ending with a semicolon, it is judged as an attribute, and when it ends with braces, it is judged as a nested attribute. The rule is to form a new attribute by connecting external attributes and internal attributes with a dash

CSS writing

/*css*/
li {
    border:1px solid #aaa;
    border-left:0;
    border-right:0;
}
Copy the code

SCSS, let me rewrite it

li {
    border:1px solid #aaa {
        left:0;
        right:0; }}Copy the code

Import the SCSS file

The CSS provides the @import command to import another CSS file. The browser loads the corresponding CSS file only after the @import statement is executed. As a result, the page performance deteriorates, and the CSS is not used

The @import command in SCSS

Import variable priority issue – variable default value

The last import overwrites the preceding variable

/*App1.scss*/
$border-color:#aaa; // Declare variables
@import App2.scss;  // Import another SCSS file
.container {
    border:1px solid $border-color; // Use variables
}
/*App2.scss*/
$border-color:#ccc; // Declare variables

/* Generated CSS file */
.container {
    border:1px solid #ccc; // Use variables
}

// The style is overwritten
Copy the code

Sometimes we want to introduce styles that do not change the original style, so we can use variable defaults in the imported CSS.

! Default can only be used in variables

/*App1.scss*/
$border-color:#aaa; // Declare variables
@import App2.scss;  // Import another SCSS file
.container {
    border:1px solid $border-color; // Use variables
}
/*App2.scss*/
$border-color:#ccc! default;// Declare variables

/* Generated CSS file */
.container {
    border:1px solid #aaa; // Use variables
}
Copy the code

The imported file app2. SCSS takes effect only if the file does not have $border-color. If the app1. SCSS variable already exists, the $border-color in app2. SCSS does not take effect

Nested import

/*App1.scss*/
$border-color:#aaa; // Declare variables
.container {
    @import App2.scss;  // Import another SCSS file
    border:1px solid $border-color; // Use variables
}
/*App2.scss*/
$border-color:#ccc! default;// Declare variables
p {
    margin:0;
}

/* Generated CSS file */
.container {
    border:1px solid #aaa; // Use variables
}
.container p {
    margin:0;
}
Copy the code

Use native@import

SCSS can also import CSS files directly

@import 'App.css';
Copy the code

annotation

There are two types of comments: (1) /* Comments */: These comments are retained in the compiled CSS file.

(2) // comments: These comments are not retained in the compiled CSS file.

Mixer (function)

Declare a function@mixin

If there are duplicate code fragments, consider using a mixer to extract them for reuse

@mixin border-radius{
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    color:red;
}
Copy the code

All properties in the mixer scope are return values

You can pass parameters to a function
@mixin get-border-radius($border-radius.$color){
    -moz-border-radius: $border-radius;
    -webkit-border-radius: $border-radius;
    border-radius: $border-radius;
    color:$color;
}
Copy the code
Sets the mixer’s default values
@mixin get-border-radius($border-radius:5px.$color:red){
    -moz-border-radius: $border-radius;
    -webkit-border-radius: $border-radius;
    border-radius: $border-radius;
    color:$color;
}
Copy the code

Using the function@include

.container {
    border:1px solid #aaa;
    @include get-border-radius;         If no parameter is passed, the default value is 5px
    @include get-border-radius(10px,blue);   / / the refs
}
/* If multiple parameters are passed, the parameter name can be specified regardless of the order in which they are passed
.container {
    border:1px solid #aaa;
    @include get-border-radius;         If no parameter is passed, the default value is 5px
    @include get-border-radius($color:blue,$border-radius:10px);   / / the refs
}
Copy the code

The function of slot@content

@content is used in mixins when a mixin is defined and @content is set. @include can pass in the corresponding content to the mixin

$color: white;
@mixin colors($color: blue) {
  background-color: $color;
  @content;
  border-color: $color;
}
.colors {
  @include colors { color: $color; }}Copy the code

The compiled

.colors {
  background-color: blue;
  color: white;
  border-color: blue;
}
Copy the code

inheritance

An existing CSS style class can be inherited by other style classes.

Implement the following CSS

.btn..btn--primary..btn--info {
  border: 1px solid blue;
}

.btn--primary {
  color: black;
}

.btn--info {
  color: gray;
}
Copy the code

SCSS implementation

.btn {
  border: 1px solid blue;
}

.btn--primary {
  color: black;
  @extend .btn;
}

.btn--info {
  color: gray;
  @extend .btn; 
}
Copy the code

Inherits multiple selectors

SCSS code
.one {
	width:100px;height:100px;
}
.two {
	/* Inherited style */
	@extend .one;
	@extend .three;
	/* An easy way to write inheritance */
	@extend .one, .three;
	/* Independent style */
	background:red;
	border:5px solid # 000;
}
.three {
	padding:10px;
}
Copy the code
Compiled CSS code
.one..two {
  width: 100px;
  height: 100px;
}
 
.two {
  background: red;
  border: 5px solid # 000;
}
 
.three..two {
  padding: 10px;
}
Copy the code

Chain type inheritance

The class name “.three “inherits the class name”.two, “which in turn inherits the class name”.one.”

SCSS code

.one {
	width:100px;height:100px;
}
.two {
	/* Inherited style */
	@extend .one;
	/* Independent style */
	background:red;
	border:5px solid # 000;
}
.three {
	/* Inherited style */
	@extend .two;
	/* Independent style */
	padding:10px;
}
Copy the code
Compiled CSS code

.one..two..three {
  /* Inherited style */
  width: 100px;
  height: 100px;
}
 
.two..three {
  /* Independent style */
  background: red;
  border: 5px solid # 000;
}
 
.three {
  /* Independent style */
  padding: 10px;
}
Copy the code

A placeholder

If it is not referenced by extend, it will not compile, i.e., it will not consume CSS file size. This is the biggest difference from inheritance.

Defines inherited style placeholders%

%btn {
  border: 1px solid blue;
}

// is not extended
// Does not appear in CSS files
%test-btn {
  border: 1px solid black;
}

.btn--primary {
  color: black;
  @extend %btn;  // Inherit styles
}

.btn--info {
  color: gray;
  @extend %btn;  // Inherit styles
}
Copy the code

The compiled

.btn--primary..btn--info {
  border: 1px solid blue; 
}

.btn--primary {
  color: black;
}

.btn--info {
  color: gray;
}
Copy the code

Inheritance + placeholder

%border-style {
	border: 1px solid blue;
}
.container {
	@extend %border-style;  // Inherit placeholders
	color:red;
}
.container1 {   // Inherits another selector
	@extend .container;
}
Copy the code

The compiled

.container {
	border: 1px solid blue;
	color:red;
}
.container .container1 {
	border: 1px solid blue;
	color:red;
}
Copy the code

other

SCSS also supports if for and so on

SCSS provides standard arithmetic operators such as +, -, *, /, and %.

@ the at – root instructions

One or more style rules can be generated at the root of the style file rather than nested in its parent selector:

.parent{...@at-root.child { ... }}Copy the code

The compiled:

.parent{... }.child{... }Copy the code
.parent{...@at-root {
    .child1{... }.child2{... }}.step-child{... }}Copy the code
.parent{... }.child1{... }.child2{... }.parent .step-child{... }Copy the code

SCSS has many built-in functions, including numeric manipulation, string manipulation, color manipulation, selector manipulation, and so on

Reference: jimyuan. Making. IO/blog / 2017/0…

str-index(
s t r i n g . string, substring)

Returns an index indicating the starting position of subString in subString in subString in string. If not found, null is returned with subscripts starting at 1.

str-index(abcd, a)  => 1
str-index(abcd, ab) => 1
str-index(abcd, X)  => null
str-index(abcd, c)  => 3
Copy the code

Overwrite global variables! global

$color: blue;
a{
    $color: red;
    color: $color;         //red
}
p{
    color: $color;         //blue
}

// However, if use! global

span{
    $color: yellow ! global;color: $color;               //yellow
}
div{
    color: $color;               //yellow
}
Copy the code