发表于： 2019-11-16 13:40:12

1 1126

今日完成：


关于LESS常用的一些方法：


1、变量

定义： @name: value; (@black:#000;)

使用场合分3种：

常规使用： @name

作为选择器或属性名：@{name}

作为URL：“@{name}”


@header-height: 7vh;
header {
height: @header-height;
}

1)注意实项：

（1）变量是延迟加载的，可以不预先声明


header {
height: @header-height;
}

@header-height: 7vh;

2）变量的作用域

less会从当前作用域查找，没有将会往上查找。

如果在某级作用域找到多个相同名称的变量，使用最后定义的那个。


2、混合（mixins）

混合：一种将一系列属性从一个规则集引入到另一个规则集的方式

(1)普通混合：

.flex-items{
  display: flex;
  align-items: center;
}

header {
height: @header-height;
background-color: @header-bg-color;
.flex-items;
}

编译的结果：

.flex-items{
display:flex;
align-items: center;
}

header {
display: flex;
align-items: center;
height: @header-height;
background-color: @header-bg-color;
}

（2）不带参数的混合

从上面的代码发现，混合也被编译输出了

在混合名字后加上括号，编译后不再输出


.flex-items（）{
display: flex;
align-items: center;
}

header {
height: @header-height;
background-color: @header-bg-color;
.flex-items（）;
}

编译后的结果：

header {
display:flex;
align-items:center;
height: @header-height;
background-color: @header-bg-color;
}

（3）、带参数的混合

.flex-items（@items）{
display: flex;
align-items: @items;
}

header {
height: @header-height;
background-color: @header-bg-color;
.flex-items（center）;
}

编译后的结果：

header {
display:flex;
align-items:center;
height: @header-height;
background-color: @header-bg-color;
}

(4)带参数且有默认值的混合


.flex-items（@items：center）{
display: flex;
align-items: @items;
}

header {
height: @header-height;
background-color: @header-bg-color;
.flex-items;
}

#menu a {
.flex-center(first);
}

编译后的结果：

header {
display:flex;
align-items:center
height: @header-height;
background-color: @header-bg-color;

}

#menu a {
display:flex;
align-items: first;
}




使用less将任务五的个人主页重构：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>home</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scale=1">
    <link rel="stylesheet/less" type="text/css" href="../less/home.less">
    <script src="../less/less.js"></script>

</head>
<body>
<header>
    <div class="icon-btn"></div>
    <span>个人主页</span>


</header>

<div class="data">
    <img src="../img/photo.png" alt=".">

    <div class="base-massage">
        <span class="name">
            高素雅
        </span>
        <span class="age">51岁</span>

        <div class="address">
            <img src="../img/icon.png" alt=".">
            <span>北京.通州.果园</span>
        </div>


    </div>

</div>
<div class="skill">
    <div class="skill-line-leader">
        <div class="skill-line-icon"></div>
        <strong>专业技能</strong>
    </div>
    <div class="skill-line">
        <img src="../img/star.png" alt=".">
        <span class="b-color">住家</span>
        <div class="skill-1-icon"></div>
        <img src="../img/star.png" alt=".">
        <span class="b-color">不含餐</span>
    </div>

    <div class="skill-line">
        <span class="g-color">
            从业年限
        </span>
        <div class="skill-1-icon"></div>
        <span class="b-color">
            0~3年
        </span>
    </div>

    <div class="skill-line">
        <span class="g-color">
            工作时间
        </span>
        <div class="skill-1-icon"></div>
        <span class="b-color">
            全天
        </span>
    </div>

    <div class="skill-line">
        <span class="g-color">
            服务价格
        </span>
        <div class="skill-1-icon"></div>
        <strong class="r-color">
            25元/小时
        </strong>
    </div>

    <div class="text-line">
        <span class="g-color">
            自我介绍
        </span>
        <div class="skill-1-icon "></div>
        <p>
            可以洗衣、做饭、照顾老人在护工方面有5年的经验，经验丰富。
        </p>
    </div>
</div>

<button class="massage">
    留言
</button>
<button class="tel-connect">
    电话联系
</button>


</body>
</html>
html, body {
  padding: 0;
  margin: 0;
}




@header-height: 7vh;
@data-height: 26vh;
@skill-height: 48vh;
@skill-line-height: @skill-height * 0.167;
@skill-star-size: @skill-line-height * 0.27;

@header-bg-color: #5fc0cd;
@border-color:#e1e5e7;
@icon-btn--left: 4.45vw;

@header-font-size: 36px;
@header-color: #ffffff;

@data-background: "../img/back.png";
@photo-img-left: 4.2vw;

@base-massage-height: @data-height * 0.32;
@age-font-size: @base-massage-height * 0.27;


#flex-center(@items:center) {
  display: flex;
  align-items: center;
}


