SCSS learning summary

This is the fifth day of my participation in Gwen Challenge

The installation

npm install sass-loader node-sass -D
Copy the code

variable

The statement

$highlight-color: #F90;


$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
  border: $highlight-border;
}

Copy the code

scope

• withCSSProperties are different, variables can be incssExists outside of the rule block definition. When a variable is defined incssWithin the rule block, then the variable can only be used within the rule block

$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}

/ / the compiled

nav {
  width: 100px;
  color: #F90;
}
Copy the code

nested

General writing

#content {
  article {
    h1 { color: # 333 }
    p { margin-bottom: 1.4 em }
  }
  aside { background-color: #EEE}} #content article h1 {color:# 333 }
#content article p { margin-bottom: 1.4 em }
#content aside { background-color: #EEE }
Copy the code

Parent selector $

• $represents the parent selector

article a {
  color: blue;
  &:hover { colorArticle a {color: blue} article a:hover {color: red}Copy the code

Group selector

.container h1..container h2..container h3 {
	margin-bottom:.8em} ---->. Container {h1, h2, h3 {margin-bottom:8em//----> nav a, aside {color: blue}Copy the code

The usage of >, +, and ~ —- is the same as that in the CSS

• >Select the immediate child element

Article > section {border: 1px solid # CCC} // Select the child element that follows article, sectionCopy the code

• + Select sibling elements

< span style = "box-sizing: border-box; color: RGB (74, 74, 74); line-height: 22px; font-size: 14px; white-space: normal;Copy the code

• ~

Article ~ article {border-top: 1px console # CCC} // Select all the article elements that are in the same layer after the article, no matter how many other elements are between themCopy the code

article{~article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: # 333 }
    dd { color: # 555 }
  }
  nav + & { margin-top: 0}} // compile artical ~ artical{border-top:1px dashed #ccc }
artical > section{ background: #eee }
artical dl > dt{color: # 333}
artical dl > dd{color: # 333}
nav + artical { margin-top: 0 }
Copy the code

Attributes are nested

• Sass can nest attributes, typically the border-xxx attribute

nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc; }}/ / the compiled
nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}
Copy the code

• You can even partially nest attributes

nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px; }}/ / the compiled
nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}
Copy the code

The import

The default value

• The last declaration overwrites the previous values
• through! defaultSetting defaults

$fancybox-width: 400px! default;.fancybox {
width: $fancybox-width;
}
// If you declare a $fancybox-width variable before importing, the 400px assignment to $fancybox-width in your local file is invalid. If not, $fancybox-width will default to 400px
Copy the code

mixer

General usage

• Variables are useful for handling less complex CSS situations, such as changing colors, width and height
• The mixer is used to define a repeating pattern

// Define a generic CSS style SCSS ---->@mixin
@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

// Use -----> @include
notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

//sass produces:
.notice {
  background-color: green;
  border: 2px solid #00aa00;
    
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
Copy the code

CSS rules in mixers

• The mix can contain CSS selectors

@mixin no-bullets {
  list-style: none;
  li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0px; }}Copy the code

ul.plain {
  color: # 444;
  @include no-bullets;
}

/ / the compiled

ul.plain {
  color: # 444;
  list-style: none;
}
ul.plain li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0px;
}
Copy the code

The mixer transmits parameters

• Similar to js function

@mixin link-colors($normal.$hover.$visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }}Copy the code

a {
  @include link-colors(blue, red, green);
}

//Sass produces:

a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }
Copy the code

• Sometimes it’s hard to tell what each parameter means and what order the parameters are in. To solve this problem,sassAllow through syntax$name: valueSpecifies the value of each parameter in the form of

a {
    @include link-colors(
      $normal: blue,
      $visited: green,
      $hover: red
  );
}
Copy the code

• The default spread and

@mixin link-colors(
    $normal.$hover: $normal.$visited: $normal
  )
{
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }}Copy the code

inheritance

// Inherits styles through selector inheritance
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
Copy the code

• SeriousError will inherit all styles defined at.error anywhere in the stylesheet.

• An HTML element decorated with class=”seriousError” will appear as if it were class=”seriousError error”.

• .seriouserror inherits not only all styles of.error itself, but also any combination selector styles associated with.error. SeriousError inherits as a combination selector