SASS教学＋SCSS：CSS 再进化，掌握语法攻略！

最新推荐文章于 2024-06-07 01:05:03 发布
最新推荐文章于 2024-06-07 01:05:03 发布
阅读量578 收藏 5
点赞数 3
分类专栏： 前端 文章标签： css sass
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41556756/article/details/109310618
版权

sass-banner.png

这几天摸索了SASS＋SCSS 的写法，发现有许多的GitHub 专案，使用它进行开发。

自己进行几个专案后，编写速度确实有提升，于是整理出这篇SASS＋SCSS 教学，从SASS+SCSS 介绍→ 安装＋执行→ 语法SASS教学，进行文章编写。

不敢说可以从入门到进阶，但对SASS 主观念的掌握，应该是没问题的，本篇文章内容

  1. SASS+SCSS介绍
  2. 安装＋执行
  3. 嵌套
  4. 引用父选择器&
  5. 变量
  6. 引入
  7. 混合
  8. 继承
  9. 操作符
  10. 结论

1. SASS＋SCSS 介绍

SASS是一个成熟且稳定的CSS预处理器，除了把普通的CSS语法强化，它还使用了SassScript增加了许多功能，如：变量、嵌套、混合、导入等…功能，在一般专案的编写或是中大型的专案上，都可以编写的更加快速。

SASS 会编译（compiled）程式码，转成一般CSS 形式，让浏览器可以解读输出，把页面呈现出来。

主要包含两种写法：分别是旧版的SASS（缩排语法，副档名.sass，使用缩排来区分程式码块，与Haml类似）和新版的SCSS（块语法，副档名.scss，使用和CSS相同方式，用大括号分开）。

/** 一般 css 写法 **/
.nav{
    background: #ccc;
}
.nav li {
    display: inline-block;
}
.nav li a{
    display: block;
    padding: 15px;
    text-decoration: none;
    color: #000;
}
.nav li img{
    width: 100%;
}

SASS写法：采用「缩进语法（TAB）」的方式，去除了一般CSS的括号、分号等…加快编写流程，有一部分的人喜欢这样的编写方式而采用，如下：

/** sass寫法 **/
.nav
    background: #ccc
    li
        display: inline-block
        a
            display: block
            padding: 15px
            text-decoration: none
            color: #000
        img
            width: 100%

SCSS写法：采用「块语法（Block）」，一般从CSS转为SCSS开发比较无痛，保留了括号、分号等…元素，相对于上面的SASS是比较新的编写方式，学习成本比较低，是目前主流的方式，如下：

/** scss寫法 **/
.nav{
    background: #ccc;
    li {
        display: inline;
        a {
            display: block;
            padding: 15px;
            text-decoration: none;
            color: #000;
        }
        img {
            width: 100%;
        }
    }
}

看完上面的程式码，会发现SASS 可以协助解决编写CSS 常遇到的几个问题，如：「 重复编写」、「 后续维护」、「 漏写问题」等问题…，然后加快开发流程，如下：

  1. 父选择器，重复编写：?如要扩充页面样式，就会不断的加上.nav li … 等父级class 名称，比较费工！
  2. 属性样式，重复编写：常会看到许多CSS 属性，是许多区块都需要用到，在SASS 没出来前，每个区块都需特别写一遍，现在直接引用即可。
  3. 后续维护：若哪天需要把.nav 这个class 名称更换，就需全部替换，比较麻烦。
  4. 漏写问题：SASS / SCSS 有条理的节省了许多代码编写，降低漏写的Bug。

2. 安装＋执行

安装＋执行SASS 的方式有满多种，有使用第三方应用程式的，也有直接安装在本机上的，这边会建议直接安装在本机上，比较一劳永逸，这边列出几种安装方式，如下：

SASS 安装

  1. 使用Node.js 安装 $ npm install -g sass
  2. 使用Ruby 安装 $ gem install compass
  3. 使用Brew 安装（Mac专用）$ brew install sass

指令执行完成，基本上就安装好了，若想测试是否安装成功，可以输入 $sass -v 看是否有显示SASS 版本号，若有的话代表安装完成

SASS 执行
首先在专案资料夹下，生成index.html 和两个资料夹css、sass ，然后在sass 下面新增一个style.scss，这支档是我们开发，主要编写样式的档案。
sass 范例档案
我们现在要试着把sass 资料夹里的style.scss ，编译成浏览器看的懂的.css 副档名型式。

