Sass crash course

Time:2021-11-24

01. Use sass variable to store data

SassAndCSSA different feature is that it can use variables. They can be declared and set to store data similar toJavaScriptVariable.

stayJavaScriptIn, variables are usedletandconstKeyword declaration. staySassIn, the variable is$Start with variable name.

Suppose we need to use the successful color “green” in different places without repeating its name. Therefore, we need to write such code:

$success-color: green;

Then we use this global variable in different places, as shown below:

.success {
color: $sucess-color;
}

h3 {
color: $success-color;
}

An example of a useful variable is when many elements need the same color. If that color changes, the only place you can edit the code is the variable value

02. Nesting CSS with sass

SassIt’ll make you happyCSSThe code looks likehtmlStructure of

Typically, each element is styled for a different row, like this

No nesting:

footer {
background-color: #000;
}

footer ul {
list-style: none;
}

footer ul li {
display: flex;
}

After nesting:

footer {
  background-color: #000;

  ul {
   list-style: none;

   li {
    display: flex;
   }
  }
}

You can make your code more regular by embedding sub styles in the corresponding parent elements

03. Use@mixinCreate reusable CSS

staySassIn,mixinIt’s a groupCSSStatement. So we can reuse them in our style sheets.

NewerCSSFeatures take time to be fully compatible with all browsers. As browsers adopt features, CSS rules that use them may require vendor prefixes. for examplebox-shadowProperties.

No mixing:

.card {
  -webkit-box-shadow: 0px 0px 4px #fff;
  -moz-box-shadow: 0px 0px 4px #fff;
  -ms-box-shadow: 0px 0px 4px #fff;
   box-shadow: 0px 0px 4px #fff;
}

Imagine that there are different types of cards on our website. They have different characteristicsbox-shadoweffect. It requires a lot of coding to support all browsers.

Use mix:

@mixin box-shadow($x, $y, $blur, $c) {
  -webkit-box-shadow: $x $y $blur $c;
  -moz-box-shadow: $x $y $blur $c;
  -ms-box-shadow: $x $y $blur $c;
   box-shadow: $x $y $blur $c;
}

Defined by@mixinStart with a custom name. Parameter (in the above example)$x$y$blurand$c)Is optional. Now, whenever you need itbox-shadow, just one line callmixinThe supplier prefix can be automatically generated.

We need to use@includeInstruction call@mixin

.card {
  @include box-shadow(0px, 0px, 5px, #000);
}

.popup-card {
  @include box-shadow(2px, 2px, 10px, #000);
}

04. Use@ifand@elseAdd logic to styles

staySassIn,@if @elseThe statement is similar toJavaScript。 When we search for a specific condition before applying any style, itSassVery useful in.

@mixin text-color($val) {
  @if $val == danger {
    color: red;
  }
  @else if $val == success {
    color: green;
  }
  @else {
    color: black;
  }
}

Then we need to be in different places@includethismixin

h1 {
 @include text-color(danger);
 font-size: 2rem; 
}

.sucess-text {
  @include text-color(success);
  font-weight: bold;
}

05. Sass@Loop

SassThere are several loop options, much like other programming languages. They include@forCirculation@eachCycle and@whileCycle. These loops are very powerful tools for generating CSS code

use@forCreate aSassCycle:
staySassIn,@forThere are two ways to use it:start through endorstart to endThe difference istoIt won’t include the last image

start through end:

@for $i from 1 through 5 {
  .text-#{$i} { font-size: 10px * $i; }
}

{$i}Part is to add variables(i)Syntax combined with text into a string, compiled as CSS:

.text-1 {
  font-size: 10px;
}

.text-2 {
  font-size: 20px;
}

.text-3 {
  font-size: 30px;
}

.text-4 {
  font-size: 40px;
}

.text-5 {
  font-size: 50px;
}

“Start to end” is the same as “start through end”, except that it does not include the end

@for $j from 1 to 6 {
  .text-#{$j} {font-size: 10px * $j}
}

Compile as CSS:

.text-1 {
  font-size: 10px;
}

.text-2 {
  font-size: 20px;
}

.text-3 {
  font-size: 30px;
}

.text-4 {
  font-size: 40px;
}

.text-5 {
  font-size: 50px;
}

use@eachTo cycle through items in the list:
Do not use map:

@each $color in red, green, yellow {
  .#{$color}-text {color: $color;}
}

Using map:

$colors: (color1: red, color2: green, color3: yellow);

@each $key, $color in $colors {
  .#{$color}-text {color: $color;}
}

The above two code examples are compiled into the following CSS:

.red-text {
  color: red;
}

.green-text {
  color: green;
}

.yellow-text {
  color: yellow;
}

use@whileCycle:

$i: 1;
@while $i < 6 {
  .text-#{$i} { font-size: 10px * $i;}
   $i: $i + 1;
}

So first, we take a variable and set it to 1. Next, we use the @ while instruction to check the condition to create text of different sizes when $I is less than 6. Be sure to increase $I by 1 to avoid an infinite loop after setting CSS rules.
Compile as CSS:

.text-1 {
  font-size: 10px;
}

.text-2 {
  font-size: 20px;
}

.text-3 {
  font-size: 30px;
}

.text-4 {
  font-size: 40px;
}

.text-5 {
  font-size: 50px;
}

06. Use_ Partial splits the style into smaller blocks

Partial is a sass file that begins with an underscore, that is:_partial.scss Underline lets sass know that a specific file is part of a file and will not generate CSS files. The partial section is intended to be associated with@importInstructions. This is a good way to group similar code into a module.

For example, if all your text colors are saved in a file named _textColor.scssAnd you want them to be used in the main.scss module in the main sass file:

@import 'textColor'

Please note that you do not need toimportStatement to specify the underscore and file extension. Because sass understands that it is partial. After you import parts into a file, all text colors, blends, and other codes can be used.

07. Extend a set of CSS styles to another element

@extendIs a feature of SASS that allows classes to share a set of properties with each other.

For example, the following CSS rule block style. Card class. It has some properties, such as background color, width and height.

.card {
  background-color: #fff;
  width: 200px;
  height: 150px; 
}

Now we need another one called.popup-cardMy card. It has and basic functions.cardClass. However, we need to add additional properties to the pop-up card. Can from.cardCopy and paste to the target class. But there is a better way to use it@extendInstructions to do this.

.popup-card {
  @extend .card;
  border-radius: 5px;
  background-color: #349db;
}

That’s it.cardStyle copied to.popup-cardin

Sass crash course

Recommended Today

Seven solutions for distributed transactions

1、 What is distributed transaction Distributed transaction means that transaction participants, transaction supporting servers, resource servers and transaction managers are located on different nodes of different distributed systems. A large operation is completed by more than n small operations. These small operations are distributed on different services. For these operations, either all of them are […]