• 博客园logo
  • 会员
  • 周边
  • 新闻
  • 博问
  • 闪存
  • 众包
  • 赞助商
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录

Yancy00

  • 博客园
  • 联系
  • 订阅
  • 管理

公告

View Post

less-运算

 //注意:
 //   运算时. 数值和单位之间不能有空格
 //   减法操作符号左右要留空格.
 //   除法要用括号括起来.
 //   加,减 之前会自动进行单位换算. 以左侧操作数的单位为准.
 //   例如: `@base: 2cm * 3mm; // 结果是 6cm`
 //   如果单位换算无效或失去意义,则结果就没有单位.
 //   甚至可以对颜色进行算术运算. background-color: #112244 + #111; // 结果是 #223355

@width: 400px;
@height: @width - 100; // 减法运算 要有空格.
@font-size: 20px;

.box1 {
    width: @width;
    height: @height;
    line-height: @height;
    background-color: #eee;
    overflow: auto;
    border: 1px solid lightgray;
    border-radius: 4px;

    //通过margin让子元素居中对齐
    .inner {
        width: (@width/10);  //除法要有括号,才可以计算
        height: (@width/10);
        background-color: lavenderblush;
        margin: ((@height - (@width/10))/2) auto;
        filter: ~'alpha(opacity:50)';  // 不让less编译原样输出到css
    }
}

image

posted on 2023-09-15 14:10  Yancy00  阅读(37)  评论(0)    收藏  举报

刷新页面返回顶部
 
博客园  ©  2004-2026
浙公网安备 33010602011771号 浙ICP备2021040463号-3