所以下指令把style.scss 档案转译生成style.css，并放置在css 资料夹里，如下：
$ sass sass/style.scss:css/style.css
如果顺利的话，应该会看到「 css 」档案夹里，新增了两个档案，分别是「 style.css 」和「 style.css.map 」，这边比较要留意的是style.css（浏览器主要解读这只档）。
sass 转译成css

  1. 需留意「 当前路径」，这会影响到style.scss 档案编译生成style.css 的路径，若不对会报错
  2. 在index.html 里面，记得引入style.css 档案（ style.scss 不需引入），才会有样式出现

若持续有样式需新增，每次一编写完style.scss 就得执行一次 $ sass sass/style. scss :css/style. css指令，才能在浏览器上看到变化，相信一定会很想撞墙

所以这时可以改下另一个指令（加上 --watch 参数，若原有的style.css / style.css.map 已存在，会自动覆盖，不存在的话会自动生成新的），如下：
$ sass --watch sass/style.scss:css/style.css

执行后，会发现sass 已经开始在监听style.scss ，若这只档案有修改，style.css 变会即时的进行编译，给浏览器做使用，

在开发过程中，一个专案可能不只有一个样式档，假如有多个档案需同时进行监听，这边提供几个方式给大家：

  1. 重复执行：看有几个档案需监听，就输入几次。
    $ sass --watch path/to/filename. scss :path/filename. css

  2. 一次执行：看有几个档案需监听，一次下指令。
    $ sass --watch path/filename1. scss :path/filename1. css path/filename2. scss :path/filename2. css path/filename3. scss :path/filename3. css

  3. 指定目录下全部监听：监听sass 目录下的sass/scss 档案到指定的css 目录下（下面指令为两个资料夹在同一层）
    $ sass --watch sass:css

  4. 当前目录下全数监听，并直接生成css 档案。
    $ sass --watch .

到了这一步，若顺利的话，相信你也学会，如何在编写sass/scss 档案时，指定的css 档案可以同步的进行编译，并让浏览器能够顺利的出现画面。

个人觉的sass 学习比较麻烦的就是安装＋执行这个章节，后面就是语法部分，语法就相对简单明了了，原来就有css 开发经验的捧有们，相信也可以很快就入手的

接下来，我们开始前进到语法部分

3. 嵌套

SASS 提供CSS 语法扩展，如：嵌套功能（ Nested Rules ），主要是解决CSS 编写过程中，父元素重复编写问题，可以缩短开发流程、方便后续维护、?样式模组化等… 优点

这是容易入门SASS教学的第一步，直接上代码，我们使用SASS 编写样式，并对比编译后的CSS ，如下：

/** 编译前( sass 语法 ) **/
#main {
    width: 200px;
    height: 100px;
    background: #ddb92a;

    .greenbox{
        width: 100px;
        height: 50px;
        background: green;
        p, a {
            font-size: 20px;
        }
    }
}

/** 编译后（ 转为CSS 语法输出） **/
#main {
    width: 200px;
    height: 100px;
    background: #ddb92a;
}
#main .greenbox{
    width: 100px;
    height: 50px;
    background: green;
}
#main .greenbox p, #main .greenbox a{
    font-size: 20px;
}

除此之外，常用的属性也可以进行CSS「 嵌套属性」，比如：font-family、font-size、font-weight，会发现 font 多次出现。

还有常见的 background 系列，比如：background-color、background-position、background-size、background-image，都可以用嵌套功能，来节省开发时间，这边上代码，如下:

/** 编译前( sass语法) **/
.main {
    font: {
        family: Helvetica, sans-serif;
        size: 15em;
        weight: bold;
    }
}
/** 编译后（ 转为CSS 语法输出） **/
.main {
    font-family: Helvetica, sans-serif;
    font-size: 15em;
    font-weight: bold;
}

到目前，对嵌套功能应该有初步认识了，若之前有看过别人写的SASS / SCSS 档，应该会有种似曾相似的感觉吧

理解了它，接下来我们继续看SASS 还有什么特别的地方，可以让我们学习的…

4. 引用父选择器&

如果想在嵌套状态下，取得外层的父选择器，那可以使用「 ＆ 」，它会直接抓父选择器给你用。

常会把它用在，如CSS 元件状态： :hover、:focus、:hover、:link、:visited 等…，或是 :before、:after ，这边上个代码，如下：

