Burst the liver for three days, learn SCSS – read this article is enough

Time:2022-5-24

preface

Today is different from the past. We can only cut pictures by ourselves!

Burst the liver for three days, learn SCSS - read this article is enough

stayJavasScripWhen the frame was flying all over the sky, the front end was one of the three board axesCSSAlso gushed forward and backwardSassLessStylusEtcCSSPreprocessing framework.

Today we are going to talk about the big brotherSassUpgraded version ofScssScssIt provides us with a series of powerful functions such as variables, loops, inheritance, mixing and functions to facilitate our development.

I used to thinkScssSimple, later found that simple is really simple, my food is also real food

If the article helps you,Remember to press one button three times。 If you have questions and doubts, you can also leave a message in the comment area. I will reply to you as soon as possible. If you think there is something wrong in my article, please tell me that understanding the wrong things in pairs is fatal in any industry.

Daily blog records in YuQue, welcome to pay attentionLanguage bird document

SCSS and sass

SassSince the third generation, it has abandoned the indented style and is fully downward compatible with ordinaryCSSCode, this generationSassAlso known asScss

file

Single file compilation can be operated on the following website. See the next section for multi file compilation. There are many missing things in Chinese documents. If possible, you can browse English documents.

Sass version

SassThere are three versionsDart SasslibsassandRuby Sass

  1. Dart Sass, useDartWritten in EnglishsassAchieved, released on November 1, 2016alphaVersion, version1.23.0After that, the modularization mechanism is fully supported.
  2. libSassThat is commonly known asnode-sass, usec/c++RealizedsassVersion, widely used.node-sassIt’s boundlibsassofnodejsLibrary, can be very fast.scssFile compiled as.cssDocuments, the installation process… Understand everything, and the official doesn’t recommend it anymore.
  3. Ruby Sass, it’s originalSassHowever, it was stopped on March 26, 2019 and will not be supported in the future. Users need to migrate to other implementations.

Environment configuration

The installation tutorial of Chinese document isRuby Sass, personal recommendationnpminstallDart Sass, this is also the official recommended way.

Global installation

npmThe default installation isDart SassYes.

npm install -g sass

Project structure

code
    --css
        --index.scss
    --dist

Monitor operation

Use the command line operation to listen for the information under the folderscssFile and output ascssFile, if yeswebpackProject, you need to usesass-loader

sass --style=expanded  -w css:dist --no-source-map

Live Sass Compiler

If you useVSCodeofLive Sass CompilerPlug-in, you can refer to my configuration. This plug-in is usedSassVersion isLibSass3.5.4, some instructions are compatible and unsupported.

"liveSassCompile.settings":{
        "generateMap":false,
        "formats":[
            {
                "format": "expanded",
                "savePath": "~/css/",
            }
        ]
}

Burst the liver for three days, learn SCSS - read this article is enough

Output format

Hey, hey, the following text terms are unified and changed to lowercase.
scssFour output formats are provided for use on the command line--styleOptions, inLive Sass CompilerMedium configurationformatParameters.

Note:dart sassOnly supportexpandedandcompressed

sass --watch style.scss:style.css --style compressed

:nested

nestedyesscssThe default output format, selector and attribute, etc. occupy a single line, and the indent is the same asscssConsistent in the document,The indent of each row reflects the number of layers within the nesting rule

#main {
  color: #fff;
  background-color: #000; }
  #main p {
    width: 10em; }

.p {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline; }

:expanded

expandedThe output is like our usual handwritten style. The selector and attribute occupy one line respectively. The attribute is indented according to the selector, but the selector does not make any indentation.

#main {
  color: #fff;
  background-color: #000;
}
#main p {
  width: 10em;
}

.p {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline;
}

:compact

compactWill put eachcssThe rules are summarized into one line. Nested selectors have no blank lines when outputting, and non nested selectors will output blank lines as separators.

#main { color: #fff; background-color: #000; }
#main p { width: 10em; }

.p { font-size: 10em; font-weight: bold; text-decoration: underline; }

:compressed

compressedAll meaningless spaces, blank lines and comments will be deleted to minimize the file volume. At the same time, other adjustments will be made, such as automatically replacing the color expression with the smallest space.

#main{color:#fff;background-color:#000}#main p{width:10em}.p{font-size:10em;font-weight:bold;text-decoration:underline}

Syntax nesting rules

Selector nesting

cssIt is very annoying to repeatedly write selectors in. in especialhtmlWhen the structure is nested very deeply,scssNested selectors can avoid repeated input of parent selectors, which can effectively improve development efficiency and reduce the possible exception problems caused by style coverage. This is also our most commonly used function. Many people usescssJust use this function, and then think you can.

This is normalcssstructure

.container {
    width: 1200px;
    margin: 0 auto;
}
.container .header .img {
    width: 100px;
    height: 60px;
}

Compile intoscssThe child element is nested inside the parent element.

.container {
    width: 1200px;
    margin: 0 auto;
    .header {
        .img {
            width: 100px;
            height: 60px;
        }
    }
}

Attribute nesting

SomecssAttributes follow the same namespace (same beginning), such asfont-familyfont-sizefont-weightAll withfontNamespace as an attribute. In order to facilitate the management of such attributes and avoid repeated input. (this editor prompt is a little unsatisfactory… It’s not very easy to use.).

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

Compile intocss

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

Namespaces can also contain their own attribute values

.container {
  color: red {
    adjust: fantasy;
  }
}

Compile intocss

.container {
  color: red;
  color-adjust: fantasy;
}

Parent selector&

Nested incssRules sometimes require the use of nested outer parent selectors, for example, when settinghoverStyle, you can use&Represents the parent selector outside the nested rule,scssAt compile time&Replace with the parent selector name.

In the case&Represents the parentaselector

.container {
    a {
        color: #333;
        &:hover {
             text-decoration: underline;
             color: #f00;
        }
    }
}

Convert intoscss

