Sass/Scss study notes

Introduce a,

CSS preprocessor is an enhanced CSS syntax, so that we can use variables, loops, nesting and other functions in the CSS, can make our code more flexible, readable, hierarchical relationship more obvious CSS preprocessor variety, The three dominant CSS preprocessors are Sass (Scss), Less, and Stylus

Sass/Scss, Less, Stylus introduction

Sass/Scss: Launched in 2007, the earliest and most mature CSS preprocessor with support from the Ruby community and compass, the most powerful CSS framework. Under the influence of LESS, SCSS has evolved to be fully CSS compatible (SCSS requires semicolons and curly braces instead of line breaks and indentation).

1. File name extensions are different. Sass is a. Sass file name extension, while SCSS is a. SCSS file name extension 2. Syntax writing is different. Sass is written in strict indented syntax without curly braces ({}) and semicolons (whereas SCSS syntax writing is very similar to our CSS syntax writing).
Less: appeared in 2009. It is greatly influenced by SASS, but it also uses THE syntax of CSS. Compared with Sacc, it has the advantage of being simple and compatible with CSS. He, in turn, influenced the evolution of SASS into SCSS, with the famous Twitter Bootstrap using LESS as the underlying language.
Stylus: created in 2010, from the Node.js community. It is mainly used to support CSS preprocessing for Node projects. It has certain supporters in this community and is not as popular as SASS and LESS in a broad sense

Second, environment building

Windows

1. Download from the website first Ruby, the installation process, please note to check the Add Ruby executables to PATH added to the system's official website https://rubyinstaller.org/downloads/2. Ruby-v will print the version information if the installation is successful3Gem update --system // Use this command to upgrade the version2.6.x above gem-v4Sass gem install sass gem install Compass sass -vCopy the code

Mac

1The system has its own Ruby environment2Sass gem install sass gem install Compass sass -vCopy the code

Convert sASS files to CSS files after installation

// Single file conversion command
sass input.scss output.css

// single file listening command
sass --watch input.scss: the output. The CSS / / if you have a lot of sass files in the directory, you can also tell sass to monitor the entire directory: sass -- watch app/sass: public/stylesheetsCopy the code

Build Sass environment in Vue

1Install nodeJS and have nodeJS environment2. Create a VUE project3NPM install -d node-sass sass-loader NPM install -d node-sass sass-loader to install the sASS environment4<style lang=" SCSS ">.app{... } </style>Copy the code

Reference:

www.sass.hk/install/

Sass/Scss learning

One, nested writing method

Sass allows one set of CSS styles to be nested within another, with the inner style having its outer selector as its parent selector

#main {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: # 000000; }}// After compiling, the result of converting to CSS is:
#main  {
  color: #00ff00;
  width: 97%; }

#main .redbox {
    background-color: #ff0000;
    color: # 000000; }
Copy the code

Second, the variable

1. Definition and use of variables

$width: 1600px;
$pen-size: 3em;
.app {
    height: $width;
    font-size: $pen-size;
}
Copy the code

2. Local variables

#foo {
  $width: 5px;
  width: $width; // No problem at compile time
}

#bar {
  width: $width; // An error will be reported during compilation
}
Copy the code

Data types

SassScript supports seven main data types:

Numbers,1, 2, 13, 10px
String, quoted string and unquoted string,"foo", 'bar', baz
The Boolean,true, false
The color,Blue, # 4 a3f9, rgba (255,0,0,0.5)
Array (list), delimited by Spaces or commas,1.5 EM 1EM 0 2EM, Helvetica, Arial, Sans-serif
Maps, the equivalent of JavaScript object,(key1: value1, key2: value2)
A null value,null

Type -of($value)Copy the code

1. The Numbers (Numbers)

$my-age: 19;
$your-age: 19.5;
$height: 120px; // The unit is treated as a whole with the number
Copy the code

2. Strings

$name: 'Tom Bob';
$container: "top bottom";
$what: heart;
Copy the code

3. Booleans

$a: true;
$b: false;  // Return false only if it is false and null, and return true for everything else
Copy the code

4. The color (Colors)