/** 编译前( sass语法) **/
#main {
    display: block;
    a {
        color: #d0b95b;
        &:hover, &:active, &:focus {
            color: #a08106;
            outline: none;
            text-decoration: none !important;
        }
    }
}
/** 编译后（ 转为CSS 语法输出） **/
#main {
    display: block;
}
#main a {
    color: #d0b95b;
}
#main a:hover, #main a:active, #main a:focus {
    color: #a08106;
    outline: none;
    text-decoration: none !important;
}

还有另一种用法，也常常看到，如下：

/** 编译前( sass语法) **/
#main{
    &.color- 2 {
        background: red;
        &:before {
            border: 1px solid #ccc;
        }
    }
    &.color- 3 {
        background: yellow;
        &:before {
            border: 1px solid blue;
        }
    }
}
/** 编译后（ 转为CSS 语法输出） **/
#main.color-2 {
    background: red; 
}
#main.color-2:before {
    border: 1px solid #ccc;
}
#main.color-3 {
    background: yellow; 
}
#main.color-3:before {
    border: 1px solid blue; 
}

能抓到父选择器，是不是开发起来也方便多了呢？

一开始看到别人编写的SASS 时，觉得「 & 」的写法满酷的，后来才懂… 原来是这样运作呀

5. 变量

在我们实际编写CSS 的过程中，常会遇到多次相同的颜色、字型、字体大小等… 重复出现。

重复出现是好事，因为只要复制＋贴上就好了…但假如遇到哪天设计师/客户，需要修改就…(因为全都需要更改)

所以SASS 可以协助我们解决这问题，就如同JS 变量逻辑一样，只需改最源头的变量即可，其他所有引用该变量的地方，值都会自动更改。

SASS 中使用 $ 进行变量声明，支持7 种主要数据类型：

  • 数字（如：1, 1. 5, 20px）
  • 字符串，带引号和不带引号（如："foo", 'foo', foo）
  • 颜色（如：red, #28b0b4, rgba ( 0 , 0 , 0 , 0.5 )）
  • 布尔值（如： true, false）
  • 空值（如： null）
  • 值列表（list），用空格或逗号分开（如：2em 1em 0 1em、 Helvetica, Arial）
  • maps：从一个值映射到另一个（如：( key1: value1, key2: value2 )）

这边来对比一下，使用SASS 开发的编译前（ SASS 语法） ＆ 编译后（ 转为CSS 语法输出）的程式码，如下：

/** 编译前( sass 语法) **/
$bnr-font: Helvetica, sans-serif;
$bnr-color: #494947;
.banner1 p {
    font-family: $bnr-font;
    color: $bnr-color;
    padding: 10px 15px;
    letter-spacing: 0.2 em;
}
.banner2 p {
    font-family: $bnr-font;
    color: $bnr-color;
    margin: 15px;
}

/** 编译后（ 转为CSS 语法输出） **/
.banner1 p {
    font-family: Helvetica, sans-serif;
    color: #494947;
    padding: 10px 15px;
    letter-spacing: 0.2 em;
}
.banner2 p {
    font-family: Helvetica, sans-serif;
    color: #494947;
    margin: 15px;
}

如此一来，当哪天收到需要更改某通用按钮颜色、通用字体字型… ，就可以直接更改变量即可，是不是很方便

6. 引入

SASS 扩展了CSS 的 @import 功能，允许在文件内导入其他的SASS 或SCSS 子文件。

在文件进行编译后，被导入的SASS 或SCSS 子文件，会全部合并到同一个CSS 文件，然后呈现出来。

常见的 .sass 或 .scss 导入

这边展示一下基本用法，我们把 _reset. scss 导入到 main. scss 中，直接上代码：

/** 编译前( sass 语法) **/
/** _reset.scss **/
html, body, ul, ol, a {
    margin:   0 ;
    padding: 0 ;
}
/** main.scss **/
@import 'reset' ;
body {
    background: #a08106;
    font-size: 16px;
}

/** 编译后（ 转为CSS 语法输出） **/
html, body, ul, ol, a {
    margin:   0 ;
    padding: 0 ;
}
body {
    background: #a08106;
    font-size: 16px;
}

小提醒：若有多个文件需汇入，可同时使用多个 @import 引用文件，如下图

bootstrap.scss 多个文件引入

监听父文件即可
编写代码过程中，可以把不同样式区块的SASS 或SCSS 代码，拆开成不同独立的文件，然后使用 @import 把各片段文件，统整汇入到同一支 .sass 或 .scss 文件中，并监听这一支文件即可

