Use scss in your project
1. Use npm to introduce scss in the vue project
npm install --save-dev sass-loader //install scss support
npm install --save-dev node-sass
Add to build/webpack.base.conf.js:
{
test: /.s[a|c]ss$/,
loaders: ['style', 'css', 'sass'
}
Add lang="scss" to the style tag in the .vue file (still supports css syntax)
2. Introduce scss into html
Use koala to compile the scss file you wrote into css, and then import the .css file into your own html file.scss basic syntax
- Variable (local/global) declaration: $+ variable name: variable value; the default variable is added with default after the variable name, and !global becomes a global variable.
- Mixin (reusable block of code): declare mixin @mixin border-radius { }; call mixin @include. border-radius; can also be declared with default parameters, and the call can pass parameters.
- Inheritance: @extend .btn; Inherit the btn class. Any selector can be inherited and can be inherited continuously.
- Placeholder%: If the code declared by the placeholder is not called by @extend, it will not be compiled to generate css code.
- Interpolation: #{$parameter name}, insert incoming or defined parameters.
- Note: /* */ : will be displayed in the compiled css file; // content: will not be displayed. /!/: Important note, it will be included in any style css file, generally place the css file copyright description and other information.
- Addition and Subtraction: Addition and subtraction can be performed between values of the same unit.
- Multiplication and division: you can only multiply values; if there is no variable in the division or it is not in a mathematical expression (addition, subtraction, etc.), the division operation must be enclosed in parentheses, otherwise "/" will not be regarded as a division number operation.
- Color operations: Arithmetic operations support color values and are calculated in segments, 01+05=06
- String concatenation: +, $content: "Hello" + "" + "Sass!";cursor: e + -resize; the quoted string is added to the unquoted string, whichever is the left character with or without quotes .
- Parent class selector: &, which refers to the parent element,
- if syntax: @if, @else,
- Loop syntax: @for, @while, @each,
- 函数：@function double ($number){ @return $number*2; }
- import: import other scss