Because there was no way to find a template suitable for customers on the network, and there was no good management method for writing css before, I finally chose scss.

 

Nested 

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

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

Pay attention to the nested writing method and try not to nest too many layers, which will affect the performance during rendering

 

Reference parent selector:  &

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

>>>>>>>>>>>>>>>>>>>>>>>>>>>>
a {
  font-weight: bold;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }
  body.firefox a {
    font-weight: normal; }

 

Nested Attributes

.funky {
  font: 2px/3px {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

>>>>>>>>>>>>>>>>
.funky {
  font: 2px/3px;
    font-family: fantasy;
    font-size: 30em;
    font-weight: bold; }

Separate font attributes are easier to manage, although there are many more codes

 

Placeholder Selectors: %foo

//If% extreme is not found, nothing will be compiled
#context a%extreme {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}
//.  Either notice or #t notice is acceptable
.notice {
  @extend %extreme;
}

>>>>>>>>>>>>>>>>
#context a.notice {
  color: blue;
  font-weight: bold;
  font-size: 2em; }

This is a good way to handle it. It is usually used in the matching attribute, or tagName

 

Comments: /* */ and //

/*See me after compiling */
body { color: black; }

// You can't see me
a { color: green; }

>>>>>>>>>>>>>>>>
/*See me after compiling */
body {
  color: black; }

a {
  color: green; }

 

SassScript

Interactive Shell

hear nothing of...

 

Variables: $

$width: 5em;

>>>>>>>>>>>
#main {
  width: $width;
}

If you see! Replace $, or: replace =:, it can be determined that it is an old version, which is officially said to have been discarded

 

data type

SassScript supports six main data types:

• Number (e.g   1.2,13,10px)
• Text string, with or without quotation marks (for example   "foo",'bar',baz,important)
• Color (e.g   blue,#04a3f9,rgba(255, 0, 0, 0.5))
• Boolean value (for example   true,false)
• Null value (e.g   null)
• List of values, separated by spaces or commas (for example   1.5em 1em 0 2em,Helvetica, Arial, sans-serif)

character string

Although it is said that "" or no quotation marks are acceptable, there are exceptions when compiling #{}, which should be noted

@mixin firefox-message($selector) {
  body.firefox #{$selector}:before {
    content: "Hi, Firefox users!";
  }
}

@include firefox-message(".header");

>>>>>>>>>>>>>>
body.firefox .header:before {
  content: "Hi, Firefox users!"; }

If you don't give quotation marks, you will have an error, because the. header is a class and the text is a string. That's what we should pay attention to

 

Lists

The article says he doesn't often use it, so I can't explain this function.

 

operation

All data types support equality operations (==   and  !=). In addition, each data type also has special operators it supports.

 

Digital operation

plus  +, reduce  -, ride  *, except  / And mold taking  %

Numbers also support relational operations (<, >, < =, > =), and equation operations (=,! =) are supported by all data types.

 

Division and  /

 

If you want to use variables and in pure CSS  /， You can use  # {}   Enclose variables. For example:

 

 

Color operation

 

 

String operation

 

Boolean operation

Boolean values are supported   and,or   and   not   Operation.

 

List Operations

I've been avoiding this list function in the article. Maybe it's a good thing, but I can't explain it?

 

Parentheses

p {
  width: (1em + 2em) * 3;
}
>>>>>>>>>>>>>
p {
  width: 9em; }

 

function

p {
  color: hsl(0, 100%, 50%);
}
>>>>>>>>>>
p {
  color: #ff0000; }

p {
  color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);
}
This can also be compiled

Interpolation: #{}

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}
>>>>>>>>
p.foo {
  border-color: blue; }

-----------------

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}
>>>>>>>>>
p {
  font: 12px/30px; }

Variable default:  ! default

By adding at the end of the value  ! default   That is, if the variable has been assigned, it will not be assigned again, but if it has not been assigned, it will be assigned a value.

$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;

#main {
  content: $content;
  new-content: $new_content;
}

>>>>>>>>>>>>>>
#main {
  content: "First content";
  new-content: "First time reference"; }


---------------------------------------
$content: null;
$content: "Non-null content" !default;

#main {
  content: $content;
}

>>>>>>>>>>>>>>>
#main {
  content: "Non-null content"; }

I'll explain it myself. During assignment, if there is a value, it will not change. If there is no value (null), it will find suffix. Yes! default also assigns

 

@import

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);
@import "rounded-corners", "text-shadow";

Import is the same as css. SCSS has more functions. If you import "color", you will find color.scss or color.sass

$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=#{$family}");
>>>>>>>
@import url("http://fonts.googleapis.com/css?family=Droid+Sans");