在文件进行监听时，所有 @import 进来的 .sass 或 .scss 子文件，也同时被监听，所以当子文件有修改，父文件编译出的 .css 也会自动更新。

使用下划线，SASS 编译自动忽略

若有片段文件不需SASS 编译出新的CSS 文件，可在文件开头添加一个下划线，在编译过程中，系统就会忽略它，而只对开头无下划线的文件，进行新的CSS 文件生成。

上述的范例说明

看一下另一个范例，下面是bootstrap 的目录文件：
左图：目录结构 。右图： bootstrap.scss 文件

1.把多个scss 文件，使用 @import添加到 bootstrap.scss 中。
2.之后只需监听--watch bootstrap.scss 这一支文件即可，假如内部@import 的文件有变更，都会在bootstrap.css 自动更新。
3.bootstrap.scss 文件内的 @import 档案，不需要加下划线。
开头有下划线的文件，在执行sass 指令时，不会生成新的css 文件，系统会自动忽略。
4.@import scss 片段文件，不用加上副档名也可以，系统会自动寻找同名的副档名 .scss 或 .sass 文件，并依序导入。

一般CSS @import 功能
@import 默认情况，会预设导入同名的 .sass 或 .scss 文件，但在以下情况下，仅当成一般的CSS @import 语句，不会导入任何的SASS 文件，如下：

  • 如果文件的副档名是 .css ：@import "foo.css" ;
  • 文件名以 http :// 开始：@import "http://foo.com/bar" ;
  • 文件名是 url () ：@import url ( foo ) ;
  • @import 中包含媒体查询（media queries）

7. 混合

若是有重复的代码，会不断使用到，就可用混合指令（Mixin Directives），直接把样式封装成一个类名称，就可以重复调用，如下：

/** 编译前( sass 语法) **/
/** 定义mixin 指令**/
@mixin font-main {
    font: {
      family: Arial;
      size: 16px;
      weight: 100 ;
    }
    color: #000;
}
/** 引用mixin **/
.box p {
    @include font-main;
}

/** 编译后（ 转为CSS 语法输出） **/
.box p {
  font-family: Arial;
  font-size: 16px;
  font-weight: 100 ;
  color: #000;
}
  • 使用 @mixin 定义一个「 混合」
  • 使用 @include 引用一个「 混合」
  • 可同时引用多个「 混合」

使用参数功能

使用「 混合」功能，有设置参数功能（ 可设定默认值），让整体功能变更弹性，有点像函数的传入参数，如下：

/** 编译前( sass语法) **/
/** 定义mixin 指令**/
@mixin border- set ( $color, $width, $style: solid ) { 
    border: {
        color: $color;
        width: $width;
        style: $style;
    }
}
@mixin background- set ( $color, $image, $repeat ) { 
    background: {
        color: $color;
        image: url ( $image ) ;
        repeat: $repeat;
    }
}
/** 引用mixin **/
.box div {
    @include border- set ( red, 2px ) ;
    @include background- set ( green, "../img_tree.png" , 'no-repeat' ) ;
    letter-spacing: 0.5 em;
}

/** 编译后（ 转为CSS 语法输出） **/
.box div {
  border-color: red;
  border-width: 2px;
  border-style: solid;
  background-color: green;
  background-image: url ( "../img_tree.png" ) ;
  background-repeat: "no-repeat" ;
  letter-spacing: 0.5 em;
}

8. 继承

「 继承」@extend 是一个满实用的功能，若想让多个class 使用相同样式，就可使用 @extend 直接继承过来，减少重复编写的时间，如下：

/** 编译前( sass语法) **/
%msg-style {
    display: block;
    flex-wrap: wrap;
    background: #d9d9d8;
    color: #000;
}
.msg {
    @extend %msg-style;
}
.msg-success {
    @extend %msg-style;
    background: #34fc6d;
}
.msg-error {
    @extend %msg-style;
    background: #fc253e;
}

/** 编译后（ 转为CSS 语法输出） **/
.msg, .msg-success, .msg-error {
  display: block;
  flex-wrap: wrap;
  background: #d9d9d8;
  color: #000;
}
.msg-success {
  background: #34fc6d;
}
.msg-error {
  background: #fc253e;
}
  • 使用站位选择器 % ，定义一个样式，被定义的类，它将不会被编译出来。
  • 若没有标注 % 的类，也可以使用 @extend 引入，但定义的类会被编译出来。
  • 有使用 @extend 的类，会被系统编译整合，使用共用样式。

