🐷 This is a long overdue and intermittent use of SCSS /less

1. Install plug-ins

npm install node-sass sass-loader --save-dev  //sass

npm install less less-loader --save-dev      //less
Copy the code

2. Modify the configuration

SCSS 👉 does not need to be configured to use sass-loader in webpack.config.js because vue-loader resolves automatically

Less 👉 Modify the webpack.config.js file

module.exports = {
    // Omit countless lines here, other content that already exists
    module: {
        rules: [
          // Omit countless lines here, existing other rules
          {
            test: /\.less$/.loader: "style-loader! css-loader! less-loader"}}}]Copy the code

You can skip the above steps 🍜 if you have already configured them when creating the project

SCSS part usage

Use the syntax

<style lang='scss'Scoped ><style> //"./common.scss"; / / method 2Copy the code


Basic syntax SCSS

  • 🍒 variable $
$mainRed:#f73c3c;

.component {
  color : $mainRed;
}
Copy the code
  • 🍒 nested
Selector nesting/*===== SCSS =====*/
div{
    p{}}/*===== CSS =====*/
div{}div p{} & references the parent element. Such asa: hover pseudo classa {
      &:hover { color: #ffb3ff; }} attributes are nested/*===== SCSS =====*/
.oneBox {
  font: {  //font
   size: 14px; weight: bold; }}/*===== CSS =====*/
.oneBox {
     font-size: 14px;
     font-weight: bold;
}
Copy the code

🦐 mentioned above & references the parent element. &:before or &::before 👉(:befor and ::before are equivalent)

🦐 &:before and &::before:

  • :befor is CSS2, ::before is CSS3

  • :before is more compatible than ::before, although ::before is recommended for H5 development

👉 pseudo-class objects are used with the Content property


  • 🍒 mixed @ mixins

Use the method @include

/* Defines a block of CSS style code to indicate that the style can be reused */
@mixin left {
  float: left;
  margin-right: 30px;
}
// Use @include to call @mixin left.
.oneBox{@include left;
}


@mixin border-radius($radius) {
          border-radius: $radius;
      -ms-border-radius: $radius;
     -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
}

.box{@include border-radius(10px);
}


/* Define a function, pass */
@mixin box($height) {height:$height;
	width:400px;
	border:1px solid pink;
}
.one{
	Call * / / *
	@include box(200px);
}

/* Pass multiple arguments, and use the default values */
@mixin commonMargin($value1.$value2.$value3:12px) {display:block;
    margin-left:$value1;
    margin-right:$value2;
    padding:$value3;
}
.class1{
    font-size:12px;
    @include commonMargin(12px.13px.15px);
}
.class2{
    font-size:12px;
    @include commonMargin(12px.13px);
}

Copy the code

🍒 Variable calculation

$left:20px;
.div1{
    margin-left:$left+12px;
}

$num:3;
.box4{
    height: (1px+3px);
    right: $num*4;
}
Copy the code

🍒 inheritance

/*===== SCSS =====*/
h2{    
  border: 5px solid pink;
  border-width: 2px;
}
.box{@extend h2;
}

/*===== CSS =====*/
h1..box{    // css
  border: 5px solid pink;
}
.box{
  border-width: 2px;
}


Copy the code

4, Less

🚀 Less Chinese

🚀 less

🍒 Use syntax

<style lang='less' scoped><style> / / method 2Copy the code

with@ To declare variables

Such as @ mainColor: pink

  • Variables in LESS take effect at the block-level scope
<style scoped lang="less"> @ myColor: pink; .hello { h1 { color: @myColor } } </style>Copy the code


🍒 basic nesting

Basic nesting rules.maxBox{
    color:yellow;
    .inner{
        color:blue;
    }
    &::hover{
        color:pink; }} is equivalent to.maxBox{color:yellow}
.maxBox .inner{color:blue}
.maxBox::hover{color:pink}

Copy the code

A selector that can represent a flat level without making it a child.


🍒 mixed use

1. Basic Usage

.margin{
    margin:0.5 px. 1px;
}
Copy the code

With less blending, the style can be referenced directly by declaring the.+class name (.margin) in the required. Class class (.wrapper) class

call

.wrapper{
    .margin;
    color:24px;
    background-color:#efefef;
}
Copy the code

2. Use with parameters

Packaging style

.margin{
    margin:1px 2px;
}

.box-tab(@bgcolor) {.margin;
    background:@bgcolor;
}
Copy the code

use

.tab{
    .box-tab(#e6e6e6)}Copy the code

3. Use with default parameters

.box-tab(@bgcolor:# 000) {.margin;
    background:@bgcolor;
}
Copy the code

use

.tab{
    .box-tab()}/ / equivalent to the
.tab{
    margin:1px 2px;
    background:# 000;
}

Copy the code

Can be used to encapsulate various CSS graphics, vertical center, and so on


4, operation

@ width: 5 px;

.wrapper{
    width: (@width-1) *2; // The unit needs only one belt
}
Copy the code


The @arguments special variable in less

Can help you automatically fill in all variables

In blending, @arguments means blending all arguments passed in, and @arguments are separated by Spaces between multiple arguments

.box-shadow (@x: 0.@y: 0.@blur: 1px.@color: # 000) {  //less
    box-shadow: @arguments;
    -moz-box-shadow: @arguments;
    -webkit-box-shadow: @arguments;
  }
.div{
    .box-shadow(2px.3px);
}
Copy the code
.div {                                         //css
  box-shadow: 2px 3px 1px # 000;
  -moz-box-shadow: 2px 3px 1px # 000;
  -webkit-box-shadow: 2px 3px 1px # 000;
}
Copy the code

🍻 note

/* Will be retained after compiling */

// Will not be retained after compilation