欢迎光临
六楼实验室
网站运行 3004天 | 文章 85 篇 | 分类 15 个 | 标签 54 个

【笔记】Less基础知识点

安装和使用Less

  1. 安装 npm install -g less
  2. 编译 lessc styles.less > styles.css

变量

        /* 定义变量 */
        @background-color:  #ffffff;
        @text-color:  #1A237E;

        p {
          /* 使用变量 */
          background-color:  @background-color;
          color:  @text-color;
          padding:  15px;
        }

        ul {
          background-color:  @background-color;
        }

        li {
          color:  @text-color;
        }

Mixins

        #circle {
          background-color:  #4CAF50;
          border-radius:  100%;
        }

        #small-circle {
          width:  50px;
          height:  50px;
          /* 引用#circle的样式 */
          #circle
        }

        /*  id 为 circle1 的元素不会应用此样式 */
        #circle1() {
          background-color:  #4CAF50;
          border-radius:  100%;
        }

        #big-circle {
          width:  100px;
          height:  100px;
          /* 引用#circle1的样式 */
          #circle1
        }

        /* Mixins可以定义参数,如果不传参,默认是25  */
        #circle2(@size: 25px) {
          background-color:  #4CAF50;
          border-radius:  100%;

          width:  @size;
          height:  @size;
        }

        #big-circle2 {
          width:  100px;
          height:  100px;
          /* 引用#circle2的样式 */
          #circle2(100px)
        }

嵌套

注:嵌套时使用的变量会从当前层向上层查找,直到找到

        ul{
          background-color:  #03A9F4;
          padding:  10px;
          list-style: none;

          li {
            background-color:  #fff;
            border-radius:  3px;
            margin:  10px  0;
          }
        }

会被转换为

        ul {
          background-color:  #03A9F4;
          padding:  10px;
          list-style: none;
        }
        ul li {
          background-color:  #fff;
          border-radius:  3px;
          margin:  10px  0;
        }

运算

        @div-width: 100px;
        @color: #03A9F4;

        div {
          height:  50px;
          display:  inline-block;
        }

        #left {
          width:  @div-width;
          background-color:  @color  -  100;
        }

        #right{
          width: @div-width * 2;
          background-color: @color;
        }

函数

        @var:  #004590;

        div{
          height:  50px;
          width:  50px;
          background-color:  @var;

          &:hover {
            background-color: fadeout(@var,  50%)
          }
        }

编译为

        div {
          height:  50px;
          width:  50px;
          background-color:  #004590;
        }
        div:hover {
          background-color: rgba(0,  69,  144,  0.5);
        }
赞(0) 打赏
未经允许不得转载:六楼实验室 » 【笔记】Less基础知识点
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

六楼实验室 · 矿软科技

六楼实验室矿软科技

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

css.php