sass遍历，条件判断的用法（还是写下来方便找啊！）

Sass高级用法深入解析

在当今的前端开发工作中，CSS预处理器已经成为了我们不可或缺的工具之一。Sass（Syntactically Awesome Style Sheets）作为其中的佼佼者，以其强大的功能和直观的语法赢得了众多开发者的青睐。本文将深入探讨Sass的高级用法，帮助读者更好地利用这一工具提升开发效率。

内容概览

1. 变量与计算：深入解析Sass中的变量作用域、数据类型和计算功能。
2. 嵌套与混合：探讨Sass的嵌套规则和混合（mixin）的使用技巧。
3. 继承与扩展：如何利用Sass的@extend指令实现样式的继承和扩展。
4. 函数与控制指令：介绍Sass内置函数和@if、@for等控制指令的高级应用。
5. 分割与导入：讲解如何通过分割和导入（import）来组织和管理大型样式表。
6. 性能优化：分享在使用Sass时如何避免性能陷阱，提升网站性能。
7. 实战案例：通过实际案例演示Sass高级用法的综合应用。

1. 变量与计算

在Sass中，变量是用来存储样式信息的重要工具。它们不仅可以存储颜色、字体栈等常用样式值，还可以进行数学计算。

1.1 变量作用域

Sass中的变量具有作用域的概念。在选择器、mixin或函数中声明的变量，其作用域仅限于该选择器、mixin或函数内部。而在根级别声明的变量则是全局变量。

$font-stack: Helvetica, sans-serif; // 全局变量

.container {
  $bg-color: blue; // 局部变量
  background-color: $bg-color;
  font-family: $font-stack;
}

1.2 数据类型

Sass支持多种数据类型，包括数字、字符串、颜色、布尔值、空值、列表和映射。了解这些数据类型及其操作对于编写可维护和可扩展的Sass代码至关重要。

1.3 计算功能

Sass允许在变量和属性中使用计算表达式。这使得我们可以动态地生成样式值。

$base-font-size: 16px;
$font-scale-ratio: 1.2;

h1 {
  font-size: $base-font-size * $font-scale-ratio * 2;
}

2. 嵌套与混合

2.1 嵌套规则

Sass提供了CSS不具备的嵌套规则功能，这使得我们可以根据HTML结构的层次来组织样式代码，从而提高代码的可读性和可维护性。

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li {
    display: inline-block;
  }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

2.2 混合（Mixin）

混合允许我们定义可重用的CSS声明块，并在需要时通过包含混合的名称和参数来调用它们。

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}

.box {
  @include border-radius(10px);
}

3. 继承与扩展

Sass提供了@extend指令，允许一个选择器继承另一个选择器的所有样式规则。这对于保持代码的DRY（Don’t Repeat Yourself）原则非常有用。

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

4. 函数与控制指令

4.1 内置函数

Sass提供了一系列内置函数，用于处理颜色、字符串、数字等。这些函数可以在样式规则中直接使用，帮助我们更高效地编写CSS代码。

4.2 控制指令

Sass的控制指令（如@if、@for、@each和@while）允许我们根据条件或循环来生成样式。这使得我们可以编写更加动态和智能的样式代码。

@function calculate-rem($size) {
  $rem-size: $size / 16px;
  @return #{$rem-size}rem;
}

@each $i in 1, 2, 3, 4, 5 {
  .h#{$i} {
    font-size: calculate-rem(24px * $i);
  }
}

5. 分割与导入

随着项目规模的增长，将样式分割成多个小文件并通过@import导入它们变得非常重要。这有助于我们更好地组织代码，并使其更易于维护。

// _reset.scss
html, body, ul, ol {
  margin: 0;
  padding: 0;
}

// _typography.scss
h1 {
  font-size: 2em;
}

// main.scss
@import 'reset';
@import 'typography';

6. 性能优化

在使用Sass时，我们需要注意避免性能陷阱。例如，过度使用嵌套会增加选择器的特异性，可能导致难以覆盖样式。此外，滥用混合和扩展也会导致生成的CSS代码臃肿。因此，合理地使用这些功能并时刻关注输出CSS的质量是非常重要的。

7. 实战案例

Sass的变量、混合、函数和控制指令来创建一个灵活且可维护的样式表

让我们通过一个实战案例来演示Sass高级用法的综合应用。假设我们正在为一个响应式网站设计样式，我们可以利用Sass的变量、混合、函数和控制指令来创建一个灵活且可维护的样式表。

// _variables.scss
$breakpoints: (
  small: 600px,
  medium: 900px,
  large: 1200px
);

// _mixins.scss
@mixin respond-to($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    @media (min-width: #{map-get($breakpoints, $breakpoint)}) {
      @content;
    }
  }
  @else {
    @warn "No value found for `#{$breakpoint}` in $breakpoints map.";
  }
}

// main.scss
@import 'variables';
@import 'mixins';

.container {
  width: 80%;
  margin: 0 auto;

  @include respond-to(small) {
    max-width: 600px;
  }

  @include respond-to(medium) {
    max-width: 900px;
  }

  @include respond-to(large) {
    max-width: 1200px;
  }
}

在上面的案例中，我们首先定义了一个包含断点值的映射。然后，我们创建了一个混合，用于根据给定的断点生成媒体查询。最后，在main.scss文件中，我们导入了变量和混合，并使用它们为.container类创建了响应式样式。

sass遍历，条件判断的用法（还是写下来方便找啊！）

这个东西不经常写，语法千千万万很容易忘记，所以在这里记下来，以后找起来方便啊！

上代码：

/*
sass中变量的申明，这种形式类似与js中[{},{}...]数据格式，后面会进行便利，拿到key和value
*/
$pw: (
        tow:49%,
        three:32%,
        four:24%,
        five:19%,
);
.outmost {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  height: 280px;
}

.outmost-right {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  //height: 280px;
}

.w-panel {
  background-color: rgba(255, 255, 255, 0.15);
  width: 200px;
  padding: 8px;
  margin-right: 6px;
  overflow-x: hidden;
  overflow-y: auto;

  .title {
    font-size: 14px;
    position: relative;
    border-bottom: 1px rgba(0, 0, 0, 0.1) solid;
    padding-bottom: 5px;

    label {
      display: inline-block;
      transform: translateX(10px);
      color: #004422;
    }

    &:before {
      position: absolute;
      width: 3px;
      height: 12px;
      content: '';
      top: 1px;
      left: 0px;
      background-color: #0026de;
    }
  }

  .w-box-connent {
    position: relative;
    margin: 4px 0px 10px 0px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    //justify-content:space-between;
    //justify-content: space-evenly;
    .zhezhao {
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #0f7188b8;
      text-align: center;
      color: #ffffff96;
      font-size: 12px;

      .baifenbai {
        height: 100%;
        width: 0px;
        display: inline-block;
        vertical-align: middle;
      }
    }
/*
遍历前面申明的变量$pw
*/
    @each $c, $p in $pw {
    // #{$c}是sass里面变量的一种写法
      .w-box-#{$c} {
        display: flex;
        flex-direction: column;
        width: $p;
        background-color: rgb(0, 0, 0, 0.3);
        justify-content: center;
        align-items: center;
        padding: 10px 0px;
        color: white;
        margin-top: 1%;
        cursor: pointer;
        font-size: 12px;
        margin-right: 1%;
        
        // 条件编译的写法      
        @if $c == 'four' {
          &:last-child {
            display: none;
          }
        }

        &:hover {
          background-color: rgb(0, 0, 0, 0.4);
        }

        div i {
          margin-right: 2px;
        }
      }
    }
  }
}

自己写了容易忘系列。