css--less--scss--pxTovw

阿里巴巴图标库

 1 public/index.html 中引入
  <link rel="stylesheet" href="//at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">

  使用 -- <i class="iconfont icon-phone"></i>   i 就是该图标

  修改 该图标的样式 伪类选择器
    .iconfont {
			font-size: 12px;
			position: relative;
			top: -2px;
		}

less 中

 ~~~~~~     ~ 选择器作用: 选择当前选择器 后面的所有元素
  四个 li 当前第一个  ~ li  指的是 后面三个
  整体 指的是 后面 3个li
   li {
    ~ li {
       a{
      color: red;
    }
    }
  }

  & 当前元素  可以拼接
  father{
    &-sun{}
  }
  father-sun

deep

  1 :deep() 空格   改样式一般在组件内部改
  某个深层元素 或其他深层样式时，需要使用

  没有作用域时 当使用其他封装好的组件时 更改 该组件 内 子组件  css样式  会改变该组件样式
  所有使用的地方都会修改
  :deep(.box){ }  可以解决这个问题
  这样只会在自己使用的地方修改 样式

  2 修改插槽过来的组件的样式：这就需要用到:slotted()
    <style scoped>
    :slotted(.box) {
    color:blue
   }
   </style>

 3 全局样式 通常都是新建一个style 标签 不加scoped 现在有更优雅的解决方案
   <style lang="less" scoped>
   :global(.box){
    color:red
  }
 4 css 中  使用响应式  数据  动态改变样式  比如换主题

  const color = ref('red')

  p {
  color: v-bind('color');
 }

 @click='color = pink'

scss

 1 定义变量   使用   $                    $score: 75;
  2 定义语法   使用   @                    @if $score{ width: 100px; }
  3 输出信息   使用   @debug               @debug " 输出信息 "
  4 输出错误   使用   @error               @error " 输出错误 "
  5 插值数据   使用   #{ }                 @debug " 输出信息 #{ $score }"    字符串中需要   css样式可以直接使用  无需插值

  6 定义类    使用    @mixin        @mixin test( $size,$flag ){
                                       with:$size;
                                       @if $flag{
                                        height:100px
                                       }
                                     }
  7 使用类    使用    @include + 类名   @include test(5px,true)

  8 遍历 list 使用    @each  in  --  每次循环都是 拿每一个 item   如果有  解构 在对 item 进行解构
    数组
    $sizes: 40px , 60px, 80px;
    @each $size in $sizes {
      @debug "$size "
      .img-#{ $size }{
        font-size: $size
      }
    }
    对象
    $sizes: { "name":"wn" };
     @each $k,$v in $sizes {
      @debug " $k,$v "
    }
    解构 -- 一次只能 解一个  40 null null  60  null null
    $sizes:40px , 60px, 80px;
    @each $a,$b,$c in $sizes {
      @debug " $a,$b,$c "
    }
    解构多值数组 一次一个  a,b 对应  k v
    $sizes: "name" "wn" ,"age" "18" ;
    @each $a,$b in $sizes {
      @debug " $a,$b "  -- name wn   age 18
    }

   $sizes:[ ["name" , "wn"],["age" , "18"] ] ;
   @each $a,$b in $sizes {
        @debug " $a,$b "  -- name wn   age 18
   }

   9  for 循环   使用 @for   through 闭合    to  前闭后开
     @for $i 1 through 4 {
        @debug $i       1 2 3 4
     }

      @for $i 1 to 4 {
        @debug $i       1 2 3
     }

     while 循环  使用 @while

     $i:1;
     @while $i <=6 {
        @debug $i       1 2 3 4 5 6
        $i:$i + 1;
     }

   10 Font-face 规则      黑体     宋体  不管怎么用都--不会侵权
                开源字体  思源中文  roboto英文字体
     使用电脑本地的 字体  不会侵权  电脑本地有就使用 没有就使用默认字体
     如果 加了                   电脑本地有就使用 没有去服务器下载  涉及 版权 传播,会侵权
     定义
     @font-face{
      font-family:微软雅黑;        定义该 字体 名字  提供给 font-family
      src:url("XXX")             本地没有时 使用此字体  一定要 保证  该字体 开源
     }
     使用
     div{
      font-family:微软雅黑;
     }

   11 Media   媒体查询

   @media (min-width:800px){
    body{
      background:red;
    }
   }

   12 Supports

   div{
     position:sticky;
     top:0;
   }
   有些浏览器不支持   所以使用 @supports  支持 就 起作用  不支持 就不生效

   @supports(position:sticky){
    div{
     position:sticky;
     top:0;
   }
   }

   13 函数  @function
   @function test($item){
     @return $item / 2
   }

   div{
    font-size:test(100px)
   }

px----vw

 1 npm install postcss-px-to-viewport-8-plugin -S
  2 在项目根目录新建一个 postcss.config.js文件


module.exports = {
	plugins: {
		autoprefixer: {
			overrideBrowserslist: [
				'Android 4.1',
				'iOS 7.1',
				'Chrome > 31',
				'ff > 31',
				'ie >= 8',
			],
		},
		'postcss-px-to-viewport-8-plugin': {
			unitToConvert: 'px', // 需要转换的单位，默认为"px"
			viewportWidth: 375, // 设计稿的视口宽度  750 /2 = 375
			unitPrecision: 5, // 单位转换后保留的精度
			propList: ['*'], // 能转化为vw的属性列表,!font-size表示font-size后面的单位不会被转换
			viewportUnit: 'vw', // 希望使用的视口单位
			fontViewportUnit: 'vw', // 字体使用的视口单位
			// 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
			// 下面配置表示类名中含有'keep-px'都不会被转换
			selectorBlackList: ['keep-px'],
			minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
			mediaQuery: false, // 媒体查询里的单位是否需要转换单位
			replace: true, //  是否直接更换属性值，而不添加备用属性
			exclude: [/node_modules/], // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
			include: [/src/], // 如果设置了include，那将只有匹配到的文件才会被转换
			landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
			landscapeUnit: 'vw', // 横屏时使用的单位
			landscapeWidth: 1338, // 横屏时使用的视口宽度
		},
	},
}