.container a {
    color:#333;
}
.container a:hover {
    text-decoration:underline;
    color:#F00;
}

Another way of thinking, you can also use&Splice selector names.

.main {
    color: black;
    &-sidebar { border: 1px solid; }
}

Convert intocss

.main {
    color: black;
}
.main-sidebar {
    border: 1px solid;
}

Two notes of SCSS

multiline comment /* ... */

Multiline comments are compiled into.cssIn the document,compressedExcept in (compression) mode, the!As the first character of a multiline comment, it means that the comment is also retained in compressed output mode, which is usually used to add copyright information.

/*!
*I am
*Multiline
*Notes
*/
body { color: black; }

Compile intocss

/*!
*I am
*Multiline
*Notes 
*/body{color:#000}

Single-Line Comments //

Single line comments are not compiled to.cssfile

//I'm a single line note
body { color: black; }

Compile intocss

body {
  color: black;
}

variable

use

PrimordialcssVariables in, using--Variable name: variable valuedefinition,Var (- - variable name)For use.

:root {
    --color: #F00;
}
p {
    color: var(--color);
}

scssVariables in, dollar sign$At the beginning, the assignment method andcssAttributes are written the same way.

$color:#F00;
p {
    color: $color;
}

Conversion intocss

p {
    color: #F00;
}

5 variable rules

BelowmixinandfunctionNaming also follows1234Rule:

  1. Variables are signed in dollars$Start with variable name followed by variable name;
  2. Variable names do not start with numbers and can contain letters, numbers, underscores and horizontal lines (connectors);
  3. By connector-And underline_The defined variable with the same name is the same variable;
  4. Variables must be defined first and then used;
  5. Written in the same waycss, that is, a colon is used between the variable name and the value:separate;

2 variable scopes

  1. Variable scopes are divided intoGlobal variable fieldandLocal variable field

    • Global variables: variables declared in the outermost layer can be used anywhere;
    • Local variables: variables defined within nested rules can only be used within nested rules.
  2. Converting a local variable to a global variable adds!globalStatement.
$color: red;
.container {
    $height: 500px;
    $font-size: 16px !global;
    font-size: $font-size;
    color: $color;
    height: $height;
}
.footer {
    /**$font size use! Global is declared as a global variable*/
    font-size: $font-size; 
    /**
    * Error: Undefined variable. 
    *$height is The local variable under container cannot be in Compiled under footer
    */
    height:$height;
}

Compile intocss

.container {
    font-size: 16px;
    color: red;
    height: 500px;
}

.footer {
     /**$font size use! Global is declared as a global variable*/
    font-size: 16px;
}

7 main data types

scsssupport7There are three main data types:

  1. Numbers,1rem、2vh、13、 10px
  2. String, divided into quoted string and unquoted string,"foo"、 'bar'、baz
  3. Color,blue, #04a3f9, rgba(255,0,0,0.5)
  4. Boolean,trueandfalse
  5. Null value,nullIs a unique value of its type. Indicates the missing value, which is usually returned by the function to indicate the missing result;
  6. Array(list), use a space or comma as a separator,1.5em 1em 0 2em,Helvetica,Arial,sans-serif
  7. maps, equivalent to JavaScript ofobject(key1: value1, key2: value2)

In the official websiteFunctionAlso as a type,Click the original text to understand

$layer-index: 10;
$border-width: 3px;

$font-weight: bold;

$font-base-family: "Open Sans", Helvetica, Sans-Serif;
$block-base-padding: 6px 10px 6px 10px;

$top-bg-color: rgba(255, 147, 29, 0.6);

$blank-mode: true;

$var: null;

$fonts: (
  serif: "Helvetica Neue",
  monospace: "Consolas",
);

.container {
  font-family: $font-base-family;
  font-size: $font-size;
  padding: $block-base-padding;

  @if $blank-mode {
    background-color: #000;
  } @else {
    background-color: #fff;
  }

  content: type-of($var);
  content: length($var);
  color: $top-bg-color;
}

//If the list contains a null value, the null value will be ignored in the generated CSS.
.wrap {
  font: 18px $font-weight map-get($fonts, "sans");
}

Compile intocss

.container {
  font-family: "Open Sans", Helvetica, Sans-Serif;
  font-size: 16px;
  padding: 6px 10px 6px 10px;
  background-color: #000;
  content: null;
  content: 1;
  color: rgba(255, 147, 29, 0.6);
}

.wrap {
  font: 18px bold; //  If the list contains a null value, the null value will be ignored in the generated CSS.
}

scssProperty also supports other values, such asUnicodeCharacter set, or!importantStatement. howeverscssThese attribute values are not treated in a special way and are treated as unquoted strings.

$color:red;
.container {
    color:$color !important;
}

Compile intocss

.container {
  color: red !important;
}

!default

Can be added at the end of the variable!defaultTo set the default value for the variable, which is a little similarJavascriptLogical operators forlet content=content || "Second content"。 Note that the variable isnullWill be deemed not to have been!defaultAssignment.

$content: "First content";
//If $content is not defined before, use the following default values
$content: "Second content" !default;
#main {
    content: $content;
}

Compile intocss

#main {
  content: "First content";
}

Parentheses

Parentheses()It can be used to affect the order of operations, which is consistent with the effect in mathematics.

operator

Equality operation==Sum inequality operation!=。 All data types are supported==and!=In addition, each data type also has its own supported operation mode.

$theme:"blue";

.container {
    @if $theme=="blue" {
        background-color: red;
    }
    @else {
        background-color: blue;
    }
}

.container {
    @if $theme !="blue" {
        background-color: red;
    }
    @else {
        background-color: blue;
    }
}

Compile ascss

.container {
  background-color: red;
}

.container {
  background-color: blue;
}

Relational operator

Four relational operators< > >= <=

$theme:3;
.container {
    @if $theme >= 5 {
        background-color: red;
    }
    @else {
        background-color: blue;
    }
}

