This is the 12th day of my participation in the August Text Challenge.More challenges in August

preface

Have CSS preprocessors ever been useful? Me: Yeah, I’ve used SASS nesting. Guy: Gone? I:… (Awkwardly)

I do not know if you are the same as me, the previous experience, CSS knowledge is still very important. There are popular libraries such as Sass(Scss), Less, Stylus, etc. I mainly use Sass in my project, so this article is based on Sass(Scss).

Sass basis

CSS (Cascading style sheets) is an extension of the syntax, born in 2007, the earliest and most mature one of the CSS preprocessor language, it can use variables, constants, nesting, mixing, functions and other functions, can be more effective and flexible to write CSS.

variable

The provision of variables prevents designers from constantly changing a global attribute (such as the overall color style) and causing us to passively increase our work. Use variables that start with $. There are global and local variables.

$color: #8a8787; // Global variables
div { 
  $width: 100px; // Local variables
  width: $width;
  background: $color;
}
Copy the code

If a variable is used in an attribute, write it in #{}

$side: left;
div { 
  border- # {$side} :1px solid $color;
}
Copy the code

nested

This should be the most familiar. 😘 In addition to selectors, properties and pseudo-classes can also be nested.

<div class="parent-container">
   <div class="parent-container-header"></div>
</div>
Copy the code
.parent-container {
   &-header {  // Selector nesting
     background {
       color: red;   // Attribute nesting
     }
     &:hover {  // pseudo-class nesting
       color: green; }}}Copy the code

inheritance

Allows one selector to inherit all properties of another selector. Inherit an existing style block with @extend.

.class1 {
  border: 1px solid #ddd;
}
.class2 {
  @extend .class1;
  font-size: 12px;
}
Copy the code

hybrid

Vue-like mixin is reusable style code and can specify parameters and default values, as shown with @mixin.

@mixin left($value: 10px) {
  float: left;
  margin-left: $value;
}
div {
  @include left(4px);
}
Copy the code

@import

Used to import external style files

@import "File relative path"
Copy the code

annotation

There are two ways /* comment */ and // comment

The color function

Built-in color function, easy to generate a series of colors.

lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) / / # 808080
complement(#cc3) // #33c
Copy the code

Sass operation

subtracting

Sass can do all kinds of mathematical calculations (variables and attributes). The addition and subtraction must be in the same unit, and the division must be parentheses

$height: 10px;
div {
  width: 10px + 10px;
  height: $height + 10px;
  margin-top: 20px -10px;
  margin-left: 10px * 2;
  margin-right: (10px / 2);
}
Copy the code

Character operation

Use + to concatenate strings

div:before {
 content: "hello" + "world";
}
Copy the code

Sass command

@if

Similar to JS, it can be used to mix mixins, judging by parameters.

@mixin isHidden($bool: true) {
  @if $bool {
    display: block;
  }
  @else {
    display: none; }}Copy the code

cycle

Can help generate similar selectors, such as defining some similar margin. There’s @for, @while, @each

@for $i from 1 to 10 {
  .margin-# {$i} {
    left: # {$i}px; }}Copy the code
$i: 6;
while $i > 0 {
  .margin-# {$i} {
    left: # {$i}px;
  }
  $i: $i - 1;
}
Copy the code
@each $item in a, b, c, d {
  .#{${member} {
    background-image: url("/image/#{$member}.jpg"); }}Copy the code

Sass function

Custom function

@function double($d) {
  @return $d * 2
}
div {
  width: double(2px);
}
Copy the code

Built-in function

Sass provides functions such as Strings, Numbers, Lists, and Maps. String functions include unquote to delete string quotes and quote to add quotes. Numerical functions similar to Math provide such as round, Ceil, floor, ABS, and so on. List functions such as length($list) return the length of the list. Here will not list one by one, more is to know about what to provide, you can go to the official website to find.

conclusion

CSS preprocessor if you want to better use, communicate with the designer sister first, can play a greater role 😉.

reference

Sass commands and functions