#absolute-center(@top:50%,@left:50%) {
  & {
    position: relative;
  }
  position: absolute;
  top: @top;
  left: @left;
  transform: translate(-50%, -50%);
}

//三角按钮
#icon-btn(@length:15px,@border-size:4px,@rotate:-45deg,@color:#ffffff) {
  width: @length;
  height: @length;
  border-top: @border-size solid @color;
  border-left: @border-size solid @color;
  transform: rotate(@rotate);
}


header {
  height: @header-height;
  background-color: @header-bg-color;
  #flex-center();

  .icon-btn {
    #icon-btn(@length: @header-height * 0.3);
    position: relative;
    left: @icon-btn--left;
  }

  & span {
    display: inline-block;
    margin: 0 auto;
    font-size: @header-height * 0.4;
    color: @header-color;
  }
}

.data {
  height: @data-height;
  background: url(@data-background) no-repeat;
  background-size: 100% ;
  #flex-center;

  @media only screen and (max-width: 600px){
    background-size: 100% @data-height !important;
  }

  & > img {
    margin-left: @photo-img-left;
    height: @data-height * 0.52;

    @media only screen and (max-width: 600px){
      height: 40% !important;
    }

  }
  .base-massage {
    height: 32%;
    color: #FFFFFF;
    margin-left: 5.6vw;

    font-size: @base-massage-height * 0.35;
    span.name {
      margin-right: 1em;
    }
    span.age {
      font-size:@age-font-size;
    }

    .address{
      img{
        height: @base-massage-height * 0.22;
      }
      span {
        font-size: @base-massage-height * 0.23;
      }
    }

  }

}

.skill {
  height: @skill-height;

  .skill-line-leader {
    height: @skill-line-height;
    border-bottom: 1px solid @border-color;
    #flex-center;

    .skill-line-icon {
      height: @skill-line-height * 0.27;
      width: 3px;
      background: #5fc0cd;
      margin-left: 4.2vw;
      margin-right: 3.56vw;
      border-radius: 5px;
    }

    strong {
      font-size: @skill-line-height * 0.33;
    }
  }
  .text-line {
    .skill-line;
  }
  @media only screen and (max-width: 600px){
    .text-line {
      height: auto;
    }
  }



  .skill-line {
    .skill-line-leader;
    margin-left: 4.45vw;
    font-size: @skill-line-height * 0.32;
    padding-left: 28px;

    .b-color {
      color: #000000;
      margin-left: 8px;
    }

    .g-color {
      color: #999999;
      margin-right: 8px;
      white-space: nowrap;
    }



    @media only screen and (max-width: 600px){
      .g-color {
        white-space: initial !important;
      }
    }



    .r-color {
      color: #e26163;
      margin-left: 8px;
    }

    .skill-1-icon{
      display: inline-block;
      height: @skill-line-height * 0.26;
      width: 1px;
      background-color: @border-color;
      margin: 0 17px;
    }

    img {
      height: @skill-star-size;
    }

    p {
      padding-right: 8vw;
      font-size: @skill-line-height * 0.28;
    }
  }

}

button {
  width: 43vw;
  height: 6.8vh;
  border: 2px solid #5fc0cd;
  font-size: 3vh;
  position: fixed;
  bottom: 3.5vh;
  border-radius: 5px;
}

.massage{
  left: 5.3vw;
  background-color: #FFFFFF;
  color: #5fc0cd;

}

.tel-connect {
  right:5.3vw ;
  background-color: #5fc0cd;
  color: #FFFFFF;
}




虽然刚开始使用less，可能有些地方还可以继续优化。

但明显可以感到代码写起来顺畅多了。


收获：

对less的使用有了进一步的了解。


遇到的问题：

关于自适应布局这块，思考了一下，举一个按钮的例子

它的宽度和margin间距可以用vw单位，它的高度可以用vh单位。

那按钮里的字体大小应该相对于谁呢？ 屏幕宽度？ 屏幕高度？

如果相对于宽度，那在屏幕很宽的情况下，会出现字体的高度会大于按钮的高度。因为按钮的高度是相对于屏幕高度的。

如果相对于高度，那在屏幕很窄的情况下，文字会很挤，甚至按钮容纳不下。

所以我想知道在自适应的情况下，字体的大小一般是怎么处理的 ？


明日计划：

继续使用less重构任务六（护工）

按照相同标准重写任务七的样式


上一篇
返回列表 返回列表
下一篇
现在开始，找个师兄带你入门
评论

    分享到

    技能树  |  IT修真院

    关于我们 ｜ 联系我们 ｜ 合作公司

    移动端下载

    友情链接

    短信验证码     

    微信公众平台

    Copyright © 2015 北京葡萄藤信息技术有限公司 All Rights Reserved | 京ICP备15035574号-1