Compile ascss

.container {
    background-color: blue;
}

Boolean operator

Three Boolean operatorsand or not

$width: 100;
$height: 200;
$last: false;
div {
  @if $width>50 and $height<300 {
    font-size: 16px;
  } @else {
    font-size: 14px;
  }
  @if not $last {
    border-color: red;
  } @else {
    border-color: blue;
  }

  @if $width>500 or $height<300{
    line-height: 20px;
  } @else {
    line-height: 50px;
  }
}

Compile ascss

div {
    font-size: 16px;
    border-color: red;
    line-height: 20px;
}div {
    font-size: 16px;
    border-color: red;
}

Numeric operator

+ - * / %

/*The unit or percentage will be automatically converted to the corresponding unit or percentage*/
.container {
    /*=========================== + operation ========================*/
    width: 50 + 20;
    width: 50 + 20%;
    width: 50% + 20%;
    width: 10pt + 20px;
    width: 10pt + 20;

    /*================================================== operation*/
    height: 50 - 20;
    height: 10 - 20%;
    height: 50pt - 20px;

    /*Operation =================================================*/
    height: 50 * 30;
    height: 10 * 30%;
    height: 50 * 2px;
    height: 50pt * 4;

    /*===============================================================*/
    $width: 100px;
    width: 10/5;
    width: 10px / 5px;
    width: 10px / 20;
    width: ($width/2); //  Use variables and parentheses
    height: (500px/2); //  Parentheses are used

    /*========================% remainder operation ===============================*/
    width: 10 % 3;
    width: 50px % 7;
    width: 50% % 7;
}

Compile intocss

/*The unit or percentage will be automatically converted to the corresponding unit or percentage*/
.container {
    /*=========================== + operation ========================*/
    width: 70;
    width: 70%;
    width: 70%;
    width: 25pt;
    width: 30pt;
    /*================================================== operation*/
    height: 30;
    height: -10%;
    height: 35pt;
    /*Operation =================================================*/
    height: 1500;
    height: 300%;
    height: 100px;
    height: 200pt;
    /*===============================================================*/
    width: 10/5;
    width: 10px/5px;
    width: 10px/20;
    width: 50px;
    height: 250px;
    /*========================% operation =================================*/
    width: 1;
    width: 1px;
    width: 1%;
}

/staycssIt is used to separate numbers inscssIn, division is performed in the following three cases:

  1. If the value or part of the value is the return value of the variable or function;
  2. If the value is wrapped in parentheses;
  3. If the value is part of an arithmetic expression.
$width: 1000px;
div {
    font: 16px/30px Arial, Helvetica, sans-serif; //  No operation
    width: ($width/2); //  Use variables and parentheses
    width: (#{$width}/2); //  Use #{} interpolation statements to wrap variables to avoid operations.
    z-index: round(10)/2; //  Function used
    height: (500px/2); //  Parentheses are used
    margin-left: 5px + 8px/2px; //  The + expression is used
}

Compile intocss

div {
    font: 16px/30px Arial, Helvetica, sans-serif;
    width: 500px;
    width: 1000px/2;
    z-index: 5;
    height: 250px;
    margin-left: 9px;
}

If you need to use variables, make sure/Do not do division, but compile it completely tocssIn the file, you only need to use#{}The interpolation statement wraps the variable.

String operation

  1. +Can be used to connect strings;
  2. If a quoted string (to the left of + is connected with a non quoted string, the operation result is quoted;
  3. The unquoted string (to the left of +) is connected with a quoted string, and the operation result has no quotation marks.
.container {
    content: "Foo " + Bar;
    font-family: sans- + "serif";
}

Compile ascss

.container {
    content: "Foo Bar";
    font-family: sans-serif;
}

Interpolation statement

The interpolation statement is mentioned in the article. Let’s explain it here\
adopt#{}Interpolation statements can use variables in selectors, attribute names and comments#{}The interpolation statement can wrap the variables, andjsThe template string in is very similar.

$font-size: 12px;
$line-height: 30px;
$class-name: danger;
$attr: color;
$Author: "great fortune";

p {
    font: #{$font-size}/#{$line-height} Arial Helvetica, sans-serif;
}

/* 
*This is the explanatory part of the document
* @author: #{$author}
*/

a.#{$class-name} {
    border-#{$attr}: #f00;
}

Compile intocss

p {
    font: 12px/30px Arial Helvetica, sans-serif;
}

/* 
*This is the explanatory part of the document
*@ Author: great fortune
*/
a.danger {
    border-color: #f00;
}

Process control

sassThere are four types of process control in ourjsCommon in@if、@for、@each、@while

@if

@ifGrammar andjsSimilarly, the basic format is@[email protected] [email protected]

use

$theme:3;
.container {
    @if $theme >= 5 {
        background-color: red;
    }
    @else {
        background-color: blue;
    }
}

Compile ascss

.container {
    background-color: blue;
}

case

There is already a use heremixinandifEncapsulate a triangle generation,mixinKnowledge is discussed later.

Burst the liver for three days, learn SCSS - read this article is enough

@mixin triangle($direction:top, $size:30px, $border-color:black) {
  width: 0px;
  height: 0px;
  display: inline-block;
  border-width: $size;
  border-#{$direction}-width: 0;
  @if ($direction==top) {
     border-color: transparent transparent $border-color transparent;
     border-style: dashed dashed solid dashed;
  }
  @else if($direction==right) {
     border-color: transparent transparent transparent $border-color;
     border-style: dashed dashed dashed solid;
  }
  @else if($direction==bottom) {
     border-color: $border-color transparent transparent transparent;
     border-style: solid dashed dashed dashed;
  }
  @else if($direction==left) {
     border-color: transparent $border-color transparent transparent;
     border-style: dashed solid dashed dashed;
  }
}
.p0 {
     @include triangle($size:50px);
}

.p1 {
     @include triangle(right, 50px, red);
}

.p2 {
    @include triangle(bottom, 50px, blue);
}

.p3 {
     @include triangle(left, 50px, green);
}

Compile as

.p0 {
    width: 0px;
    height: 0px;
    display: inline-block;
    border-width: 50px;
    border-top-width: 0;
    border-color: transparent transparent black transparent;
    border-style: dashed dashed solid dashed;
}

.p1 {
    width: 0px;
    height: 0px;
    display: inline-block;
    border-width: 50px;
    border-right-width: 0;
    border-color: transparent transparent transparent red;
    border-style: dashed dashed dashed solid;
}

.p2 {
    width: 0px;
    height: 0px;
    display: inline-block;
    border-width: 50px;
    border-bottom-width: 0;
    border-color: blue transparent transparent transparent;
    border-style: solid dashed dashed dashed;
}

.p3 {
    width: 0px;
    height: 0px;
    display: inline-block;
    border-width: 50px;
    border-left-width: 0;
    border-color: transparent green transparent transparent;
    border-style: dashed solid dashed dashed;
}

@for

forRepeat the operation within the condition range. This instruction contains two formats:

  1. @for $var from <start> through <end>
  2. @for $var from <start> to <end>

The difference between the two isthroughAnd to Meaning of:

  1. usethroughWhen, the condition range includes<start>And<end>Value of;
  2. usetoThe condition range only contains<start>The value of does not contain<end>Value of;
  3. $varIt can be any variable, such as$i<start>and<end>Must be an integer value.
@for $i from 1 to 3 {
  #loading span:nth-child(#{$i}) {
      width: 20 * ($i - 1) + px;
  }
}