多重扩展，可引入多个选择器

同一个选择器，可以使用 @extend扩展多个选择器，这代表它继承了扩展选择器的样式，如下：

/** 编译前( sass语法) **/
.error {
    background-color: #fa945c;
}
.notice {
    font-size: 16px;
    font-family: sans-serif;
    font-color: #000;
}
.seriousError {
    @extend .error;
    @extend .notice;
    background-color: #ff1b1b;
}

/** 编译后（ 转为CSS 语法输出） **/
.error, .seriousError {
  background-color: #fa945c;
}
.notice, .seriousError {
  font-size: 16px;
  font-family: sans-serif;
  font-color: #000;
}
.seriousError {
  background-color: #ff1b1b;
}

上面几个状况，应该是比较常见的 @extend功能，应该满足够使用了，若想了解更多，可以直接参考SASS官方。

9. 操作符

SassScript 支持对数字的运算，如：（加法 +、减法-、乘法 *、除法/、取模 % 等…），来看一下代码，如下：

/** 编译前( sass 语法) **/
div a {
    $width: 500px;
    width: $width/ 2 ;             //使用变量，和/
    font: 16px/10px;             //原生CSS，不作为除法
    height: ( 250px/ 2 ) ;           //使用了(),和/
    margin-left: 10px + 8px/2px; //使用了+, ?和/
}

/** 编译后（ 转为CSS 语法输出） **/
div a {
  width: 250px;
  font: 16px/10px;
  height: 125px;
  margin-left: 14px; 
}

简单来说，就是增加了运算功能，有需要也可进行使用。

这边也有另一个范例，如下：

/** 编译前( sass语法) **/
.container { width: 100 %; }
article [ role= "main" ] { 
  float: left;
  width: 700px / 960px * 100 %; 
}
aside [ role= "complementary" ] { 
  float: right;
  width: 400px / 960px * 100 %; 
}

/** 编译后（ 转为CSS 语法输出） **/
.container {
  width: 100 %;
}
article [ role= "main" ] { 
  float: left;
  width: 72.9166666667 %;
}
aside [ role= "complementary" ] { 
  float: right;
  width: 41.6666666667 %;
}

10. 结论

如果能看到这边，首先给自己掌声！相信对SASS教学，也有程度的认识了！

接着，可以找个小案子，来自己练习，你会发现，CSS结合了JS特性，开发起来会变得更加快速（省了很多代码）

SASS 在入门安装＋下指令时，会有些要适应，但这边搞定后，会发现后面语法观念，其实很容易上手，优化了传统CSS 开发上的许多不变。

希望这篇SASS教学文，有帮助到需要的捧有们，我们下篇文章见

