SCSS--SCSS common attribute collection

Introduction to SCSS
SCSS official documents

1. Common attribute collection

1.1 rule nesting

Scss allows a set of css styles to be nested into another set of styles. The inner style takes its outer selector as the parent selector, for example:

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

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

Compile as:

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

1.2 parent selector

When nesting CSS rules, it is sometimes necessary to directly use the parent selector of the nested outer layer. For ex amp le, when setting the hover style for an element, or when the body element has a classname, you can use & to represent the parent selector of the nested outer layer.

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

Compile as:

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

1.3 nested attributes

Some CSS attributes follow the same namespace. For example, font family, font size and font weight all use font as the namespace of attributes. In order to facilitate the management of such attributes and avoid repeated input, Scss allows attributes to be nested in namespaces, for example:

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

Compile as:

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

1.4 variables $(variables: $)

The most common usage of Scss is variable, which starts with dollar sign. The assignment method is the same as that of CSS attribute:

$width: 5em;
// use
#main {
  width: $width;
}

Compile as:

#main {
  width: 5em
}

1.5 operation

Scss supports addition, subtraction, multiplication, division, rounding and other operations (+ -, *, /,%) of numbers. If necessary, values will be converted between different units.

p {
  width: 10px + 20px;
}

Compile as:

p {
  width: 30px; 
}

1.6 variable definition! default (variable Defaults: !default)

You can add at the end of the variable! default to a failed! default declares the assignment of the assigned variable. At this time, if the variable has been assigned, it will not be re assigned, but if the variable has not been assigned, it will be given a new value.

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

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

Compile as:

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

1.7 @import

SCSS extends the function of @ import to allow it to import SCSS or Sass files. The imported file will be merged and compiled into the same CSS file. In addition, the variables or mixins contained in the imported file can be used in the imported file.

@import "foo.scss";

// or

@import "foo";

Scss allows you to import multiple files at the same time, such as rounded corners and text shadow files at the same time:

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

1.8 @media

The @ media instruction in Scss is the same as that in CSS, except that it adds an additional function: it allows it to be nested in CSS rules. If @ media is nested within CSS rules, when compiling, @ media will be compiled to the outermost layer of the file, including the nested parent selector. This feature makes @ media more convenient to use without reusing selectors and disrupting

@media screen {
  .sidebar {
    @media (orientation: landscape) {
      width: 500px;
    }
  }
}

Compile as:

@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px; }
 }

1.9 @extend

When designing web pages, we often encounter this situation: one element uses the same style as another element, but adds additional styles. Usually, two class es are defined for elements in html, a general style and a special style. Suppose you want to design a normal error style and a serious error style, it is generally written as follows:

.father{
    color: yellow;
    font-size: 18px;
  }
.son{
    @extend .father;
    font-weight: bold;
  }

Compile as:

.father{
    color: yellow;
    font-size: 18px;
  }
.son{
    color: yellow;
    font-size: 18px;
    font-weight: bold;
  }

2.0 control commands @ if, @ else if, @ else

When the return value of the @ if expression is not false or null, the condition holds and the code in {} is output:

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

Compile as:

p {
  border: 1px solid;
}

@An if declaration can be followed by multiple @ else if declarations or one @ else declaration. If the @ if declaration fails, Sass will execute the @ else if declaration one by one. If all fail, Sass will finally execute the @ else declaration, for example:

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

Compile as:

p {
  color: green;
}

2.1 @for

@for The instruction can repeat the output format within a limited range and modify the output result as required (the value of the variable) each time
 There are no changes. This instruction contains two formats:@for $var from <start> through <end>，perhaps
@for $var from <start> to <end>，The difference is through And to Meaning: when used through When, bar
 Part scope includes <start> And <end> Instead of using to The condition range contains only <start> The value of does not contain 
<end> Value of. In addition, $var It can be any variable, such as $i；<start> and <end> Must be an integer
 Value. Namely through Anterior closure and posterior closure to It's front closed and back open

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

Compile as:

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

2.2 @each

@each The format of the instruction is $var in <list>, $var Can be any variable name, such as $length perhaps 
$name，and <list> Is a series of values, that is, a list of values.
@each Will variable $var Apply to value list	And then output the results, for example:

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

Compile as:

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

2.3 @while

@The while instruction repeats the output format until the expression returns false. This enables more complex loops than @ for, but rarely used. For example:

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

Compile as:

.item-6 {
  width: 12em; 
}

.item-4 {
  width: 8em; 
}

.item-2 {
  width: 4em; 
}

2.4 define mixed style instruction @ mixin & introduce mixed style @ include

The usage of the mix instruction is to add a name and style after @ mix. For example, the mix named large text is defined by the following code:

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

Mixing also needs to include selectors and properties, and you can even use & to refer to the parent selector:

@mixin clearfix {
  display: inline-block;
  &:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  * html & { height: 1px }
}

Reference blend style @ include

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

Compile as:

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

2.5 parameters of mixed style instruction

Parameter is used to set the variable for the style in the mixing instruction, and the assignment is used. When defining mixed instructions, write the parameters into parentheses according to the format of variables and separated by commas. When referencing instructions, write the assigned values into parentheses according to the order of parameters:

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

Compile as:

p {
  border-color: blue;
  border-width: 1rem;
  border-style: dashed; 
}

2.6 function directives

Scss supports custom functions and can be used in any attribute value or Sass script:

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

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

#sidebar { width: grid-width(5); }

Compile as:

#sidebar {
  width: 240px;
 }

Keywords: css scss

Added by LuAn on Fri, 24 Dec 2021 13:38:58 +0200

Programming VIP

SCSS--SCSS common attribute collection

1. Common attribute collection

1.1 rule nesting

1.2 parent selector

1.3 nested attributes

1.4 variables $(variables: $)

1.5 operation

1.6 variable definition! default (variable Defaults: !default)

1.7 @import

1.8 @media

1.9 @extend

2.0 control commands @ if, @ else if, @ else

2.1 @for

2.2 @each

2.3 @while

2.4 define mixed style instruction @ mixin & introduce mixed style @ include

2.5 parameters of mixed style instruction

2.6 function directives

Popular Keywords