Compile as

#loading span:nth-child(1) {
    width: 0px;
}

#loading span:nth-child(2) {
    width: 20px;
}

If puttochange intothrough

#loading span:nth-child(1) {
    width: 0px;
}

#loading span:nth-child(2) {
    width: 20px;
}

#loading span:nth-child(3) {
    width: 40px;
}

@each

@eachThe format of the instruction is@each $var in $list , $varCan be any variable name, such as$lengthperhaps$name, and$listIs a series of values, that is, a list of values.

$color-list:red green blue turquoise darkmagenta;
@each $color in $color-list {
    $index: index($color-list, $color);
    .p#{$index - 1} {
        background-color: $color;
    }
}

Compile as

.p0 {
    background-color: red;
}

.p1 {
    background-color: green;
}

.p2 {
    background-color: blue;
}

.p3 {
    background-color: turquoise;
}

.p4 {
    background-color: darkmagenta;
}

@while

@whileThe instruction loops through the output until the expression returnsfalse。 In this way, the ratio can be achieved@forMore complex loops.

For example, you can use this to generate a grid layout.

$column:12;
@while $column>0 {
   .col-sm-#{$column} {
      width: $column / 12 * 100%;
   }
    $column:$column - 1;
}

Compile as

.col-sm-12 {
    width: 100%;
}

.col-sm-11 {
    width: 91.6666666667%;
}

.col-sm-10 {
    width: 83.3333333333%;
}

.col-sm-9 {
    width: 75%;
}

.col-sm-8 {
    width: 66.6666666667%;
}

.col-sm-7 {
    width: 58.3333333333%;
}

.col-sm-6 {
    width: 50%;
}

.col-sm-5 {
    width: 41.6666666667%;
}

.col-sm-4 {
    width: 33.3333333333%;
}

.col-sm-3 {
    width: 25%;
}

.col-sm-2 {
    width: 16.6666666667%;
}

.col-sm-1 {
    width: 8.3333333333%;
}

@import

@importIt is a relatively simple module system.scssExpanded@importTo allow it to be importedscssorsassDocuments. The imported files will be merged and compiled into the same filecssFile, the variable or mixed instruction contained in the imported file(mixin)Can be used in the imported file.

use

common.scss

$color:red;

index.scss

@import "common.scss";
.container {
    border-color: $color;
}

Compile into

.container {
  border-color: red;
}

In the following cases,@importFor ordinary use onlycssStatement will not be importedscssFile:

  1. The file extension is .css
  2. File name in http:// start;
  3. The file name is url()
  4. @importContains media queries.
@import "common.css";
@import url(common);
@import "http://xxx.com/xxx";
@import 'landscape' screen and (orientation:landscape);

scssAllows you to import multiple files at the same time, for example, at the same timerounded-cornersAnd text-shadow There is no need to write two files separatelyimportintroduce.

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

Import files can also be used#{}Interpolation statement (described below, which is understood here asjsDynamic import of template string in, but not through variablesscssFile, can only be used oncssof url() Import mode

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

Compile as

@import url("https://fonts.googleapis.com/css?family=Droid+Sans");

@Partials

If you need to importscssperhapssassFile, but you don’t want to compile it intocss, just underline the file name, which will tell youscssDo not compile these files.
be careful:

  1. Underline is not required in the imported statement;
  2. Files with the same name that are underlined and not underlined cannot exist at the same time. Underlined files will be ignored.

_common.scss

$color:red;

index.scss

@import "common.scss";
.container {
    border-color: $color;
}

Compile as

.container {
  border-color: red;
}

_common.scssFiles will not be compiled into _common.css Documents.

Burst the liver for three days, learn SCSS - read this article is enough

PartialsIt is mainly used to define public styles and is specially used by othersscssfileimportFor use.

Nested @ import

In most cases, it is generally used at the outermost layer of the file (not within the nesting rules)@importIn fact, you can also@importNested into inner selectors or@mediaIn, the effect is the same as that in normal use, except that the imported style can only appear in the nested layer and has scope.

common.scss

.example {
    color: red;
}

index.scss

#main {
    @import "example";
}

Compiled into

#main .example {
    color: red;
}

