前端必知：37.sass

目录

一.介绍

sass的特点

 二.sass的使用

 sass的写法​

css 写法

sass写法（常用）

less 写法 （不常用）

sass的变量   

使用前需安装插件

声明变量 

 变量名的命名方式

作用域 

sass的嵌套规则 

混合器 

使用混合器

 定义/使用

下面是部分代码 

---

一.介绍

        Sass（Syntactically Awesome Stylesheets）是一种 CSS 的预处理器，提供了一种扩展和增强 CSS 的方式。Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量(variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。

sass的特点

1. 变量：Sass 允许在样式表中使用变量，以便在多个位置共享和重用样式值。可以声明变量并将其用作颜色、字体、间距等样式属性的值。

2. 嵌套规则：Sass 允许在样式规则中嵌套其他规则，提供了更清晰和结构化的样式层级结构。这样可以避免编写重复的选择器，并使样式表更易于阅读和维护。

3. 混合（Mixins）：混合是一种可重用的代码块，类似于函数，可以在样式规则中引入。通过定义和调用混合，可以避免重复编写相似的样式代码。

4. 继承：Sass 允许样式规则继承其他规则的样式，以减少代码的重复。通过使用 @extend 关键字，一个选择器可以继承来自另一个选择器的样式。

5. 运算：Sass 支持数字、颜色和单位之间的基本运算，可以在样式表中进行数值计算和样式调整，提供了更灵活的样式控制。

现阶段发表的文章主要针对，html和css阶段，所以在下面的sass讲解中有关于javascript的部分内容，会被忽略掉，如果对sass感兴趣可以去sass中文网查看相关文档。sass地址：Sass世界上最成熟、稳定和强大的CSS扩展语言 | Sass中文网 

 二.sass的使用

 sass的写法

         使用 sass 可以使用两种语法格式，语法格式不同，文件后缀名不同，具有scss和sass两种不同后缀名，scss 支持css3语法格式，所以的css3语法都通过，sass 被称为缩进格式（indented）用 “换行” 代替 “分号” 分隔属性。

简单写法和css是一样的

less 的写法

             通过换行符和空格来表达层级关系

css 写法

div{border:1px #f00 solid;}
div p{font-size:20px;} 

sass写法（常用）

div{
     border:1px #f00 solid;
     p{
       font-size:20px;  
       }
}    

less 写法 （不常用）

  div
      border:1px #f00 solid;
      p
        font-size:20px;  

sass的变量   

使用前需安装插件

在vscode中安装  插件

        easy sass

        easy less

        主要使用的是easy sass ，通过插件编译后的结果是会自动生成

        一个css文件和一个min.css压缩文件

声明变量 

 声明变量：

        通过关键字 $声明变量 ，$name 此时的name就是变量名

// 声明变量
$aa:300px;  //$aa指代的就是200px
$col:#f60;
$l:left;
.wp{
    width: $aa;
    height: $aa;
    background: $col;
}
.cont{
    // 声明变量
    $w:100px;
    width: $w;
    height: $w;
    border: 10px $col solid;
    margin-#{$l}:100px;
    padding-#{$l}:20px;
}

 变量名的命名方式

变量名的命名方式

             以数字，字母，下划线，_ ,短横线- 组合的字符作为变量名

             注意：只能以 字母和下划线_ 开头

       

        通过 #{} 插值语句可以在选择器或属性名中使用变量

        直接在属性中使用变量，sass会报错

        如 marign-$left:10px;  报错

        margin-#{$left}:10px;  正确写法

作用域 

全局作用域和局部作用域

全局作用域范围是整个sass文件，局部作用域范围是某一个选择器内部。

全局变量和局部变量

全局变量：声明在全局作用域内的变量，可以在任何地方使用该变量

局部变量：声明在局部作用域内的变量，只能在声明的地方使用。

sass的嵌套规则 

       Sass 的嵌套规则允许在样式规则中嵌套其他规则，以创建更清晰和结构化的样式层级结构。通过嵌套规则，可以避免编写重复的选择器，并使样式表更易读和维护。

下面是 Sass 嵌套规则的示例和说明：

.container {
  background-color: #f0f0f0;
  padding: 10px;

  h1 {
    font-size: 22px;
    color: #333;
  }

  p {
    margin: 5px 0;
    line-height: 1.5;
  }

  a {
    color: blue;
    text-decoration: none;
  }
}

         在这个示例中，.container 选择器是最外层的规则。在它的嵌套规则中，我们可以看到 h1、p 和 a 的样式规则。在这些嵌套规则中，选择器被嵌套在父选择器 .container 中。

编译后的 CSS 结果如下：

.container {
  background-color: #f0f0f0;
  padding: 10px;
}

.container h1 {
  font-size: 22px;
  color: #333;
}

.container p {
  margin: 5px 0;
  line-height: 1.5;
}

.container a {
  color: blue;
  text-decoration: none;
}

        可以看到，嵌套规则被正确地转换为了层叠的 CSS 规则。这样的结构使得样式表更加简洁，并更清晰地表示了选择器之间的层级关系。除了嵌套选择器，Sass 还支持在嵌套规则中使用父选择器标识符 &。通过 &，可以引用父选择器，并与其他选择器进行组合。

   例如，假设我们想为 .container 元素的链接样式添加一个悬停效果：

.container {
  background-color: #f0f0f0;
  padding: 10px;

  a {
    color: blue;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}

这将生成以下 CSS 规则：

.container a {
  color: blue;
  text-decoration: none;
}

.container a:hover {
  text-decoration: underline;
}

&:hover 使用了父选择器 .container 并与选择器 a 组合，生成了 .container a:hover 规则。

总的来说，Sass 的嵌套规则允许将样式规则嵌套在其他规则中，以创建更结构化的样式层级结构。嵌套规则还支持使用父选择器标识符 &，以引用父选择器并与其他选择器组合。这样的编写风格可以使样式表更易读和维护。

部分代码如下：

    
    
    
    


    
    

        
饿了
        
但是不知道吃啥哎
    

*{
    margin: 0;
    padding: 0;
}
$w:200px;
$col:#f60;
.wp{
   width: $w;
   height: $w;
   background: $col;
   h2,p{
    color: #fff;
   }
   h2{
    text-decoration: underline;
   }
   p{
    height: 100px;
    background: #ccc;
    transition: all 2s ;
   }
    margin: {
    top: 40px;
    right: auto;
    bottom: 30px;
    left: auto;
   }
    border: {
        width: 2px;
        style:solid ;
        color: #f00;
    }
    // &表示当前的父元素 .wp
    &:hover{
        background: pink;
    }
    &:hover p {
        background: rgb(227, 115, 134);
       
    }
}

混合器 

混合器的作用，是吧相同的css样式提取出来，单独设置成一个模块，使用方便

使用混合器

使用混合器 @mixin

        语法

        @mixin name{

            css样式代码

        }

        其中，name就是混合器的名字，他是一个变量，命名规则同 变量的命名规则

        使用混合器

        @include name; 通过@include 把混合器的名字引入到使用混合器的位置

        复杂的混合器

        混合器也可以接受参数

 定义/使用

1.定义混合器

              @mixin name（arg1，arg2，arg3.。。）{

                   css样式代码

              }

              （）中的arg 列表，就是混合器的参数，由于他们只是形式上的参数，不具备

              任何意思，因此称为 形参列表

              注意：参数的本质也是变量，因此需要$开头

2.使用混合器

              @include name（val1，val2，。。。）

              val列表，是实际上的数据，因此称为实参列表

        形参和实参是一一对应的

下面是部分代码 

*{
    margin: 0;
    padding: 0;
}
$w:200px;
$m:20px;

// 创建一个混合器
@mixin rule{
    width: 200px;
    height: 200px;
    margin: 20px auto;
}
@mixin runing($a,$b,$c) {
    width: $a;
    height: $b;
    margin: $c auto;
     
}
.wp1{
    // 使用混合器
    @include rule;
    background: pink;
}
.wp2{
    @include rule;
    background: rgb(241, 30, 65);
}
.wp3{
    @include runing($w,$w ,$m );
    background: rgb(30, 93, 241);
}
.wp4{
    @include runing($w, $w,$w );
    background: rgb(30, 241, 237);
}