小程序样式wxss03

1、尺寸单位

在小程序中，不需要主动引入样式文件
在小程序中使用 rpx单位或者是百分比
属性calc属性，css和wxss都是支持的
注意 ：
750和rpx中间也不要留空格
运算符的两边也不要留有空格

view{
    /* width: 200rpx; */
    height: 200rpx;
    font-size: 40rpx;
    background-color: aqua;
    width: calc(750rpx*100/375);
}

2、样式导入 使用@import来引入 路径只能写相对路径

@import "../../stylexs/common.wxss" 

3、选择器

小程序的选择器  在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素 

4、小程序中使用less

1、小程序支持 less ：Easy LESS插件

image.png
image.png

  { // 让小程序支持less 必须配置的 
    "less.compile": {
      "outExt": ".wxss"
    }
    ,
  新配置的时候 阅读很好的
    "files.associations": {
      "*.wxml":"html",
      "*.wxss":"css"
    }
  }

2、直接帮我生成一个wxss文件
定义一个less变量 使用变量

//  直接帮我生成一个wxss文件 
// 定义一个less变量 
@color:yellow;

text{
    // 使用变量 
    color: @color;
}
view{
    .view1{
        color: red
    }
}

// 导入 解决方案：少了 ； 少了 ；号呀 
@import "../../stylexs/reset.less";
// 这个是真的牛逼
view{
    color:@themeColor;
}