be careful:@importCannot be nested in control instructions or mixed (with@Symbols are called instructions.

@Media query enhancement

scssIn,@mediaInstruction andcssThe usage is the same as in, except that a little extra function is added to allowcssNested in rules. If@mediaNested incssWithin the rule, at compile time,@mediaWill be compiled to the outermost layer of the file, containing nested parent selectors. This let@mediaIt’s convenient. You don’t need to write the selector repeatedly and won’t disturb itcssWriting process.

use

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

Compile as

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

nesting

@mediaIt is allowed to nest with each other. When compiling,scssAutomatically add and

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

Compile as

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

Use interpolation

You can use variables, functions, and operators instead of the name or value of the condition.

$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;

@media #{$media} and ($feature: $value) {
  .sidebar {
    width: 500px;
  }
}

Compile as

@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  .sidebar {
    width: 500px;
  }
}

@mixin

Mixed instruction(Mixin)Used to define reusable styles. Mixed instructions can contain allcssRules, mostscssRules, and even variables can be introduced through the parameter function to output diversified styles.

Note: the naming rules of functions and variables are consistent.

use

@mixin mixin-name() {
    /*CSS declaration*/
}
//Use
@include mixin-name;

Standard form

//Define the basic style of a block
@mixin block {
    width: 96%;
    margin-left: 2%;
    border-radius: 8px;
    border: 1px #f6f6f6 solid;
}
//Use blending 
.container {
    .block {
        @include block;
    }
}

Compile as

.container .block {
    width: 96%;
    margin-left: 2%;
    border-radius: 8px;
    border: 1px #f6f6f6 solid;
}

Embedded selector

@mixinThere is another layer nested inside

@mixin warning-text {
    font-size: 12px;
    .warn-text {
        color: rgb(255, 253, 123);
        line-height: 180%;
    }
}

.container {
       @include warning-text;
}

Compile as

.container {
    font-size: 12px;
}

.container .warn-text {
    color: #fffd7b;
    line-height: 180%;
}

Single parameter

//Defines how the vertical axes of flex layout elements are arranged
@mixin flex-align($aitem) {
    align-items: $aitem;
}

//There is only one parameter. Pass the parameter directly
.container {
    @include flex-align(center);
}

Compile as

.container {
    align-items: center;
}

Multi parameter

//Defines the inner margin of a block element
@mixin block-padding($top, $right, $bottom, $left) {
    padding-top: $top;
    padding-right: $right;
    padding-bottom: $bottom;
    padding-left: $left;
}

//Assign values in order of parameters
.container1 {
   @include block-padding(10px, 20px, 30px, 40px);
}

//Parameter assignment can be specified
.container2 {
   @include block-padding($left: 20px, $top: 10px, $bottom: 10px, $right: 30px);
}

//Parameter assignment can be specified,但是必须指定4个值,不能缺失
.container3 {
   @include block-padding($left: 10px, $top: 10px, $bottom: 0, $right: 0);
}

Compile as

.container1 {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 30px;
    padding-left: 40px;
}

.container2 {
    padding-top: 10px;
    padding-right: 30px;
    padding-bottom: 10px;
    padding-left: 20px;
}

.container3 {
    padding-top: 10px;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 10px;
}

Specify default values

//Defines the inner margin of the block element, and the parameter specifies the default value
@mixin block-padding($top:0, $right:0, $bottom:0, $left:0) {
    padding-top: $top;
    padding-right: $right;
    padding-bottom: $bottom;
    padding-left: $left;
}

//Parameter assignment can be specified
.container {
    /**Without parameters*/
    @include block-padding;
    /**Specify parameter values in order*/
    @include block-padding(10px,20px);
    /**Specify a value for the specified parameter*/
    @include block-padding($left: 10px, $top: 20px)
}

Compile as

.container {
    /**Without parameters*/
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    /**Specify parameter values in order*/
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 0;
    padding-left: 0;
    /**Specify a value for the specified parameter*/
    padding-top: 20px;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 10px;
}

Variable parameter

use...When the processing parameters are not fixed, it is similar tojsRemaining parameters of the function in

@mixin linear-gradient($direction, $gradients...) {
    background-color: nth($gradients, 1);
    background-image: linear-gradient($direction, $gradients);
}

