Most complete SCSS tutorial ever

Basis.

1. Data types

SassScript supports six main data types:

Numbers: 1, 2, 13, 10px
String, quoted and unquoted strings, “foo”, ‘bar’, baz
Color, blue, # 04a3F9, RGBA (255,0, 0.5)
Boolean, true, false
A null value, null
Array (list, separated by Spaces or commas), 1.5em 1em 0 2em, Helvetica, Arial, sans-serif maps, equivalent to JavaScript object, (key1: value1, key2: value2)

#{} converts a quoted string to an unquoted string

@mixin B($selector) {
  #{$selector} {
    color: red;
  }
}
@include B('.header');
Copy the code

2. The variable

Variable. SCSS is typically built into a project to store global variables

$g-primary: #409eff; $g-primary: #409eff; / / $values: center, center; @include df($values...) => @include df(center, center);Copy the code

3. The placeholder

Unlike variables, placeholders can be pre-styled and only take effect when called

%mr5 { margin-right:5px; } .header { @extend %mr5; } => /* .header { margin-right:5px; } * /Copy the code

4. Attribute nesting

Properties and: are separated by a semicolon

background: { color: #fff; image: none; } border: 2upx solid #dcdfe6 { radius: 8upx; } /* Don't use semicolons to report errors */Copy the code

2. Operation

1. The division

The following three cases/will be considered as division symbols:

If the value, or part of the value, is the return value of a variable or function
If the value is wrapped in parentheses
If the value is part of an arithmetic expression

p { font: 10px/8px; width:1000px; width:width: 1000px; width: width:1000px; width:width/2; Width: round (1.5) / 2; height: (500px/2); margin-left: 5px + 8px/2px; }

Three: macro definition @mixin

This is essentially function implementation style reuse

Like vertical center

@mixin t-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
Copy the code

Mixins with parameters

Suppose you wrap a Flex style

@mixin df($fd,$jc,$ai,$as){
 display:flex;
 flex-direction:$fd;
 jusitify-content:$jc;
 align-items:$ai;
 align-self:$as;
}
Copy the code

I thought we were done, but this is what happens

It’s hard to pass constant parameters every time

You can set default parameters

@mixin df($fd:row,$jc,$ai,$as){
 display:flex;
 flex-direction:$fd;
 jusitify-content:$jc;
 align-items:$ai;
 align-self:$as;
}
Copy the code

I don’t need every parameter. What do I do?

It can be set to null by default and will not be displayed without passing an argument

@mixin df($fd:row,$jc:null,$ai:null,$as:null){
 display:flex;
 flex-direction:$fd;
 jusitify-content:$jc;
 align-items:$ai;
 align-self:$as;
}
Copy the code

Incorrect order of parameter transmission may cause errors

We might pass @include df(center,center) like this, but sometimes the default value is set first, in which case we can pass the parameter by keyword

@include df($jc:center,$ai:center)
Copy the code

What if one of the arguments passed is a set of values, such as: flex

@mixin df( fd,fd,fd,jc, ai,ai,ai,as){ display:flex; flex-direction: fd; Jusitify – content: fd; jusitify-content:fd; Jusitify – content: jc; align-items: ai; The align – self: ai; align-self:ai; The align – self: as; flex:xx; / /? How to pass}

Can use… Write after the argument

@mixin df($fd,$jc,$ai,$as,$flex...) { display:flex; flex-direction:$fd; jusitify-content:$jc; align-items:$ai; align-self:$as; flex:$flex; } @include df($jc:center,$ai:center,$flex:1 auto 1)Copy the code

other

! default

Can be added at the end of a variable! Default gives a fail! Default declares that the assigned variable is assigned. If the variable has already been assigned, it will not be reassigned, but if the variable has not been assigned, it will be assigned a new value.

$content: "First content"; $content: "Second content?" ! default; $new_content: "First time reference" ! default; #main { content: $content; new-content: $new_content; }Copy the code

Compiled into

#main {
  content: "First content";
  new-content: "First time reference"; 
}
Copy the code

@extend

Used to extend selectors or placeholders.

.df {
    display:flex
}
.header {
    @extend .df;
}
=>
/*
.header {
    display:flex
}
*/
Copy the code

@at-root

@at-root literally means out of the root element. You can use @at-root when you want a selector to jump out of a nested selector.

.wrapper {
    width:100%;
    height:100%;
    @at-root .active{
        color:red
    }
}
=>
/*
.wrapper {
    width:100%;
    height:100%;
}
.active{
    color:red
}
*/
Copy the code

@content

@for

The @for directive has two formats: @for $var from

through

or @for $var from

to

. When using through, the conditional range contains the values of and, whereas when using to, the conditional range contains only values that are not included in the values. In addition, $var can be any variable, such as $I;

and

must be integer values.

I used to write it this way

Wes {/* The extra part is denoted with ellipsis for the line */ overflow:hidden; word-wrap:normal; white-space:nowrap; text-overflow:ellipsis; }. Ws-2 {/* applies to webKit kernel and mobile */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .wes-3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .wes-4 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }Copy the code

Now we just need to

@for $i from 1 through 4 { .wes-#{$i} { overflow: hidden; @if ($i==1) { word-wrap: normal; white-space: nowrap; text-overflow: ellipsis; } @else { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: $i; }}}Copy the code

The object operation

(key:value)