SCSS summary

Write in front: this article mainly records some SCSS use process, some commonly used error and solution, and how to use SCSS globally in a new project, and some commonly used SCSS syntax

1. Install the SASS.

NPM i-d sass sass-loader(install sass and sass compiler)

Error handling scheme:

1. Switch download source:

/ / view source NPM config get registry / / change the source NPM config set registry/https://registry.npmjs.org/taobao source NPM config set registry https://registry.npm.taobao.orgCopy the code

NPM cannot be installed. Enter NPM config set strict-ssl false

2. Install the sASS and Loader of the corresponding version

Sass-loader 4.1.1, Nod-sass 4.3.0 sass-Loader 7.0.3, Nod-sass 4.7.2 Sass-Loader 7.3.1, Nod-Sass 4.7.2 Sass-Loader 7.3.1, Nod-Sass 4.7.2 sass-Loader 7.3.1, nod-Sass 4.7.2 Node-sass 4.14.1 NPM install sass-loader@version Node-sass@Version --save-dev // Install the corresponding versionCopy the code

2. Use the Scss

1. Install the plug-in to implement global variables

npm install sass-resources-loader –save-dev

2. Vue.config. js Configures the CSS

module.exports = { css:{ loaderOptions: { scss: { //data: `@import "@/styles/_variable.scss"; '// Replace with the following data:' @import "@/style/global. SCSS "; '}}}}Copy the code

3. Grammar

1. Nested writing

.hello{// nested selectors. Box {color:red; } h3{ color:yellow; } border:{top: red solid 1px; right : blue solid 2px; } // Select the parent element &:hover{color:red; }}Copy the code

2. @ the extend inheritance

The class1 {color: red; } .class2{ @extend .class1; font-size : 14px; }Copy the code

3. Template characters

Use #{$color} in SCSS to use variables in property names and property values

4. Selector placeholder

%placeholder, with the @extend-only selector.

5. Cycle

$flex-jc:(fs:flex-start,
	center:center,
	fe:flex-end,
	sb:space-between,
	sa:space-around);
$flex-ai:(fs:flex-start,
	center:center,
	fe:flex-end,
);
//each循环 , key和val分别表示上面数据键和值,#{}是插值表达式
@each $key,$val in $flex-jc {
	.jc-#{$key} {
		justify-content: $val;
	}
}
Copy the code

Mixed 6.

About the Sprite figure

Processing site: here;

.sprite{ background: url("index.png") no-repeat; background-size: 375px 455px; display:inline-block; .sprite-XXX{ background-position: 10% 10%; width: 20px; height: 20px; }}Copy the code

font-iconfont

Class =”iconfont icon-xxx”