BootStrap之基础-5 BootStrap定制(LESS概述LESS语法)

Posted 2020-07-05

一、LESS概述

LESS概述

  - 动态样式语言

  - LESS 将 CSS 赋予了动态语言的特性

      - 变量、继承、运算、函数

  - LESS 既可以在 客户端上运行

  - 也可以借助Node.js或者Rhino在服务端运行

  - 变量

      - @color: #4D926F;

      - h2 { color: @color; }

  - 混合

      - .myStyle{}

      - H2{ .myStyle }

  - 嵌套规则

      - #header{h1{} p{a{}}}

  - 函数&运算

      - @color:#aabbcc; #header{ color: @color+#111; }

使用LESS

  - 在客户端使用

      - 引入样式文件

        <link rel="stylesheet/less" type="text/css" href="style.less">

      - 添加脚本文件

        <script src="less.js" type="text/javascript"></script>

      - 添加MIME

  - 在服务器端使用

      - 安装LESS

        $ npm install [email protected]

      - 使用

        $ lessc style.less > style.css

二、LESS语法

变量

  - 简单变量

  - 用变量名定义变量

混合

  - 在一个样式中调用另一个样式

  - 声明

  - 调用

带参混合

  - 像函数一样定义一个带参数的属性集合

  - 声明

  - 调用

  - @arguments变量

  - @arguments包含了所有传递进来的参数

  - 声明

  - 调用

  - 模式匹配

  - 引导

嵌套规则

  - LESS 可以让我们以嵌套的方式编写层叠样式

运算

  - 任何数字、颜色或者变量都可以参与运算

  - 数字

  - 颜色

  - 复合属性

函数

  - Color函数

  - Math函数

命名空间

  - 声明

  - 引用

作用域

  - 由内向外查找变量

注释

导入

总结：本章内容主要介绍了  BootStrap定制(LESS概述、LESS语法)

本文出自 “会飞的蚂蚁” 博客，谢绝转载！