// There are many ways to express this
$color: #04a3f9;
$color0: green;
$color1: rgb(255.255.0);
$color2: rgba(#f3f3f3m 0.3);  // CSS will report errors with this type of writing, but SCSS supports particularly useful writing
$color3: lighten($color.15%);
$color4: darken($color.15%);
Copy the code

5. The array (Lists)

$list0: 1px 2px 5px 6px;  // Normal arrays are separated by Spaces
$list1: 1px 2px.5px 6px; // Two dimensional arrays are separated by commas
Copy the code

6. The mapping (Maps)

// Enclose content in parentheses
$map: (      
  $key1: value1, 
  $key2: value2, 
  $key3: value3 
)
Copy the code

7. A Null value (Null)

$value: null; 
Copy the code

4. Operators

1. Numeric operators`+, -, *, /, %`

`The + operator`

/ / pure Numbers
$add2: 1 + 2px; // 3px
$add3: 1px + 2; // 3px
$add4: 1px + 2px;//3px

// A pure string
$add5: "a" + "b"; // "ab"
$add6: "a" + b;	  // "ab"
$add7: a + "b";	  // ab
$add8: a + b;	  // ab

// Numbers and strings
$add9: 1 + a;	// 1a
$adda: a + 1;	// a1
$addb: "1" + a; // "1a"
$addc: 1 + "a"; // "1a"
$addd: "a" + 1; // "a1"
$adde: a + "1"; // a1
$addf: 1 + "1"; / / "11"

/ / summary:
aPure numbers: Where there are units, there are unitsbC. Numbers and strings: If the first string is quoted, the result must be quoted. If the first digit is not a number and the last digit has a quotation mark ("), the result must be quotedCopy the code

`The - operator`

$add1: 1 - 2;	// -1
$add2: 1 - 2px; // -1px
$add3: 1px - 2; // -1px
$add4: 1px - 2px;//-1px

$sub1: a - 1;  // a-1
$sub2: 1 - a;  // 1-a
$sub3: "a" - 1;// "a"-1
$sub4: a - "1";// a-"1"
Copy the code

`* operator`

$num1: 1 * 2;    / / 2
$mul2: 1 * 2px;  // 2px
$num3: 1px * 2;  // 2px
$num4: 2px * 2px;// Compile without passing two fields only one part after the character
$num5: 1 * 2abc; // 2abc
Copy the code

`/ operator`

/ / summary:
a. Will not be rounded to 5 decimal placesbEach field must be preceded by a number, and if the preceding is a simple number without a unit, the latter (divisor) must not have a character. The rest of the results are concatenated by removing Spaces in order. (because suffixes are now treated as units)Copy the code

`The % operator`

/ / summary:
aThere must be a space between the. Value and "%", otherwise it will be treated as a stringCopy the code

2. Relational operators`>, <, > =, < =`

3. Equality operator`= =,! =`

Boolean operators`and` `or`As well as`not`

$a: 1>0 and 0> =5; // fasle Note: The value must have Spaces between "and", "or" and" not", otherwise it will be treated as a string
Copy the code

5. Ternary operators`If (condition, result 1, result 2)`

p {
    color: if(1 + 1 = 2, green, yellow);
}

// After compiling, the result of converting to CSS is:
p{ color: green; }Copy the code

Five, control instructions

1. `@ the if instruction`

$age: 19;

p {
    @if $age= =18 {
        color: red;
    } @else if $age= =19 {
        color: blue;
    } @else {
        color: green; }}// After compiling, the result of converting to CSS is:
p {
  color: blue;
}
Copy the code

2. `@ for instruction`

@for $i from 1 through 3 { // Example 1 through contains end values 1,2,3
  .item-# {$i} { width: 2em * $i; }}@for $i from 1 to 3 {     // case 2 to does not contain end values 1,2
  .item-# {$i} { width: 2em * $i; }}// The result of converting case 1 to CSS:
.item-1 {
  width: 2em; }
.item-2 {
  width: 4em; }
.item-3 {
  width: 6em; }
Copy the code

3. `@ each instruction`

$list: puma, sea-slug, egret, salamander;

@each $animal in list { 
  .#{$animal} -icon {
    background-image: url('/images/#{$animal}.png'); }}// After compiling, the result of converting to CSS is:
.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'); }
Copy the code

4. `@ while instruction`

$i: 6;
@while $i > 0 {  //while is used very rarely
  .item-# {$i} { width: 2em * $i; }
  $i: $i - 2;
}

// After compiling, the result of converting to CSS is:
.item-6 {
  width: 12em; }
.item-4 {
  width: 8em; }
.item-2 {
  width: 4em; }
Copy the code

The mixin style directive @mixin

1. Use @mixin@include normally

// 例1
@mixin large-text {    // Define mixed instructions
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

p {
    @include large-text; / / reference
}

// After compiling, the result of converting to CSS is:
p {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
}
Copy the code

2. @mixin with arguments

@mixin mp($width) {
    margin: $width;
}

body {
    @include mp($width: 300px);
}
Copy the code

3. Set the default values

@mixin mp($width: 500px) {
    margin: $width;
}

body {
    @include mp(300px);
}
Copy the code

4. Hybrid style extensions

@mixin example {
   color: #ff0000;
}
@include example{ / / extension
    background-color: red;
}

p {
    @include example; 
}

// After compiling, the result of converting to CSS is:
p {
    color: #ff0000;
    background-color: red;
}
Copy the code

Function instruction @function

// example:
@function fn-name($params...). {@return nth($params.1);
}
p {
    height: fn-name(1px);
}

// After compiling, the result of converting to CSS is:
p {
  height: 1px;
}
Copy the code

Other instructions

1. `@import imports other SCSS files`

@import "foo.scss"; 
@import "foo";   // Only SCSS files can be imported, and CSS files cannot be imported
@import "rounded-corners"."text-shadow"; // Import multiple files simultaneously

// None of the following methods is feasible
@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);
Copy the code

2. `@extend inherits attributes`

.img {
    color: red;
}
.path{
    @extend .img;
}

// After compiling, the result of converting to CSS is:
.img .path {
  color: red;
}
Copy the code

3. `@WARN The command line outputs warning information`

4. `@error Displays error information`

Other grammar

1. `The interpolation of grammar`

$name: foo;
$attr: border;
p. # {$name} {   // Variables can be used in selectors, attribute names, and attribute values through the '#{}' interpolation statement# {$attr} -color: $name;
}

// After compiling:
p.foo {
  border-color: foo;
}
Copy the code

2. `& Parent selector`

a {
    color: yellow;
    &:hover{
        color: green;
    }
    &:active{
        color: blank; }}Copy the code

3. `! default`Setting defaults

$content: "First content";
$content: "Second content?"! default;// Variables that are null are treated as if they are not '! The default ` assignment.
$new_content: "First time reference"! default;#main {
  content: $content;
  new-content: $new_content;
}