You have a file called  _ colors.scss. This will not generate  _ colors.css   File

 

Another example: you have an example.scss

.example {
  color: red;
}

#main {
  @import "example";
}
>>>>>
#main .example {
  color: red;
}

 

This directive is only allowed at the basic level of the document, such as @ mixin or @ charset, and is not allowed in the nested context file @ imported.

It is not possible to mix in or control nested @ import instructions. (@ = instruction)

 

@media

 

 

@extend

Be prepared. This extend can only be done by heart. There is no logic. I have to recite it...

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
>>>>
.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd;
}

.seriousError {
  border-width: 3px;
}

This design can avoid bug s. If you want to use serialerror, you can call it directly, because error and serialserror have been separated, and error is assigned to serialerror

If you want to expand, you only need to expand error. For example, give error a background

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

.error {   border: 1px #f00;    } .error.intrusion {   background-image: url("/image/hacked.png"); } .seriousError {   @extend .error;   border-width: 3px; } >>>> .error, .seriousError {   border: 1px #f00;    }   .error.intrusion, .seriousError.intrusion {   background-image: url("/image/hacked.png"); }   .seriousError {   border-width: 3px; }

　

extend single element　

 

 

!optional

a.important {
  @extend .notice !optional;
}

If the. notice is not found, it will cause an error, but if optional is added, it will not cause an error.

 

@extend in Directives

@media print {
  .error {
    border: 1px #f00;
    background-color: #fdd;
  }
  .seriousError {
    @extend .error;
    border-width: 3px;
  }
}

>>>>
.error {
  border: 1px #f00;
  background-color: #fdd;
}

@media print {
  .seriousError {
    // INVALID EXTEND: .error is used outside of the "@media print" directive
    @extend .error;
    border-width: 3px;
  }
}

According to the official explanation, @ media can't know the css rules outside @ media. I may compile the error first, and there is no error at this time

 

@debug 

@warn

@debug 10em + 12em;
>>>>
Line 1 DEBUG: 22em

 

Control Directives

@if

 

@for

 

@for $var from <start> through <end>

@each

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

@each $var in <list>

 

@while

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

.item-4 {
  width: 8em; }

.item-2 {
  width: 4em; }

 

Mixin Directives

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}
.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}
>>>>
.page-title {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  padding: 4px;
  margin-top: 10px; }

Basically

@mixin silly-links {
  a {
    color: blue;
    background-color: red;
  }
}

@include silly-links;
>>>>
a {
  color: blue;
  background-color: red; }

@mixin compound {
  @include highlighted-background;
  @include header-text;
}

@mixin highlighted-background { background-color: #fc0; }
@mixin header-text { font-size: 20px; }

Mixin recurrence is forbidden!

Arguments

@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}

p { @include sexy-border(blue, 1in); }
>>>>
p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed; }

@mixin sexy-border($color, $width: 1in) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2in); }
>>>>
p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed; }

h1 {
  border-color: blue;
  border-width: 2in;
  border-style: dashed; }

 

@mixin sexy-border($color) {
  &:focus {
    border-color: $color;
    outline: 0;
    box-shadow: rgba(red($color), green($color), blue($color), .6);
  }
}
p { @include sexy-border(#66afe9); }
>>>>
p:focus {
  border-color: #66afe9;
  outline: 0;
  box-shadow: rgba(102, 175, 233, 0.6); }

 

 

 

Keyword Arguments

p { @include sexy-border($color: blue); }
h1 { @include sexy-border($color: blue, $width: 2in); }

When you give a variable, you can know what the variable is.

 

Variable Arguments

@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}

.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}
>>>>
.shadows {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

@mixin colors($text, $background, $border) {
  color: $text;
  background-color: $background;
  border-color: $border;
}

$values: #ff0000, #00ff00, #0000ff;
.primary {
  @include colors($values...);
}
>>>>
.primary {
  color: #ff0000;
  background-color: #00ff00;
  border-color: #0000ff;
}

Passing Content Blocks to a Mixin

@mixin apply-to-ie6-only {
  * html {
    @content;
  }
}
@include apply-to-ie6-only {
  #logo {
    background-image: url(/logo.gif);
  }
}
>>>>
* html #logo {
  background-image: url(/logo.gif);
}

Variable Scope and Content Blocks

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

#sidebar {
  $sidebar-width: 300px;
  width: $sidebar-width;
  @include smartphone {
    width: $sidebar-width / 3;
  }
}

 

 

Function Directives

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }
//#sidebar { width: grid-width($n: 5); }
>>>>
#sidebar {
  width: 240px; }

 

Output Style

:nested

:expanded

:compact

:compressed

　　　

Transferred from: https://www.cnblogs.com/stooges/p/4691733.html