2022-7-23日课程总结

Sass简介       

  Sass (英文全称：Syntactically Awesome Stylesheets) 是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言。

        Sass 是一个 CSS 预处理器。

        Sass 是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。

        Sass 完全兼容所有版本的 CSS。

        Sass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承、内置函数等等特性。

        Sass 生成良好格式化的 CSS 代码，易于组织和维护。

        Sass 文件后缀为 .scss。

什么是预处理器？

        预处理器是一个能够通过预处理器独有的语法来生成css文件的程序

为什么要使用Sass？
CSS 本身语法不够强大，导致重复编写一些代码，无法实现复用，而且在代码也不方便维护。

Sass 引入合理的样式复用机制，增加了规则、变量、混入、选择器、继承、内置函数等等特性。

我们可以举个例子，我们会在 CSS 中重复使用很多次十六进制的颜色代码，当有了变量之后，如果要改变颜色代码，只要修改变量的值就好了

Sass语法格式

他有两种语法格式，首先是SCSS（Sassy CSS）——也是本文示例所使用的格式——这种格式仅在Css3语法的基础上进行拓展，所有Css语法在SCSS中都是通用的，同时加入Sass特色功能。.scss为拓展名

sass变量

$text_color:red;
//使用变量
p{
    color:$text_color;
}

嵌套规则

选择器相同放外边 选择器不同放里边

伪类选择器嵌套需要使用&

//sass嵌套语法
div {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  p {
    font-size: 16px;
    span {
      color: red;
    }
  }

混入语法

通过@mixin来创建混入样式

自定义样式，类似于Bootstrap封装的一些样式添加类名使用 而混入语法是在某个样式中使用@include 混入名 来进行调用

@mixin important-text {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
}