• LESS笔记


    1.安装

    电脑上已经安装有node.js

           打开命令行

    输入 npm install –g less

     

    2.配置webstrom

    Files→ settings → tools → file watchers

    点击“+”号按钮找到刚才安装的lessc.cmd文件选项点击添加

      

    配置输出路径:

    Output paths to refresh:

    $ProjectFileDir$css$FileNameWithoutExtension$.css

    3.语法:

    (1)Less支持所有的CSS语法

    (2)CSS只支持多行注释;Less支持多行/单行注释,单行注释不会被编译到CSS中去

    (3)Less支持变量(Variable):

    语法:  @变量名: 值;

    使用:  color: @变量名;

    变量值可以是任何合法的CSS样式值。

    (4)变量和常量可以进行四则算术运算

    如: +  -  *  /  %

    (5)Less支持样式混入(Mixin):

    .选择器1 { ... }

    .选择器2 { 

    ....

            .选择器1;

            ...

    }

    (6)样式混入时还可以指定参数

    .选择器1(@变量名1, @变量名2) { ... }

    .选择器2 { 

            ....

            .选择器1(值1, 值2);

            ...

    }

    (7)Less支持样式嵌套

    选择器1 {

            ...

            选择器2 {

                   ....

            }

    }

    编译后的结果:

    选择器1 {  ...  }

    选择器1  选择器2 { .... }

    (8)Less提供了几十个实用function,用于编写样式

    image-width(url)            返回指定图片的宽

           image-height(url)          返回指定图片的高

    ceil()         向上取整

    floor()        向下取整

    round()     四舍五入取整

    lighten(color,  30%)      返回一个变浅后的颜色

    darken(color,  30%) 返回一个变深后的颜色

    (9)Less支持文件包含

    CSS中也支持文件包含——不推荐使用——增加文件请求次数!

    Less中的文件包含推荐使用——在服务器端把被包含的文件组成一个大的CSS文件,客户端只要请求一次即可。

     Bootstrap的源代码分为多个.less文件,最终由bootstrap.less统一包含到一个文件中,生成 bootstrap.css!

  • 相关阅读:
    CentOS单用户模式下修改ROOT密码和grub加密
    CentOS配置SSH单向无密码访问
    物流追踪
    SpringBoot整合Redis及Redis
    小程序毫秒级倒计时(适用于拼团秒杀功能)
    foreach中的collection
    ArrayList和LinkedList的区别
    JavaScript 基础
    自用 goodsdetail
    JAVA常用处理数据
  • 原文地址:https://www.cnblogs.com/gaoxinwu/p/7966177.html
Copyright © 2020-2023  润新知