Sass入门与实战-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_40674204/article/details/123727184

1.Sass是什么？

Sass是css的预处理工具，相较于css，可以清晰，结构化的表述css样式，同时在css的基础上添加了变量，嵌套，混合等功能。更加完善了css的代码管理，提高css复用性，提高开发效率。

2.Sass的使用

vscode下载插件 Live Sass Compiler一般vscode安装都会自己下载。
新建Sass/Scss文件
编译监测：点击“Watch Sass”将生成对应的css文件。生成对应的css代码如下：
.Sass变量和嵌套使用：
变量允许字符串、数字、颜色值、布尔值、列表、null 值。sass通过变量方式管理复用的css属性。可以通过命名，提高css样式的可阅读性，同时方便后续代码的改动。
Sass代码拆分和引用：
拆分前：
拆分后：

在这里插入图片描述

Sass代码混合-@mixin 与 @include
@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。
@include 指令可以将混入（mixin）引入到文档中。
我们上面知道了，变量可以解决css属性值相同，在不同地方使用的问题。而@mixin就是解决相同css样式在不同地方使用的问题。
举个例子：

这个时候就可以用到了sass的@mixin，以下是@mixin使用代码：

我们能够发现两个.title的样式都有高度，只是高度不同，这里就可以通过传参来解决。这里有两个传参的方法：
方法一：

方法二：通过@content
Sass @extend 与继承

其他，除了上述功能外，sass还多加了一个函数功能，里面包括了很多方法，推荐大家可以去一下地址查看需要的方法：https://www.runoob.com/sass/sass-functions.html

3.解释Sass和Scss之间的区别？

Sass和Scss其实就是同一种东西，不同的主要有以下两点：
1、文件扩展名不同，".sass"、".scss"。
2、语法书写方式不同，Sass是以严格的缩进式语法规则来书写，不带{}和；。

这周的学习心得：很多东西在项目的开发中使用过，但是使用的也都是其中的一小部分，没有系统性的学习掌握，以至于在开发过程中出现很多赘余的代码。回头看来还有许多可以完善的地方。学习的结果是-
1.上面的内容我不一定在开发项目中能全部立马写出来，但是心里有底，这个东西印象中可以继续完善优化。那具体想不起来的就可以查查加深映像。
2.今天掌握的东西不一定就永远掌握，学习是个不断温故知新的过程。要在项目开发过程中不断实践使用，这样不仅可以熟悉掌握这些知识，还能在实践过程中有新的理解和发现。