微信小程序 教程之WXSS

下面是关于“微信小程序 教程之WXSS”的完整攻略：

1. 什么是WXSS

WXSS是一种类似CSS的样式语言，但是在和小程序交互时，它有一些自己的独特规则。在小程序中，WXSS主要用于样式的设置，例如字体、颜色、背景等。与CSS不同的是，WXSS没有在当前标签中引用其他样式文件的概念，而是将所有的样式都写在同一个WXSS文件中。

2. WXSS使用方法

2.1 在小程序中添加样式文件

首先，在小程序的项目文件夹中，需要创建一个与wxml文件同名的.wxss样式文件。由于WXSS会按照css的写法来书写样式，所以从熟悉的CSS和HTML过渡到WXSS的人会非常简单。当创建了样式文件之后，就可以在wxss文件中书写样式了。

2.2设置基础样式

在小程序开发中，我们一般会设置一些基础样式，例如字体大小、颜色、背景等等。以下是设置字体大小和颜色的示例：

/* 设置字体大小 */
.page_container {
   font-size: 28rpx;
}

/* 设置字体颜色 */
.font-color {
  color: #333333;
}

• 注意字体大小的单位是“rpx”，而不是像素。因为在小程序中，需要根据不同设备的屏幕宽度进行自适应。
• 注意字体颜色设置的方式。在CSS中，颜色可以使用英文单词、RGB、十六进制等方式表示，而在WXSS中只能使用十六进制。

2.3 开启样式隔离

在小程序开发中，默认情况下，所有的WXSS样式都是全局的。这意味着，如果给多个页面或组件设置相同的样式，这些元素就会受到样式的影响。因此，为了避免这种情况，我们需要将样式隔离。以下是开启样式隔离的示例：

/** 页面样式 **/
.page_container {
  font-size: 22rpx;
  background-color: #ffffff;
}

/** 子组件样式 **/
.comp-container >>> .comp-text {
  font-size: 28rpx;
}

在上面的样式代码中，.page_container表示页面所在的容器。而>>>这个符号则表示，后面的样式只对子组件生效。

2.4 继承样式的设置

在小程序中，可以通过设置样式继承的方式，来继承某个组件的样式或某部分样式。以下是实现样式继承的示例：

/** 基础样式 **/
.page_container {
  font-size: 22px;
  color: #000000;
}

/** 继承样式 **/
.text_container {
  @extend .page_container;
  border-bottom: 2rpx solid #7f7f7f;
}

在上面的代码中，我们在.text_container样式中使用了“@extend”命令，来继承.page_container样式。这样就可以避免重复代码，提高代码复用率。

3. WXSS的特殊用法

在WXSS的编写中，还有一些比较特殊的写法，下面介绍两个常用的特殊用法:

3.1 rpx和px的自动转换

在小程序中，我们需要使用“rpx”作为单位来设置页面元素的尺寸。但是在传统的CSS编写中，我们常常使用“px”来设置元素尺寸。这时，就需要进行单位转换。为了避免重复的转换费力费事，可以在WXSS文件中设置一个自定义函数，来实现px到rpx的转换：

/** 自定义rpx转换函数 **/
@function rpx($value){
  $rpx: $value / 750 * 100;
  @return #{$rpx}rpx;
}

/** 样式示例 **/
.page_container {
  width: rpx(100);
}

在上面的代码中，我们定义了一个名为“rpx”的custom function，它可以将传入的数值转换为小程序中的rpx值。

3.2 条件选择器

条件选择器是一个相对较新的CSS功能，可以通过满足条件来应用样式规则。在WXSS中，它的语法与CSS相同。以下是一个包含条件选择器的示例：

/** 条件选择器 **/
@if $condition {
  .page_container {
    font-size: 22px;
  }
} @else {
  .page_container {
    font-size: 26px;
  }
}

在上述代码中，我们使用了条件选择器@if来查看某个变量$condition是否满足某种条件，并将满足的样式应用到.page_container样式中。

综上所述，以上就是“微信小程序 教程之WXSS”的完整攻略和两个示例说明，希望对你有所帮助。