Cainiao Sass Study Notes and cainiao sass Study Notes

Cainiao Sass Study Notes and cainiao sass Study Notes
Introduction

What is sass ?? On the sass official website, it is described as follows:

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

Sass is the most mature, stable, and powerful css extension language in the world.

Sass is not a programming language, but we can use it to develop webpage styles. You can call it a css Preprocessor. Use sass to write css and compile it into a normal css file.

 

Css compatibility: Sass is fully compatible with all versions of CSS.

Rich Functions: Sass has more features and capabilities than any other CSS extension language.

Mature: Sass has been actively supported by its core team for more than 10 years.

Community: Sass is actively supported and developed by several technology companies and hundreds of developers.

Architecture: There are countless frameworks established with Sass. Compass, Bourbon, and Susy.

 

Install

Install Ruby first, then sass → gem install sass

More detailed installation → http://sass-lang.com/install

Learning Record 1. Variables

For a project, such as a main color, or all border styles, the important information or repeated use in the project, you can use $ to define variables in sass.

If the color of the entire border of the project needs to be changed, we can directly modify the color of the defined variable border.

Example:

// Define the variable $ primary-border: 1px solid # eee; $ primary-color: # 488aff; // use the variable. test {border: $ primary-border; color: $ primary-color;} // compile the result. test {border: 1px solid # eee; color: # 488aff ;}

2. nesting

Sass allows css rules to be nested with each other. It has a clear hierarchy of nesting and visualization. However, excessive nesting will make it difficult to maintain it later.

For example:

#main p {  color: #00ff00;  width: 97%;  .redbox {    background-color: #ff0000;    color: #000000;  }}

After compilation:

#main p {  color: #00ff00;  width: 97%;}#main p .redbox {  background-color: #ff0000;  color: #000000;}

Reference parent Selector

Use & to replace the parent selector. & it must start with the composite selector, or even use a suffix that is added to the parent selector.

Example:

#main {  color: black;  a {    font-weight: bold;    &:hover { color: red; }  }  &-sidebar {  border: 1px solid;   }}

After compilation:

#main {  color: black;}#main a {  font-weight: bold;}#main a:hover {  color: red;}#main-sidebar {  border: 1px solid;}

Nested attributes

For examplefont-family,font-sizeAndfont-weightAll infontIt is troublesome to set many attributes of a namespace in the same namespace. sass provides a way to write the namespace once and then nest each of its subattributes.

.funky {  font: {    family: fantasy;    size: 30em;    weight: bold;  }}

The property namespace itself can also have a value

For example:

.funky {  font: 20px/24px fantasy {    weight: bold;  }}

After compilation:

.funky {  font: 20px/24px fantasy;  font-weight: bold;}

3. Notes

Sass supports standard multi-line CSS comments/**/and single-line comments //. Multi-line comments are retained after compilation, while single-line comments are deleted after compilation.

Example

/* I am * multi-line * Comment * // I am * I am a single line comment body {color: black ;}

After compilation:

/* I am * multi-line * Comment */body {color: black ;}

If it is a very important comment, even after the compression mode is compiled, there will be/* adding an exclamation point

/*! * Super important comments */

Variables can also be used in annotations.

$ Version: "1.0.0";/* version # {$ version }.*/

After compilation

/* Version 1.0.0 .*/

 

4. Import

Suppose there are two sass files, bass. scss and _ part. scss. You can import _ part. scss to bass. scss.

However, the imported css file, http: // orurl()

For example:

@import "foo.css";@import "foo" screen;@import "http://foo.com/bar";@import url(foo);

You can also import multiple

@import "rounded-corners", "text-shadow";

This is an example:

_ Part. scss

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

Base. scss

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

@importNested Import

For example, the example. sass file contains the following content:

.example {  color: red;}

Import example

#main {  @import "example";}

Compilation result

#main .example {  color: red;}

5. Mixin

We use @ mixin to define a code block and then use @ include to call this code block.

