less学习

 

相比css  Less新增概念:

        1、变量(variables):

                 在less中通过@关键字定义变量: 如 @width: 100px;

                 引用 div{ width: @width }  编译后: div{ width: 100px };

        2、混合(mixin):

                 定义一个类的样式: .header{ width:100%  }

                 在其他样式中使用混合包入.header的属性

                 footer{ .header() } 编译后: footer{  width:100%  }

        3、嵌套(nesting)

                 用类似于html组织结构代替层叠,使css代码父子结构更为清晰

                 如: #header .logo{ width: 100px } 用less的嵌套表示则为 

                 #header{

                            .logo{ width: 100px }

                 }

                还可以加上伪类选择器 (& 表示当前选择器的父级),以下是一个经典的 clearfix 技巧

               

                .clearfix {

                                display: block;

                                zoom: 1;

                      &:after {

                                content: " ";

                                display: block;

                                font-size: 0;

                                height: 0;

                                clear: both;

                                visibility: hidden;

                                }

                }

        @规则与冒泡

              冒泡:当在使嵌套中使用@规则时,@规则会被放在嵌套最外层,但与@规则同级的其他属性相对位置不变

                     如 .logo{

                                  display: inline-block;

                                  @media(min-width:768px){

                                            width: 100px;

                                            height: 100px;

                                   } 

                                   @media(min-width:1280px){

                                           width: 200px;

                                           height:200px;

                                    }

                           }

        4、运算

                   可以使用 +,-,*,/对任何数字,颜色,变量进行运算

                   如: @width-1:10px;

                         @width-2: @width-1 * 2 // @width: 20px

                    不同单位会进行换算,计算结果单位以左侧操作数为准

                         @width-1:5cm;

                         @width-2:10mm;

                         @width-3:@width-1 + @width-2 //@width-3: 3cm;

                   乘除法不作单位转换

                         @width-1:5cm;

                         @width-2:2cm;

                         @width-3:width-1 * width-2; // width-3:10cm

                    calc()中的表达式不进行换计算

                        @baseWidth: 10%

                         width:calc(baseWidth+(50vh-20px)) // calc(10%+(50vh-20px))

       5、转义

                   转义(Escaping)允许你使用任意字符串作为属性或变量值。任何 ~"anything" 或 ~'anything' 形式的内容都将按原样输出

                  

@min768: ~"(min-width: 768px)";
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

编译为:

@media (min-width: 768px) {
  .element {
    font-size: 1.2rem;
  }
}

注意,从 Less 3.5 开始,可以简写为:

@min768: (min-width: 768px);
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

       6、Less 内置了多种函数用于转换颜色、处理字符串、算术运算等,详细请见https://less.bootcss.com/functions/

       7、命名空间和访问符

                    当对可重复利用的样式进行封装时,可以对给这些样式进行分组给定命名空间(以下代码命名空间为bundle,bundle后加()则这组封装好的样式规则集不会输出在css中)

#bundle() {
  .button {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover {
      background-color: white;
    }
  }
  .tab { ... }
  .citation { ... }
}

现在,如果我们希望把 .button 类混合到 #header a 中,我们可以这样做:

         8、作用域

          Less 中的作用域与 CSS 中的作用域非常类似。首先在本地查找变量和混合(mixins),如果找不到,则从“父”级作用域继承。

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}

          与 CSS 自定义属性一样,混合(mixin)和变量的定义不必在引用之前事先定义。因此,下面的 Less 代码示例和上面的代码示例是相同的:

@var: red;

#page {
  #header {
    color: @var; // white
  }
  @var: white;
}
#header a {
  color: orange;
  #bundle.button();  // 还可以书写为 #bundle > .button 形式
}

              

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值