Sass/Scss的安装与简单使用

前言

CV代码时总遇到大佬们写的用Scss写的酷炫样式，迫于之前尝试安装失败的经历，被迫手改CSS~

下面咱就说说咋安装，咋使用，以及为啥用？

咋安装

环境：Vue3+Vite

依赖安装：sass-loader，sass

npm install sass-loader@7.3.1 --save-dev

npm install sass --save-dev

package.json文件，如下即安装成功

"devDependencies": {
    "@vitejs/plugin-vue": "^3.2.0",
    "sass": "^1.63.6",
    "sass-loader": "^7.3.1",
    "vite": "^3.2.3"
}

注意：安装完成后请重启项目或编译器

咋使用

<style scoped lang="scss"></style>

简单举个例子

--s: 180px;
.about{
    width: var(--s);
    min-height: 600px;
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
    .info {
        position: relative;
        padding: 80px 0;
        >div:first-child{
            position: absolute;
            z-index: 11;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
        }
    }
    // & 代表.about
    &:hover{
        color: #ffffa6;
    }
 }

为啥用

嵌套写法，减少代码量，树级结构明确

能定义变量，通过JS动态设置CSS的值

注释方便，可以使用//或者/* /的方式

学习成本低，跟CSS没啥太大区别

以上是本篇文章的全部内容，后续更新SCSS详细的语法规范~