@mixin border{  border:1px solid #ee;}div{  @include border}

After compilation:

div {  border: 1px solid #ee;}

You can also specify parameters

@mixin border($color:#eee){  border:1px solid $color;}
div{
  @include border(#eee);
}

6. Color

Color value supports all arithmetic operations

p {  color: #010203 + #040506;}

Computing01 + 04 = 05,,02 + 05 = 07And03 + 06 = 09, And compiled:

p {  color: #050709; }

P {color: rgba (255, 0, 0, 0.75) + rgba (0,255, 0, 0.75);} // compiled as: p {color: rgba (255,255, 0, (0.75 );}

It also provides some built-in color functions.

Hsl ($ hue, $ saturation, $ lightness): Creates colors from tone, saturation, and brightness values. Hsla ($ hue, $ saturation, $ lightness, $ alpha): Creates colors from tone, saturation, brightness, and Alpha values.

More about built-in color functions can be viewed here → http://sass-lang.com/documentation/Sass/Script/Functions.html

7. inherit @ extend

Sass allows one selector to inherit another selector.

.test1 {border: 1px solid #eee;}.test2 {@extend .test1;color:white;}

After compilation

.test1, .test2 {  border: 1px solid #eee;}.test2 {  color: white;}

8. @debug @warn @error

@ Debug and @ warn. The command prints the value of the SassScript expression to the standard error output stream, which is helpful for debugging.

@ Warn "this is a warning"; @ error "this is an error"
@ Debug "this is a debugging output"

Output

WARM: this is a warning ERROR: this is an error debug: This is a DEBUG output

9. Control commands and expressions

Sass supports basic control commands and expression control. commands are advanced functions. Let's take a look at them.

@if()

p {  @if 1 + 1 == 2 { border: 1px solid;  }  @if 5 < 3      { border: 2px dotted; }}

After compilation

p {  border: 1px solid; }

@ifThe statement can be followed by several@else，@ifStatement and@elseStatement. If@ifStatement failed,@else ifThese statements are tried in order.

$type: monster;p {  @if $type == ocean {    color: blue;  } @else if $type == monster {    color: green;  } @else {    color: black;  }}

After compilation

p {  color: green; }

@for

The@forThe command repeatedly outputs a set of styles. For each repetition, use the counter variable to adjust the output.

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

After compilation

.item-1 {  width: 2em;}.item-2 {  width: 4em;}.item-3 {  width: 6em;}

@each

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

After compilation

.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");}

@while

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

After compilation

.item-6 {  width: 12em;}.item-4 {  width: 8em;}.item-2 {  width: 4em;}

10. function command # function

You can define your own functions in sass and use them in any value or script context. Note that the name of the function cannot conflict.

For example:

// Define the variable $ grid-width: 40px; $ gutter-width: 10px; // custom function @ function grid-width ($ n) {@ return $ n * $ grid-width + ($ n-1) * $ gutter-width;} // use # sidebar {width: grid-width (5 );} // compilation result # sidebar {width: 240px ;}

Compile

The default CSS style of sass compilation and output, which can be executed-styleSelect four different output styles from the command line.

:nested

nestedStyle is the default Sass style because it reflects the CSS style structure and the HTML document they designed. Each attribute has its own row, but indentation is not a constant. Each rule is indented Based on the nested depth. Nested styles are useful for viewing large CSS files: they allow you to easily understand the structure of the file without actually reading anything.

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

:expanded

expandedIs a more typical artificial CSS style, each attribute and rule occupies the first line. Attributes are indented in the rule, but the rule is not indented in any special way.

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

:compact

compactUse less space than nesting or expansion. It also focuses on selectors rather than their attributes. Each CSS rule occupies only one row, and each row is defined on this row. Nested rules are adjacent to each other without line breaks, while separate rule groups have line breaks between them.

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

:compressed

The compressed style takes up as little space as possible. Apart from separating the selector and the line break at the end of the file, there is no space. It also includes some other slight presses, such as selecting the smallest color representation. This does not mean human readability.

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

 

Ps:

Sass official website → http://sass-lang.com/

Sass github → https://github.com/sass

Sass a Web site that compiles sass into css online → https://www.sassmeister.com/

 

This article is my learning record. If you have any questions, please comment below. repost the article to indicate the source.

If you have any help, please give me a thumbs up at the bottom right of the mouse. Your support is my greatest motivation.