前端仙人
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
scss安装入门到使用高级语法
weixin_37818738的博客
07-31 7925
Sass是CSS的"预处理器",它在CSS的语法基础上增加了变量,嵌套,计算,函数,等用法,让CSS的编写更简洁,清晰. 预处理器出了Sass 还有其他,常见的有Less,Stylus,使用方法也类似......
安装scss的方式
Duan_hs的博客
01-05 2749
安装scss的方式
vue 安装 scss
金乌的博客
09-22 1万+
node-sass与 node 版本不兼容时，如果node版本过高时，最好对node版本进行降级，升级node-sass可能有隐藏风险；如果sass版本过高，可以卸载sass，重新安装指定版本。安装scss (安装sass-loader node-sass 前者依赖于后者)node-sass：nodejs环境中将sass转css。安装指定版本：当由于版本过高报错时，可以指定要安装的版本。sass-loader：把 sass编译成css。安装速度很慢时，可以尝试镜像安装。
SCSS 基本使用详解
2301_79262050的博客
05-25 1480
SCSS 是 Sass（Syntactically Awesome Stylesheets）的其中一种语法，是一种预处理器脚本语言，能够扩展 CSS 的功能，使其更加强大和高效。SCSS 保留了 CSS 的原有语法，同时增加了变量、嵌套规则、混合宏（mixin）、继承等高级功能。本文将详细介绍 SCSS 的基本使用方法，帮助读者快速上手并掌握 SCSS 的核心概念和技巧。
Vue 安装 scss (安装步骤/项目使用/报错解决)
nanfangxinchai的博客
08-01 1万+
1.1.1.记点：sass-loader：把 sass编译成css, node-sass：nodejs环境中将sass转css。1.1.安装sass-loader/node-sass(前者依赖于后者)
vue项目中使用scss
热门推荐
weixin_45665171的博客
03-29 1万+
vue项目中安装、引入、使用scss
Sass/SCSS：让CSS书写更高效
01-08
二、Sass（基于SCSS语法）详解1. CSS功能拓展(1). 嵌套规则(2). 父选择器&(3). 属性嵌套(4). 占位选择器%foo(5). 注释2. SassScript(1). 变量(2). 数据类型(3). 运算数字运算颜色值运算字符串运算布尔运算(4). 函数...
sast：将CSS，Sass，SCSS和Less解析为一元语法树
02-05
ast 这是将CSS，Sass和SCSS解析为与兼容的抽象语法树（AST）的事情，这使得随后可以使用所有出色的进行搜索和操作。 大部分繁重的工作都是由完成的。安装用npm安装它： npm install --save sast用法您可以import或...
Learn-SASS-SCSS：了解SASSSCSS
02-14
SCSS（Sassy CSS）是SASS的一种语法格式，全称为“Sassy CSS”，它是SASS 3版本后引入的新语法，更接近于CSS的语法，易于理解和使用。 **SASS与SCSS的主要区别** 1. **语法结构**：SASS早期的语法采用缩进式，没有...
pixelperfectcss-scss：像素完美CSS（Scss）
02-05
SCSS（Sassy CSS）是Sass的最新语法格式，它遵循CSS的语法结构，但增加了许多强大的功能。例如，我们可以定义变量 `$color-primary` 来存储主色，然后在多个地方使用它，这样就避免了颜色值的重复和一致性问题。此外...
bulma-scss：Bulma SCSS-Bulma CSS Framework文件转换为SCSS语法
02-03
Bulma SCSS是Bulma CSS框架的一个版本，它将原始的CSS代码转换为了Sass（Syntactically Awesome Style Sheets）语法，也就是SCSS。Sass是CSS的一个预处理器，它提供了更强大的功能，如变量、嵌套规则、混合（mixins...
【SCSS入门】2、安装和配置SCSS环境
最新发布
weixin_52938153的博客
06-07 2012
Sass（Syntactically Awesome Stylesheets）是一种强大的CSS预处理器，它通过引入变量、嵌套、混合（mixins）、继承和函数等高级特性，显著增强了CSS的功能和灵活性。Sass允许你使用更简洁和模块化的语法来编写样式表，从而提高代码的可读性和可维护性。变量使得颜色、字体和其他值可以重复使用，嵌套规则让样式结构更加清晰，混合可以创建可重用的代码块，继承和函数则提供了更高级的样式控制。最终，Sass代码会被编译成标准的CSS，使其兼容所有浏览器。这种预处理器特别适用于大型项目
安装scss需注意
ssy001128的博客
06-08 317
安装scss时需注意版本兼容问题
Vue sass安装
weixin_48887108的博客
09-21 812
Vue项目中 sass安装 1.sass-loader依赖于node-sass,所以要安装node-sass cnpm install node-sass --save-dev //安装node-sass cnpm install sass-loader --save-dev //安装依赖包sass-loader cnpm install style-loader --save-dev //安装style-loader 2.在bui...
在vite初始化的项目中安装scss，及scss的使用
2301_77415960的博客
11-25 1543
在vite初始化的项目中安装scss，及scss的使用
Vue项目中 安装及使用Sass（scss）
蓝胖子的博客
04-03 2834
Vue项目中 安装及使用Sass（scss）
Sass 和 SCSS
qq_45947664的博客
11-14 1万+
▣Sass (Syntactically Awesome StyleSheets)，是由编写的一款，和html一样有，和css编写规范有着很大的出入，是不使用花括号和分号的，所以不被广为接受。Sass 是一款强化 CSS 的辅助工具，是对，它在 CSS 语法的基础上增加了(mixins)、(extend)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。
【SCSS篇】Vite+Vue3项目全局引入scss文件
前端知识分享喵
10-12 4546
Vite+Vue3项目全局引入scss文件
Sass与SCSS：提升CSS开发效率的利器
Sass提供了两种主要的语法形式：Sass（`.sass`）和Sassy CSS（`.scss`）。虽然`.sass`是原始的形式，但在本课程中，我们将主要关注`.scss`，因为它的结构更为直观，CSS代码可以被直接编译，而`.scss`也支持SCSS特有...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端仙人

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值