Acss层代码实现

最新推荐文章于 2022-05-10 23:36:05 发布

wdadwa565

最新推荐文章于 2022-05-10 23:36:05 发布

阅读量121

点赞数

本文链接：https://blog.csdn.net/wdadwa565/article/details/118880833

版权

让样式极限复用
解决Acss无语义化缺点:属性选择器
Settings 与Acss层的关系

 ACSS
    .f1 {
float: left;}
.fr{
float: right;
}
a.page
<div class="fl fr fz30 m-1-8"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>

b.page
<p class="f1"></p>
<main class="fl"></main>

解决acss 语义化问题
<template>
//没解决之前
<div class="f1 ml-4 my-2 h-32 p-4 ..."></div>
//使用属性选择器解决问题解决之后
[f1] {
float: left;}
<div
class "media"
fl ml-4 my-2 h-32 p-4></div>
</template>

ACSS如何找？类似于setting层样式出现样式次数多了也可以做成ACSS 字体颜色

分析设计稿，那个样式多次也要做成acss

在颜色实现上面我们用acss 实现字体颜色和边框颜色边框颜色主要实现-base 还有层级

用sass的写法控制间距以及字体大小
间距的写法在这里插入代码片

$direction: (l left, r right, t top, b bottom);
@for $i from 1 through 30 {
  @each $type in m, p, v, h, a{
    
    @if $type == m {
      @each $d in $direction{
        [m#{nth($d, 1)}#{$i}] {
          margin-#{nth($d, 2)}: #{$i}px;
        }
      }
    }

    @else if $type == p {
      @each $d in $direction{
        [p#{nth($d, 1)}#{$i}] {
          padding-#{nth($d, 2)}: #{$i}px;
        }
      }
    }

    @else if $type == h {
      [ph#{$i}] {
        padding-left: #{$i}px;
        padding-right: #{$i}px;
      }

      [mh#{$i}] {
        margin-left: #{$i}px;
        margin-right: #{$i}px;
      }
    }

    @else if $type == v {
      [pv#{$i}] {
        padding-top: #{$i}px;
        padding-bottom: #{$i}px;
      }
    }

    @else {
      [pa#{$i}] {
        padding: #{$i}px;
      }
    }
  }
}

字体大小以及等比比例大小缩放使用

@for $i from 1 through 10 {
  [radius#{$i}] { 
    border-radius: #{$i}Px;
    overflow: hidden;
  }
}

[circle] {
  border-radius: 100rem;
}

背景色渐变可以使用

@each $i in 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1 {
  [bga#{$i * 10}] { 
    background-color: rgba(0, 0, 0, $i);
  }
}

@each $style in (primary $background-color-primary, secondary $background-color-secondary, tertiary $background-color-tertiary) {
  [bg-#{nth($style, 1)}] {
    background-color: #{nth($style, 2)};
  }
}