Use scss in vue project

Use scss in vue project

• 1. Install and use scss
• • 1. Install scss
  • 2. Install node-sass and sass-loader
  • 3. Configure the webpack.base.conf.js file
  • 4. Use scss in components
• 2. Set scss variables
• • 1. Use sass-resources-loader to implement global variables
  • 2. Create a new public.scss file
  • 3. Find the utils.js file under build in the root directory
  • 4. Run the project
• 3. Commonly used global variables
• • 1. Setting variables
  • 2. Using variables
• 4. Use global variables
• • 1. Variables
  • 2. Nesting
  • 3. Import
  • 4. mix
  • 5. Inheritance
  • 6. if / else / each / for
  • 7. Other

1. Install and use scss

1. Install scss

npm install scss --save

2. Install node-sass and sass-loader

sass-loader: compile sass into css
sass-loader: convert sass to css in nodejs environment
Tips: limit the version number of node-sass and sass-loader to prevent the version number installed by default from being too high

npm i [email protected] -D
npm i [email protected] -D

Version correspondence:

3. Configure webpack.base.conf.js file

Tip: In the webpack.base.conf.js file under the build folder, find rules and add the following code

rules: [
  {<!-- -->
    test: /\.scss$/,
    loaders: ['style', 'css', 'sass']
  },
]

4. Use scss in components

Tip: Add the attribute lang="scss" to the style tag in the component, save and run.

<style lang="scss">
#app {<!-- -->
  background: $color;
}
</style>

2. Set scss variables

1. Use sass-resources-loader to implement global variables

Install sass-resources-loader

cnpm install sass-resources-loader --save

2. Create a new public.scss file

Create a new public.scss file in the assets folder under the src directory to store all public variables.

3. Find the utils.js file under build in the root directory

Hint: write scss (public variable file) path in resources

scss: generateLoaders('sass')
// change to:
scss: generateLoaders('sass').concat({<!-- -->
  loader: 'sass-resources-loader',
  options: {<!-- -->
    resources: path.resolve(__dirname, '../src/assets/public.scss') // specify a single file
    // resources: [path.resolve(__dirname, '../src/assets/public.scss'),path.resolve(__dirname, '../src/assets/public.scss')]/ / specify multiple files
    // will match all files or arrays of paths in folders and subdirectories
    // resources: path.resolve(__dirname, '../src/assets/scss/**/*.scss') // specifies a single folder and all files in subdirectories
    // resources: [path.resolve(__dirname, '../src/assets/scss/**/*.scss'),path.resolve(__dirname, '../src/assets/scss/* */*.scss')] // Specify all files in multiple folders and subdirectories
  }
}),

4. Run the project

Re-run npm run dev, and global variables can be used in the component.

3. Commonly used global variables

1. Set variables

Write variables ($), mix (@mixin, the default value in brackets, optional), inheritance (%) and other syntax in the global variable file.

// variable
$color: #ff0;
$bac_color: #222;
$bac-color: #111;

.main {<!-- -->
  color: $color;
  background: $bac_color; /*$bac_color is overwritten by $bac-color*/
}

// mix
@mixin borderRadius($num: 8px) {<!-- -->
  color: $color;
  border-radius: $num;
}

// inherit
%cricle {<!-- -->
  width: 50px;
  height: 50px;
  background: red;
  border-radius: 50%;
}

2. Using variables

Use variables in composition ($ + variable name), mixins (@include), inheritance (@extend).

.div{<!-- -->
  // variable
  background: $color;
  // mix
  @include borderRadius(20px); /*() does not pass the value and uses the default value of 8px*/
  // inherit
  @extend %cricle;
}

4. Use global variables

1. Variables

1. Variables start with $ and are used to store some parameters that need to be reused in CSS;
2. Variables have a scope, and variables declared internally cannot be used outside. If you need to refer to internal variables externally, you can add !global declaration after the variable value;
3. In the variable name, a dash is equivalent to an underscore, and the value will be overwritten by the variable defined for the second time.
scss code

$color = #333;
$bac_color = #222;
$bac-color = #111;

.main {<!-- -->
  color: $color;
  background: $bac_color; /*$bac_color is overwritten by $bac-color*/
}
/* after compilation: */
.main{<!-- -->
    color : #333;
    background: #111;
}

2. Nested