.table-data {
    @include linear-gradient(to right, #F00, orange, yellow);
}

Compile as

.table-data {
    background-color: #F00;
    background-image: linear-gradient(to right, #F00, orange, yellow);
}

summary

  1. mixinIs a group that can be reusedcssDeclaration, which helps to reduce duplicate code. It can be referenced in the file only once;
  2. Mixed instructions can contain allcssRules, mostscssRules, which can pass parameters and output diversified styles;
  3. It is recommended to add default values when using parameters;
  4. @importImport local modular style (similar function, same component);
  5. @minixDefines reusable styles

@function

@functionIt is used to encapsulate complex operations. It can easily abstract general formulas and behaviors in a readable way. Functions provide return values, which are often used for calculation.

use

Note: the naming rules of functions and variables are consistent.

@function square($base) {
    @return $base * $base * 1px;
}

.sidebar {
    float: left;
    margin-left: square(4);
}

Compile as

.sidebar {
    float: left;
    margin-left: 16px;
}

Optional parameters

The default value can be any expression, and they can even refer to the previous parameters!

//Change color and hue are built-in methods
//Hue returns a number whose color of $color is between 0 and 360 degrees.
//Change color sets the properties of the color
@function invert($color, $amount: 100%) {
    //@error hue($color);  Commissioning 210deg
    $inverse: change-color($color, $hue: hue($color) + 180);
    @return mix($inverse, $color, $amount);
}

$primary-color: #036;
.header {
    background-color: invert($primary-color, 80%);
}

Compile as

.header {
    background-color: #523314;
}

Specify parameters

$primary-color: #036;
.banner {
    //scale-color Fluidly scales one or more properties of .$color
    background-color: $primary-color;
    color: scale-color($primary-color, $lightness: +40%);
}

Compile as

.banner {
    background-color: #036;
    color: #0a85ff;
}

Variable parameter

The parameter list can also be used to take any keyword parameter,meta.keywords()Function takes parameter list

@function sum($numbers...) {
    $sum: 0;
    @each $number in $numbers {
        $sum: $sum + $number;
    }
    @return $sum;
}

$widths: 50px, 30px, 100px;
.micro {
    width: sum($widths...);
}

Compile as

.micro {
    width: 180px;
}

@return

@returnOnly allowed in@functionInternal use, andjsSame, meetreturnWill return.

@function red() {
    $is: true;
    @if $is {
        @return 'is';
    }
    @return red;
}
.con{
    color: red();
}

Compile as

.con {
    color: "is";
}

Summary:
@functionand@mixinThere is no difference in the use of parameters;
@functionFor calculation,@mixinUsed to encapsulate the style,@importUsed to extract them as a module.

@Extend inheritance

use

We takeelementUIofel-buttonComponent as an example, you can use@extendInherit existing styles by using comma selectors.

//Same as # ID selector
.button {
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
    user-select: none;
}

.btn-default {
    @extend .button;
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

.btn-danger {
    @extend .button;
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;
}

Compile into

.button, .btn-danger, .btn-default {
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
    user-select: none;
}

.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

.btn-danger {
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;
}

Multiple @ extend can be used

.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 12px;
}

.important {
    font-weight: bold;
    font-size: 14px;
}
.alert-danger {
    @extend .alert;
    @extend .important;
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

Compile as

.alert, .alert-danger {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 12px;
}

.important, .alert-danger {
    font-weight: bold;
    font-size: 14px;
}

.alert-danger {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

Multilayer inheritance

@extendMulti level inheritance is allowed, such as:.alert-dangerInherited from.important.importantInherited from.alert

.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 12px;
}

.important {
    @extend .alert;
    font-weight: bold;
    font-size: 14px;
}
.alert-danger {
    @extend .important;
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

Compile as

.alert, .important, .alert-danger {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 12px;
}

.important, .alert-danger {
    font-weight: bold;
    font-size: 14px;
}

.alert-danger {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

Placeholder selector

Placeholder selector%, and commonidAndclassSelectors are written similarly, except that#or.Replaced with%, placeholder selector must pass@extendInstruction call\
As in the above example, the placeholder selector operation is used here

.button %base {
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
    user-select: none;
}
        
.btn-default {
    @extend %base;
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

.btn-danger {
    @extend %base;
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;
}

The effect is the same as the class selector above, but it has an advantage, placeholder selector%When the style is not used, it will not be compiled intocssIn the file, it is a small optimization.

.button .btn-danger, .button .btn-default {
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
    user-select: none;
}

.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

.btn-danger {
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;
}

@use

Compatibility issues exist, only inDart Sass 1.23.0The above is valid,The official document has compatibility introduction

scssModularity in the real sense can be realized from other aspectsscssLoad in style sheetmixinfunctionandvariableFrom multiple style sheetscssPut it together.scssThere are also many built-in modules that we can use@useuse.

@Import disadvantages

  1. There are many duplicate import styles.
  2. Because there is no namespace, in order to avoid name collision, I dare not use abbreviationsclassnameTherefore, naming always needs attention.
  3. There is no concept of private functions, and the style is completely exposed to useimportWhere, this pairuiThe library is not friendly enough.

use

src/_corners.scss

$radius: 3px;
@mixin rounded {
    border-radius: $radius;
}

index.scss

@use "src/corners";
.button {
    @include corners.rounded;
    padding: 5px + corners.$radius;
}

Namespace

src/_corners.scss

$radius: 3px;
@mixin rounded {
    border-radius: $radius;
}

index.scss

@use "src/corners" as c;
.button {
    @include c.rounded;
    padding: 5px + c.$radius;
}

Compile as

.button {
    border-radius: 3px;
    padding: 8px;
}

as*

useas*, then this module is in the global namespace.

src/_corners.scss

$radius: 3px;
@mixin rounded {
    border-radius: $radius;
}

index.scss

@use "src/corners" as *;

.button {
    @include rounded;
    padding: 5px + $radius;
}

Compile as

.button {
    border-radius: 3px;
    padding: 8px;
}

Private module

usescssYou can easily define private members named after-Or start.

src/_corners.scss

$-radius: 3px;

@mixin rounded {
    border-radius: $-radius;
}

index.scss

@use "src/corners";

.button {
    @include corners.rounded;
    // Error: Private members can't be accessed from outside their modules
    padding: 5px + corners.$-radius;
}

@forward

@forwardStatement can introduce all variables of another modulemixinsAnd functions, which are directly used as the functions of the current moduleAPIIf it is exposed, it will not really add code to the current module. differ@use@forwardCannot add a namespace to a variable.

usage

Note that the generatedbootstrap.cssThe file does not containfunctionsvariablesmixinsThe code can not be directly inbootstrap.scssThese modules are used in the file. It needs to be in another file@import 'bootstrap'perhaps@use bootstrapModule, and then use these methods.bootstrap.scssThe file is similar to a transfer station, which seamlessly connects the upstream and downstream member variables.

/* bootstrap.scss */
@forward"functions";
@forward"variables";
@forward"mixins";

Note that the normal style written directly in the upstream module will still be changed @forward Come in. See the following example:

a.scss

@mixin rounded {
    border-radius: 100px;
}
footer {
    height: 1px;
}

b.scss

$radius: 3px;

c.scss

@forward "a";
@forward "b";

index.scss

@import "c.scss";

.button {
    @include rounded;
    padding: $radius;
}

Compile as

footer {
    height: 1px;
}

.button {
    border-radius: 100px;
    padding: 3px;
}

show/ hide

Through controlshowandhide, you can decide which members in the module are visible to the imported template. Hidden variables cannot be used in downstream files, which is equivalent to private members of the module.

c.scss

@forward "a" show rounded;
@forward "b" hide $radius;

index.css

@import "c.scss";

.button {
    @include rounded;
    padding: $radius;
}
// Error: Undefined variable. padding: $radius;

Prefix submodules with the as * sign

In most cases, a style library will have an entry fileindex.scss, and thenindex.scssIntroduce other sub files in. This structure is similar to a multi in one module. So, if you want to be in a file@forwardMultiple sub modules can be usedas <prefix>-*Statement to automatically prefix the members under the sub module to distinguish.

c.scss

@forward "a" as mixin-*;
@forward "b" as var-*;

index.css

@import "c.scss";

.button {
    @include mixin-rounded;
    padding: $var-radius;
}

Many built-in methods are used in this way, hey hey!

@at-root

@at-rootUsed to jump out of nesting. It is commonly used in multi-level nesting, includingwithoutandwith

usage

//Didn't jump out
.parent-1 {
    color:#f00;
    .child {
        width:100px;
    }
}

//Single selector jump out
.parent-2 {
    color:#f00;
    @at-root .child {
        width:200px;
    }
}

//Multiple selectors jump out
.parent-3 {
    background:#f00;
    @at-root {
        .child1 {
            width:300px;
        }
        .child2 {
            width:400px;
        }
    }
}

Compile as

.parent-1 {
    color: #f00;
}
.parent-1 .child {
    width: 100px;
}

.parent-2 {
    color: #f00;
}
.child {
    width: 200px;
}

.parent-3 {
    background: #f00;
}
.child1 {
    width: 300px;
}

.child2 {
    width: 400px;
}

@Without and with

default@at-rootIt will only jump out of the selector nest, not out@mediaor@support, if you want to jump out of these two, you need to use@at-root (without: media)or@at-root (without: support)@at-rootThere are four key words:

  1. all Means all;
  2. rule Indicates generalcssSelector;
  3. mediaexpressmedia
  4. supportexpresssupport@supportIt is mainly used to detect whether the browser supportscssA property of the.

Our default@at-rootyes@at-root (without:rule)

/*Jump out of parent element nesting*/
@media print {
    .parent1{
        color:#f00;
        @at-root .child1 {
            width:200px;
        }
    }
}

/*Jump out of media nesting, parent is valid*/
@media print {
    .parent2{
        color:#f00;
        @at-root (without: media) {
            .child2 {
                width:200px;
            }
        }
    }
}

/*Jump out of media and parent*/
@media print {
    .parent3{
        color:#f00;
        @at-root (without: all) {
            .child3 {
                width:200px;
            }
        }
    }
}

Compile into

/*Jump out of parent element nesting*/
@media print {
    .parent1 {
        color: #f00;
    }
    .child1 {
        width: 200px;
    }
}
/*Jump out of media nesting, parent is valid*/
@media print {
    .parent2 {
        color: #f00;
    }
}
.parent2 .child2 {
    width: 200px;
}
/*Jump out of media and parent*/
@media print {
    .parent3 {
        color: #f00;
    }
}
.child3 {
    width: 200px;
}

@At root works with &

.child{
    @at-root .parent &{
        color:#f00;
    }
}

Compile into

.parent .child {
    color: #f00;
}

Apply to @ keyframe

.demo {
    animation: motion 3s infinite;
    @at-root {
        @keyframes motion {
        }
    }
}

Compile into

.demo {
    animation: motion 3s infinite;
}
@keyframes motion {}

SCSS built in extension

scssBuilt in extensions are divided intocolor list map math meta selector stringWait, expand, that isscssSome built-infunction, there are many contents under each module. Here are some common examples.

Built in functions can be used@useModularization is introduced, and you can also directly call with the global function name provided by it. The following two methods are the same.

@use 'sass:list';
p {
    color: nth($list: red blue green, $n: 2); // blue
    color: list.nth($list: red blue green, $n: 2); // blue
}

color

scssContains many functions that manipulate colors. for examplelighten()Anddarken()Can be used to brighten or darken colors,opacify()Reduce color transparency,transparent()Increase color transparency,mix()Used to mix two colors.

.p1 {
    //Brighten the color
    color:scale-color(#5c7a29, $lightness: +30%);
}

.p2 {
    //Darken the color
    color:scale-color(#5c7a29, $lightness: -15%);
}

.p3 {
    //Reduce color transparency
    color:scale-color(#5c7a29, $alpha: -40%);
}

Compile as

.p1 {
    color: #95c249;
}

.p2 {
    color: #4e6823;
}

.p3 {
    color: rgba(92, 122, 41, 0.6);
}

String

scssThere are many functions that handle strings, such as adding quotation marks to stringsquote(), get the length of the stringstring-length()And insert the content into the given position of the stringstring-insert()

p {
    &:after {
        Content: Quote (this is the content inside);
    }
    background-color: unquote($string: "#F00");
    Z-index: STR length ("SCSS learning");
}

Compile as

p {
    background-color: #F00;
    z-index: 6;
}
p:after {
    Content: "this is the content inside";
}

Math

Numerical functions handle numerical calculations, such as:percentage()Convert cell free values to percentages,round()Round the number to the nearest whole number,min()andmax()Get the minimum or maximum of several numbers,random()Returns a random number.

p {
    z-index: abs(-15); // 15
    z-index: ceil(5.8); //6
    z-index: max(5, 1, 6, 8, 3); //8
    opacity: random(); //  Random 0-1
}

Compile as

p {
    z-index: 15;
    z-index: 6;
    z-index: max(5, 1, 6, 8, 3);
    opacity: 0.8636254167;
}

List

ListFunction operationListlength()Return the length of the list,nth()Returns a specific item in the list,join()Connect the two lists together, append()Add a value at the end of the list.

p {
    z-index: length(12px); //1
    z-index: length(12px 5px 8px); //3
    z-index: index(a b c d, c); //3
    padding: append(10px 20px, 30px); // 10px 20px 30px
    color: nth($list: red blue green, $n: 2); // blue
}

Compile as

p {
    z-index: 1;
    z-index: 3;
    z-index: 3;
    padding: 10px 20px 30px;
    color: blue;
}

Map

MapFunction operationMapmap-get()Get according to key valuemapCorresponding value in,map-merge()Let’s take twomapMerge into a newmapmap-values()All values in the map.

$font-sizes: ("small": 12px, "normal": 18px, "large": 24px);
$padding:(top:10px, right:20px, bottom:10px, left:30px);
p {
    font-size: map-get($font-sizes, "normal"); //18px
    @if map-has-key($padding, "right") {
        padding-right: map-get($padding, "right");
    }
    &:after {
        content: map-keys($font-sizes) + " "+ map-values($padding) + "";
    }
}

Compile as

p {
    font-size: 18px;
    padding-right: 20px;
}
p:after {
    content: '"small", "normal", "large" 10px, 20px, 10px, 30px';
}

selector

The selector correlation function can selectcssCarry out some corresponding operations, such as:selector-append()You can attach one selector to another,selector-unify()Combine two sets of selectors into a composite selector.

@use 'sass:selector';

@debug selector.is-superselector("a", "a"); // true

//You can directly use the prefix under @ forward
@debug selector-append("a", ".disabled"); // a.disabled
@debug selector-extend("a.disabled", "a", ".link"); // a.disabled, .link.disabled

.header {
    content: selector-append(".a", ".b", ".c") + '';
    content: selector-unify("a", ".disabled") + '';
}

Compile as

.header {
    content: ".a.b.c";
    content: "a.disabled";
}

meta

metaProvide amixinAnd some atomic levelfunctionFor example, usemeta.calc-argsGet the parameters of the method,meta.calc-nameGets the method name.

meta.load-css

meta.load-css($url,$with:())ShouldmixinCan put$urlincssAll styles are included. be careful,$urlIntroduced functions, variables andmixinstaymeta.load-css()LaterscssIt can’t be used in. It will only return the compiled datacsscode. Its second parameter can be modified!defaultVariable.

src/corners

$border-contrast: false !default;

code {
    background-color: #6b717f;
    color: #d2e1dd;
    @if $border-contrast {
        border-color: #dadbdf;
    }
}

index.scss

@use "sass:meta";

body.dark {
    @include meta.load-css("src/corners", $with: ("border-contrast": true));
}

Compile as

body.dark code {
    background-color: #6b717f;
    color: #d2e1dd;
    border-color: #dadbdf;
}

function

@use "sass:meta";

@debug meta.calc-args(calc(100px + 10%)); // unquote("100px + 10%")
@debug meta.calc-args(clamp(50px, var(--width), 1000px)); // 50px, unquote("var(--width)"), 1000px

@debug meta.calc-name(calc(100px + 10%)); // "calc"
@debug meta.calc-name(clamp(50px, var(--width), 1000px)); // "clamp"

Commissioning related

@debug

@debugPrint the value of the expression to facilitate debugging.

$font-sizes: 10px + 20px;
    $style: (
        color: #bdc3c7
    );
.container {
    @debug $style;
    @debug $font-sizes;
}

Burst the liver for three days, learn SCSS - read this article is enough

@error

@errorShow fatal errors

$colors: (
    blue: #c0392b,
    black: #2980b9
);

@function style-variation($style) {
    @error "Invalid color: '#{$style}'.";
    @if map-has-key($colors, $style) {
        @return map-get($colors, $style);
    }
}

.container {
    color: style-variation(white);
}

Burst the liver for three days, learn SCSS - read this article is enough

@warn

@warnDisplays warning suggestions and stack information.

$colors: (
    blue: #c0392b,
    black: #2980b9
  );

@function style-variation($style) {
    @warn "Invalid color: '#{$style}'.";
    @if map-has-key($colors, $style) {
        @return map-get($colors, $style);
    }
}

.container {
    color: style-variation(white);
}

Burst the liver for three days, learn SCSS - read this article is enough

Self checking function

Bit related functions, which are built-in extensionsmetaThe next method,feature-exists()Check currentscssWhether there is a feature in the version,variable-exists()Check whether a variable exists in the current scope,mixin-exists()Check amixinWhether it exists. Self checking function is usually used in code debugging and returns a Boolean value.

$color:#F00;
@mixin padding($left:0, $top:0, $right:0, $bottom:0) {
    padding: $top $right $bottom $left;
}

.container {
    @if variable-exists(color) {
        color: $color;
    }
    @else {
        Content: "$color does not exist";
    }
    @if mixin-exists(padding) {
        @include padding($left: 10px, $right: 10px);
    }
}

Compile as

.container {
    color: #F00;
    padding: 0 10px 0 10px;
}

epilogue

It’s been hard for me to read it for so long, but I’ve written it for a long time. The boss might as well praise it before leaving.
You can also see my other articles, hey hey

🎉🎉On New Year’s day in 2022, I finally understood the prototype and prototype
🎉🎉13 implicit type conversion interview questions to make you cool to the end at one time
🎉🎉⌈ 2022 ⌋ JavaScript super detailed loop summary
🎉🎉The front end of cloud flash payment applet does not fully step on the pit to point to the north
🎉🎉Skillfully use node JS process hides important project parameters

Recommended Today

2021-11-09 volcano map based on RNA SEQ table (second time)

setwd(“C:\\Users\\Administrator.DESKTOP-4UQ3Q0K\\Desktop”) library(“readxl”) data <- read_excel(“RNA-seq.xlsx”) library(dplyr) library(ggplot2) library(ggrepel) data #Convert to tibble for subsequent use and remove unnecessary columns; Data < – Data [C (- 10, – 11, – 14, – 15, – 16, – 19, – 20, – 21, – 22)] # don’t try #data <- as_tibble(data[c(-10,-11,-14,-15,-16,-19,-20,-21,-22)]) data$padj<-as.numeric(as.matrix(data$padj)) #Take logarithm of Q value; data$log10FDR […]