前端常说的 SCSS是个啥玩意?一篇文章给你讲的明明白白!

0.邂逅 SCSS

我们在使用脚手架 Vue cli 或者 Vite 创建 Vue 项目的时候,会发现在 css 样式标签那里有一个 lang="scss" 的属性,那 scss 是什么玩意?

专业术语:SCSS 是一种预处理器语言,是 CSS 的一种扩展。

大白话: SCSS 就像是游戏中的 Buff,因为它支持定义变量、嵌套、混合等功能,所以它会让 CSS 变得更加强大,并且更容易维护。

使用 SCSS 这玩意之后,编译后的代码还是 CSS。

1. SCSS 核心知识点

1.1 变量

作用: 主要用来存一些重复使用的值,比如尺寸、颜色等等。方便统一管理。

定义变量语法规则: 以 ** <math xmlns="http://www.w3.org/1998/Math/MathML"> ∗ ∗ 开头,并且 ** 开头,并且 </math>∗∗开头,并且 后面不能直接跟数字。

css 复制代码
// 定义变量
$bgColor: #a173f3;
$spaceSize: 20px;

// 使用变量
.header {
  background: $bgColor;
  padding: $spaceSize;
}

1.2 嵌套

作用:可以很直观的展示 html 结构层级关系,减少重复代码

scss 复制代码
.div {
  ul {
    li {
      display: block;
      a {
        color: red;
        &:hover {  // & 表示父选择器
          text-decoration: underline;
        }
      }
    }
  }
}

**注:**在 SCSS 中,& 符号用于引用父元素类名,实现嵌套规则的简化书写。例如:

css 复制代码
.father {
  &-container {
    margin: 66px;
  }
  &-text {
    font-size: 20px;
  } 
}

编译后对应的CSS代码为:

css 复制代码
.father-container {
   margin: 66px;
}
.father-text {
  font-size: 20px;
}

1.3 混合 (Mixins)

作用 :就像 js 中的函数 一样,是一个可以重复利用的样式代码块,并且支持参数。

@mixin 用来定义样式代码块,@include 用来使用样式代码块。

css 复制代码
// 定义 Mixin
@mixin border-radius($radius) {
  border-radius: $radius;
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
}

// 使用 Mixin
.button {
  @include border-radius(5px);
}

1.4 继承

作用:继承可以让一个选择器继承另一个选择器的样式。就是儿子继承爹的样式。

css 复制代码
// 定义基础样式
.father-style {
  color: $primary-color;
  font-size: $font-size;
}

// 继承样式
.son-style {
  @extend .father-style;
  font-size: 20px;
}

1.5 运算

作用:在 css 中对数值进行加减乘除操作

scss 复制代码
$base-size: 10px;

.header-content {
  font-size: $base-size * 3;  // 30px
  width: 100% - 40%;             // 60%
  padding: ($base-size / 5);     // 2px
}

1.6 函数

作用:SCSS 提供了一些内置函数,也可以自定义函数,用来计算值。

css 复制代码
// 使用内置函数
body {
  font-size: em(16px);
}

// 自定义函数
@function doubleTwo($num) {
  @return $num * 2;
}

// 使用自定义函数
.header {
  height: doubleTwo(66px);
}

1.7 条件与循环

作用:动态生成样式:if判断、for循环、each 遍历。

css 复制代码
// If 判断
@mixin myStyle($flag: false) {
  @if $flag {
    background: red;
    color: white;
  } @else {
    background: green;
     color: black;
  }
}

// For 循环
@for $i from 1 to 10 {
  .col-#{$i} { 
    width: 100% / $i; 
  }
}

// Each 遍历
$sizes: small, medium, large;
@each $size in $sizes {
  .icon-#{$size} {
    font-size: if($size==large, 14px,20px);
  }
}

1.8 模块化

作用:就是根据一些功能拆分文件,便于统一管理和维护。 例如你可以新建一个 myVariables.scss 文件,专门用来存储变量:

css 复制代码
// 定义变量
$primary-color: #3FAF60;
$background-color: red;
$font-size: 18px;

然后在另外一个 scss 文件中导入使用:

css 复制代码
@import "../scss/myVariables.css";
.button {
  padding: 15px;
  font-size: $font-size;
  background-color: $primary-color;
}

其实我们常用的做法是建一个 main.scss 文件,然后导入一些全局样式:

css 复制代码
// 导入基础样式
@import "base/variables";
@import "base/mixins";

// 导入组件样式
@import "components/button";
@import "components/card";

// 导入布局样式
@import "layout/header";
@import "layout/footer";
@import "layout/sidebar";

// 导入页面样式
@import "pages/home";
@import "pages/about";

// 导入主题样式
@import "themes/light";

2. 在 Vue 中使用 SCSS

其实我们使用的脚手架 Vue cli 或者 Vite 本身都集成了对 scss 语法的支持,只不过我们需要在项目中安装依赖:

css 复制代码
# Vue CLI 脚手架
npm install sass sass-loader@10 -D

# Vite 脚手架
npm install sass -D

安装依赖之后我们在 style 标签上面添加 lang="scss" 表示对 scss 的支持。另外我们通常会加上 scoped 属性表示这些样式只限制在本页面使用。

3. 答疑

3.1 sass 和 scss 什么关系?

我们在安装 scss 依赖时发现是 npm install sass。那 sass 和 scss 什么关系?

回答:

sass 和 scss 是同一种预处理器语言的不同语法版本,scss 是 Sass 的超集,兼容 sass 语法和 CSS 语法。

其实 CSS 最开始的预处理语言是 sass,后来 sass 3 版本引入了 scss 的语法扩展。说白了就是 scss 比 sass 更牛逼,更好用,但是 scss 基于 sass。所以你 npm install 的是 sass。

3.2 scss 和 css 到底什么关系

**回答:**SCSS 可以看作是增强版的 CSS,支持变量、嵌套、混合等一些非常高级的特性。

相关推荐
止观止2 分钟前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall2 分钟前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴8 分钟前
简单入门Python装饰器
前端·python
袁煦丞1 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作
天天扭码1 小时前
从图片到语音:我是如何用两大模型API打造沉浸式英语学习工具的
前端·人工智能·github
鱼樱前端2 小时前
今天介绍下最新更新的Vite7
前端·vue.js
coder_pig3 小时前
跟🤡杰哥一起学Flutter (三十四、玩转Flutter手势✋)
前端·flutter·harmonyos
万少3 小时前
01-自然壁纸实战教程-免费开放啦
前端
独立开阀者_FwtCoder3 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
yuki_uix3 小时前
AI辅助网页设计:从图片到代码的实践探索
前端