发布于 由admin

CSS `Sass/Less` 编译器深度：Mixin, Function, Placeholder Selector, Extend

各位观众，各位朋友，大家好！今天咱们来聊聊CSS预处理器里那些让人爱恨交加的家伙们：Mixin、Function、Placeholder Selector 和 Extend。别怕，虽然名字听起来挺高深，但其实个个都是能提升你CSS功力的好帮手。咱们尽量用大白话把它们扒个底朝天，保证你听完之后，腰不酸了，腿不疼了，写CSS也更有劲儿了！

开场白：CSS预处理器的江湖地位

在CSS的世界里，如果你还只会老老实实一行行地写，那你就Out啦！CSS预处理器，就像是给CSS开了个外挂，让你能用更简洁、更模块化的方式来写样式。Sass和Less是其中最流行的两位大侠，它们都提供了变量、Mixin、嵌套、函数、继承等功能，让CSS写起来更像编程，而不是简单的堆砌。今天我们重点聊聊Mixin、Function、Placeholder Selector 和 Extend，这四个家伙是提高代码复用性和可维护性的关键。

第一回合：Mixin——代码复用的万金油

Mixin，顾名思义，就是把一些样式混入到其他样式里。你可以把它想象成一个菜谱，里面写好了各种食材和烹饪方法，你需要的时候直接拿来用，省时省力。

  • Sass中的Mixin

    在Sass里，Mixin用@mixin定义，用@include调用。

    // 定义一个Mixin，用来设置圆角
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