nav {<!-- -->
  ul {<!-- -->list-style: none;}
  li {<!-- --> display: inline-block; }
}
/* after compilation: */
nav ul{<!-- -->list-style: none;}
nav li{<!-- -->display: inline-block;}

3. Import

1. Scss can combine multiple files together through @import;
2. Files named at the beginning of _ will not be directly generated as CSS files, and will only be imported where the @import directive is used;
3. It can be introduced globally or locally;
4. When introducing fragments into scss, the file extension can be defaulted;
4. The native @import of css will obtain the imported style fragments through additional HTTP requests, while the @import of scss will directly merge these imported fragments into the current CSS file without generating new HTTP requests.

/*_one.scss*/
nav {<!-- -->
  ul {<!-- -->list-style: none;}
  li {<!-- --> display: inline-block; }
}

/*two.scss*/
@import '_one' /*global import, default suffix*/

.main{<!-- -->
    @import '_one'/*local import*/
    color : #333;
    background: #111;
}

4. Blend

1. Define a class or method through @mixin, and refer to this class or method through @include elsewhere
2. If @mixin is not called, it will not be rendered
3. When there are multiple parameters, pass the name of the specified parameter without considering the order of passing in

@mixin border-radius($radius: 5px) {<!-- --> /*Set the default value to 5px*/
   border-radius: $radius;
   -ms-border-radius: $radius;
   -moz-border-radius: $radius;
   -webkit-border-radius: $radius;
}
.box {<!-- -->
  @include border-radius(); /*No parameters passed, the default value is 5px*/
}
.box1 {<!-- -->
  @include border-radius(10px); /*Incoming parameter, the value is 10px*/
}
/* after compilation: */
.box {<!-- -->
   border-radius: 5px;
   -ms-border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
}
.box1 {<!-- -->
   border-radius: 10px;
   -ms-border-radius:10px;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
}

5. Inheritance

1. Use% to define an inherited style, it does not work by itself, it is only used to be inherited by others
2. If the style is not inherited, it will not be output to the final generated CSS file
3. Note that you cannot inherit the continuous combination of classes such as @extend .box .main and should be written as
@extend .box, .main

%err-color {<!-- -->
    color: red;
}

.errBox{<!-- -->
    @extend %err-color;
    padding: 10px;
}
.errBox2{<!-- -->
    @extend %err-color;
    padding: 5px;
}
/* after compilation: */
.errBox, .errBox2{<!-- -->
    color: red;
}
.errBox{<!-- -->
    padding: 10px;
}
.errBox2{<!-- -->
    padding: 5px;
}

6. if / else / each / for

1. @if and @else

@if condition is true {<!-- -->
  //code
} @else {<!-- -->
  //code
}

2. @each
Iterates over all data present in the variable.

@each $color in red, green, yellow, blue {<!-- -->
  .p_#{<!-- -->$color} {<!-- --> /*Interpolation, the seventh point will talk about*/
    background-color: #{<!-- -->$color};
  }
}
/* after compilation: */
.p_red {<!-- --> background-color: red; }
.p_green {<!-- --> background-color: green; }
.p_yellow {<!-- --> background-color: yellow; }
.p_blue {<!-- --> background-color: blue; }

3. @for loop
(1) The keyword through indicates that the number including the end point value is included,
(2) The keyword to does not include the end value.

@for $i from 1 through 3 {<!-- --> /*through includes the end value of 3*/
  .item-#{<!-- -->$i} {<!-- -->
     width: 2px * $i;
   }
}
/* after compilation: */
.item-1 {<!-- -->
  width: 2px;
}
.item-2 {<!-- -->
  width: 4xp;
}
.item-3 {<!-- -->
  width: 6px;
}

7. Other

1. Interpolation
Generally, the variables we define are attribute values and can be used directly, but if variables are used as attribute names or in some special cases, they must be used in the form of #{$XXX}.

As follows, variables are used as attribute names in the form of interpolation

@each $color in red, green, yellow, blue {<!-- -->
  .p_#{<!-- -->$color} {<!-- --> /*Interpolation, the seventh point will talk about*/
    background-color: #{<!-- -->$color};
  }
}

2. Notes
(1) The content of the // comment does not exist after compilation
(2) The contents of the /* */ annotation will be stored in the css file after compilation