less语法/：active按下显示，移动端/

最新推荐文章于 2024-01-11 14:31:41 发布

喵帕斯_喵太

最新推荐文章于 2024-01-11 14:31:41 发布

阅读量1.8k

点赞数

分类专栏：移动端基础文章标签： css

本文链接：https://blog.csdn.net/miaopasi_poi/article/details/115502593

版权

移动端基础专栏收录该内容

2 篇文章 0 订阅

订阅专栏

混合 less 写法

示例①： HTML部分：

  <body>
    <div class="box01">
      绿野网成立于1998年底，是中国第一家，也是目前最大的一家户外旅行活动网站，在广大户外运动爱好者中拥有强大的影响力。
      2013年9月，绿野网经过15年的历史积累和近几年的商业化运营，被上市公司探路者(300005)战略投资。融资之后的绿野进入了一个高速发展的阶段，致力于建设和运营面向全球的户外运动和深度体验式旅行综合服务平台，成为国内领先、国际一流的的一站式户外旅行综合服务提供商。
    </div>

    <div class="box02">
      绿野网成立于1998年底，是中国第一家，也是目前最大的一家户外旅行活动网站，在广大户外运动爱好者中拥有强大的影响力。
      2013年9月，绿野网经过15年的历史积累和近几年的商业化运营，被上市公司探路者(300005)战略投资。融资之后的绿野进入了一个高速发展的阶段，致力于建设和运营面向全球的户外运动和深度体验式旅行综合服务平台，成为国内领先、国际一流的的一站式户外旅行综合服务提供商。
    </div>
  </body>
</html>

less部分：

// 多行超出省略号，需要用到 5 行固定写法的代码，大部分程序员都记不住这几行代码
// 2. 小括号内部的变量名，可以接收传递过来的值
.ell(@num) {
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  // 3. 类名内部就可以使用到传过来的值了
  -webkit-line-clamp: @num; /*要显示的行数*/
  -webkit-box-orient: vertical;
}

.box01 {
  width: 300px;
  font-size: 16px;
  line-height: 20px;
  height: 40px;
  border: 1px solid #000;
  // Less 允许直接通过 类名 实现代码的混入(混合)
  // 其实就是 把类名内部的代码复制一份过来了
  .ell(2);
}

.box02 {
  width: 400px;
  font-size: 16px;
  line-height: 20px;
  height: 60px;
  border: 1px solid #000;
  // 1. 在类名后面加括号，就可以传递值
  .ell(3);
}

定义变量，调用变量

// 定义变量：存储一个值
@mycolor: #5eb69c;

// 调用变量：使用这个值
.box {
  color: @mycolor;
  border: 1px solid @mycolor;
  a:hover {
    color: @mycolor;
  }
}

less运算

.box {
  // CSS 的运算：浏览器端计算 (推荐使用，动态计算)
  // 注意：calc 做加减法计算的时候，加减号两边至少留一个空格
  width: calc(750px + 2vw);
  // LESS 的运算：工具内部计算，CSS 得到固定的结果
  height: (750px + 2vw); // 752px
  background-color: pink;
}

less语法嵌套和引用符号

.box {
  width: 200px;
  height: 200px;
  background-color: pink;
  // & 符号可以实现选择器的引用
  // 最终生成   .box:hover{ }
  &:hover {
    background-color: skyblue;
  }
}
.goods {
  .goods-item {
    border: 1px solid #000;
    // .goods-item:nth-child(1)
    //  注意 & 符号和 : 冒号是紧密相连的，这样生成的 css 才是紧密相连的
    &:nth-child(1) {
      background-color: skyblue;
    }
    &:nth-child(2) {
      background-color: slateblue;
    }
    &:nth-child(3) {
      background-color: hotpink;
    }
  }
}

手指按下的状态，在移动端可以用 :active 表示

:active代表按下去时候的状态。移动端使用。

喵帕斯_喵太

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
less语法/：active按下显示，移动端/

混合 less 写法示例①： HTML部分： <body> <div class="box01"> 绿野网成立于1998年底，是中国第一家，也是目前最大的一家户外旅行活动网站，在广大户外运动爱好者中拥有强大的影响力。 2013年9月，绿野网经过15年的历史积累和近几年的商业化运营，被上市公司探路者(300005)战略投资。融资之后的绿野进入了一个高速发展的阶段，致力于建设和运营面向全球的户外运动和深度体验式旅行综合服务平台，成为国内领先、国际
复制链接

扫一扫