// 使用Mixin
.box {
  width: 200px;
  height: 100px;
  background-color: #eee;
  @include border-radius(10px); // 调用Mixin
}

    编译后的CSS：

    .box {
  width: 200px;
  height: 100px;
  background-color: #eee;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

    Mixin的优势：

    • 代码复用： 避免重复编写相同的样式代码。
    • 易于维护： 修改Mixin，所有引用它的地方都会自动更新。
    • 参数化： 可以传递参数，让Mixin更加灵活。

    Mixin进阶：带参数的Mixin

    Mixin最强大的地方在于它可以接收参数。这就像是给菜谱增加了调料，你可以根据自己的口味来调整。

    // 定义一个带参数的Mixin，用来设置阴影
@mixin box-shadow($x, $y, $blur, $color) {
  -webkit-box-shadow: $x $y $blur $color;
  -moz-box-shadow: $x $y $blur $color;
  box-shadow: $x $y $blur $color;
}

// 使用带参数的Mixin
.button {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  @include box-shadow(2px, 2px, 5px, rgba(0, 0, 0, 0.3)); // 调用带参数的Mixin
}

    编译后的CSS：

    .button {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

  • Less中的Mixin

    在Less里，Mixin的定义和调用方式与Sass类似，但语法略有不同。

    // 定义一个Mixin
.border-radius(@radius) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

// 使用Mixin
.box {
  width: 200px;
  height: 100px;
  background-color: #eee;
  .border-radius(10px); // 调用Mixin
}

    编译后的CSS：

    .box {
  width: 200px;
  height: 100px;
  background-color: #eee;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

    Less的Mixin进阶：命名空间

    Less的命名空间功能可以让你更好地组织Mixin，避免命名冲突。

    // 定义一个命名空间
#namespace() {
  .border-radius(@radius) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
  }
}

// 使用命名空间中的Mixin
.box {
  width: 200px;
  height: 100px;
  background-color: #eee;
  #namespace > .border-radius(10px); // 调用命名空间中的Mixin
}

    编译后的CSS：

    .box {
  width: 200px;
  height: 100px;
  background-color: #eee;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

第二回合：Function——自定义CSS的瑞士军刀

Function，也就是函数，可以让你在CSS里进行一些简单的计算和逻辑判断。你可以把它想象成一个工具箱，里面有各种各样的工具，可以帮你解决各种各样的CSS问题。

  • Sass中的Function

    在Sass里，Function用@function定义，用function-name()调用。

    // 定义一个函数，用来计算颜色亮度
@function lightness($color) {
  @return lightness($color); // 直接使用Sass内置的lightness函数
}

// 使用函数
.text {
  color: lighten(#007bff, 20%); // 使用Sass内置的lighten函数
  background-color: darken(#007bff, 20%); // 使用Sass内置的darken函数
}

.box {
  background-color: #007bff;
  color: if(lightness(#007bff) > 50%, black, white); // 使用自定义的lightness函数和Sass内置的if函数
}

    编译后的CSS：

    .text {
  color: #66b3ff;
  background-color: #0056b3;
}

.box {
  background-color: #007bff;
  color: white;
}

    Function的优势：

    • 代码复用： 避免重复编写相同的计算逻辑。
    • 易于维护： 修改Function，所有引用它的地方都会自动更新。
    • 逻辑判断： 可以进行简单的逻辑判断，让CSS更加智能。

    Function进阶：自定义颜色函数

    你可以用Function来创建自定义的颜色函数，比如创建一个函数，用来生成一系列相似的颜色。

    // 定义一个函数，用来生成一系列相似的颜色
@function tint-shade($color, $amount) {
  @if $amount > 0 {
    @return mix(white, $color, $amount);
  } @else if $amount < 0 {
    @return mix(black, $color, abs($amount));
  } @else {
    @return $color;
  }
}

// 使用函数
.button {
  background-color: tint-shade(#007bff, 20%); // 变亮20%
  border-color: tint-shade(#007bff, -20%); // 变暗20%
}

    编译后的CSS：

    .button {
  background-color: #3399ff;
  border-color: #0056b3;
}

  • Less中的Function

    在Less里，Function的定义和调用方式与Sass类似，但语法略有不同。Less也提供了大量的内置函数，比如lighten、darken、saturate等等。

    // 定义一个函数，用来计算颜色亮度
.lightness(@color) {
  @return lightness(@color); // 直接使用Less内置的lightness函数
}

// 使用函数
.text {
  color: lighten(#007bff, 20%); // 使用Less内置的lighten函数
  background-color: darken(#007bff, 20%); // 使用Less内置的darken函数
}

.box {
  background-color: #007bff;
  color: if(lightness(#007bff) > 50%, black, white); // 使用自定义的lightness函数和Less内置的if函数
}

    编译后的CSS：

    .text {
  color: #66b3ff;
  background-color: #0056b3;
}

.box {
  background-color: #007bff;
  color: white;
}

    Less的Function进阶：Guard条件

    Less的Guard条件可以让你在Function里进行更复杂的逻辑判断。

    // 定义一个函数，用来判断颜色是否为深色
.is-dark(@color) when lightness(@color) < 50% {
  @result: true;
}
.is-dark(@color) when lightness(@color) >= 50% {
  @result: false;
}

// 使用函数
.box {
  background-color: #007bff;
  color: if(.is-dark(#007bff), white, black); // 使用自定义的is-dark函数
}

    编译后的CSS：

    .box {
  background-color: #007bff;
  color: white;
}

第三回合：Placeholder Selector——优雅的占位符

Placeholder Selector，也就是占位符选择器，是一种特殊的选择器，它不会被编译成CSS，只有在被@extend继承时才会生效。你可以把它想象成一个草稿，里面写好了一些样式，只有当你想用的时候才会把它变成正式的版本。

  • Sass中的Placeholder Selector

    在Sass里，Placeholder Selector用%开头定义，用@extend调用。

    // 定义一个Placeholder Selector
%button-base {
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

// 使用Placeholder Selector
.button-primary {
  @extend %button-base; // 继承Placeholder Selector
  background-color: #007bff;
  color: white;
}

.button-secondary {
  @extend %button-base; // 继承Placeholder Selector
  background-color: #eee;
  color: #333;
}

    编译后的CSS：

    .button-primary, .button-secondary {
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

.button-primary {
  background-color: #007bff;
  color: white;
}

.button-secondary {
  background-color: #eee;
  color: #333;
}

    Placeholder Selector的优势：

    • 语义化： 可以清晰地表达样式之间的继承关系。
    • 减少冗余： 避免重复编写相同的样式代码。
    • 优化CSS： 编译后的CSS更加简洁，减少了代码量。

  • Less中没有Placeholder Selector

    Less没有原生支持Placeholder Selector，但你可以用Mixin来模拟类似的功能。

    // 定义一个Mixin
.button-base() {
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

// 使用Mixin
.button-primary {
  .button-base(); // 调用Mixin
  background-color: #007bff;
  color: white;
}

.button-secondary {
  .button-base(); // 调用Mixin
  background-color: #eee;
  color: #333;
}

    编译后的CSS：

    .button-primary {
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  background-color: #007bff;
  color: white;
}

.button-secondary {
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  background-color: #eee;
  color: #333;
}

    注意： 这种方式虽然实现了类似的功能，但编译后的CSS会包含重复的代码，不如Sass的Placeholder Selector高效。

第四回合：Extend——样式的继承大法

Extend，也就是继承，可以让一个选择器继承另一个选择器的所有样式。你可以把它想象成基因遗传，子类继承了父类的特征，并且可以添加自己的新特征。

  • Sass中的Extend

    在Sass里，Extend用@extend调用。

    // 定义一个基础样式
.button {
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

// 使用Extend
.button-primary {
  @extend .button; // 继承.button的所有样式
  background-color: #007bff;
  color: white;
}

.button-secondary {
  @extend .button; // 继承.button的所有样式
  background-color: #eee;
  color: #333;
}

    编译后的CSS：

    .button, .button-primary, .button-secondary {
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

.button-primary {
  background-color: #007bff;
  color: white;
}

.button-secondary {
  background-color: #eee;
  color: #333;
}

    Extend的优势：

    • 语义化： 可以清晰地表达样式之间的继承关系。
    • 减少冗余： 避免重复编写相同的样式代码。
    • 优化CSS： 编译后的CSS更加简洁，减少了代码量。

  • Less中的Extend

    在Less里，Extend的调用方式与Sass类似，但语法略有不同。

    // 定义一个基础样式
.button {
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

// 使用Extend
.button-primary:extend(.button) { // 继承.button的所有样式
  background-color: #007bff;
  color: white;
}

.button-secondary:extend(.button) { // 继承.button的所有样式
  background-color: #eee;
  color: #333;
}

    编译后的CSS：

    .button,
.button-primary,
.button-secondary {
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}
.button-primary {
  background-color: #007bff;
  color: white;
}
.button-secondary {
  background-color: #eee;
  color: #333;
}

Mixin vs. Extend：一场没有硝烟的战争

Mixin和Extend都可以用来实现代码复用，但它们之间有什么区别呢？

特性 Mixin Extend
工作方式 将样式代码复制到调用它的地方 将选择器添加到已存在的样式规则中
CSS代码量 可能生成重复的CSS代码 生成更简洁的CSS代码，避免重复
性能 可能影响性能，因为CSS代码量增加 性能更好，因为CSS代码量减少
语义化 不太语义化，只是简单的代码复制 更语义化，可以清晰地表达样式之间的继承关系
适用场景 需要传递参数，并且样式代码比较复杂的情况 只需要继承样式，不需要传递参数，并且样式代码比较简单的情况

总结：选择合适的工具

Mixin、Function、Placeholder Selector 和 Extend 都是CSS预处理器里非常强大的工具，它们可以帮助你写出更简洁、更易于维护的CSS代码。但是，没有银弹，你需要根据具体的场景来选择合适的工具。

  • Mixin： 适合需要传递参数，并且样式代码比较复杂的情况。
  • Function： 适合需要进行简单的计算和逻辑判断的情况。
  • Placeholder Selector： 适合需要定义一些基础样式，并且希望避免生成多余的CSS代码的情况（Sass）。
  • Extend： 适合需要继承样式，并且不需要传递参数的情况。

好了，今天的讲座就到这里。希望大家听完之后，能够对Mixin、Function、Placeholder Selector 和 Extend 有更深入的了解，并且能够在实际项目中灵活运用它们，写出更优雅的CSS代码！ 感谢大家的收听！

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注