// After compiling, the result of converting to CSS is:
#main {
  content: "First content";
  new-content: "First time reference"; }
Copy the code

Four, knowledge summary

What is a Css preprocessor

Sass/Scss, Less, Stylus differences

Nested writing

Definition and use of variables

7 common data types numbers, strings, Booleans, colors, arrays, maps, null values

Operator Boolean operator, ternary operator

Four control commands

@if @for @each @while

Definition and use of @mixin mixed instruction

Two other instructions

@import @extend

Other grammar

Interpolation syntax, parent selector

Five, learning reference

Video: www.bilibili.com/video/BV1Zg…
Official document: www.sass.hk/docs/

Introduce a,

Sass/Scss, Less, Stylus introduction

Second, environment building

Windows

Mac

Convert sASS files to CSS files after installation

Build Sass environment in Vue

Reference:

Sass/Scss learning

One, nested writing method

Second, the variable

1. Definition and use of variables

2. Local variables

Data types

1. The Numbers (Numbers)

2. Strings

3. Booleans

4. The color (Colors)

5. The array (Lists)

6. The mapping (Maps)

7. A Null value (Null)

4. Operators

1. Numeric operators+, -, *, /, %

The + operator

The - operator

* operator

/ operator

The % operator

2. Relational operators>, <, > =, < =

3. Equality operator= =,! =

Boolean operatorsand orAs well asnot

5. Ternary operatorsIf (condition, result 1, result 2)

Five, control instructions

1. @ the if instruction

2. @ for instruction

3. @ each instruction

4. @ while instruction

The mixin style directive @mixin

1. Use @mixin@include normally

2. @mixin with arguments

3. Set the default values

4. Hybrid style extensions

Function instruction @function

Other instructions

1. @import imports other SCSS files

2. @extend inherits attributes

3. @WARN The command line outputs warning information

4. @error Displays error information

Other grammar

1. The interpolation of grammar

2. & Parent selector

3. ! defaultSetting defaults

Four, knowledge summary

Five, learning reference

Related Posts

Automatically deploy vuepress static websites to GitHub Pages using vuepress-deploy

Take you to implement a simple polygon editor

Introduction to the 15-day Algorithm (I)

1. Numeric operators`+, -, *, /, %`

`The + operator`

`The - operator`

`* operator`

`/ operator`

`The % operator`

2. Relational operators`>, <, > =, < =`

3. Equality operator`= =,! =`

Boolean operators`and` `or`As well as`not`

5. Ternary operators`If (condition, result 1, result 2)`

1. `@ the if instruction`

2. `@ for instruction`

3. `@ each instruction`

4. `@ while instruction`

1. `@import imports other SCSS files`

2. `@extend inherits attributes`

3. `@WARN The command line outputs warning information`

4. `@error Displays error information`

1. `The interpolation of grammar`

2. `& Parent selector`

3. `! default`Setting defaults