Bootstrap框架--Less

最新推荐文章于 2024-06-20 09:42:44 发布

闵农

最新推荐文章于 2024-06-20 09:42:44 发布

阅读量290

点赞数

分类专栏： Bootstrap 文章标签： less

本文链接：https://blog.csdn.net/Archer1724/article/details/105315915

版权

Bootstrap 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

1.变量（Variables）
2.运算（Operations）
3.混合（Mixins）
4.嵌套（Nesting）
5.转义（Escaping）
6.函数（Functions）
7.映射（Maps）

Less （Leaner Style Sheets 的缩写）是一门向后兼容的 CSS 扩展语言。LESS 为 CSS 赋予了动态语言的特性，如变量、继承、运算、函数。LESS 既可以在客户端上运行 (支持 IE 6+、Webkit、Firefox)，也可以借助 Node.js 或者 Rhino 在服务端运行。
因为 Less 和 CSS 非常像，因此很容易学习。而且 Less 仅对 CSS 语言增加了少许方便的扩展，这就是 Less 如此易学的原因之一。

在浏览器环境中使用 Less ：(注意链接的顺序)

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" ></script>

在 Node.js 环境中使用 Less ：

npm install -g less
> lessc styles.less styles.css

1.变量（Variables）

用@声明变量（分为全局/局部变量）

//全局变量
@width:100px;
@height:100px;
@borderColor: red;
.block{
//局部变量,只能在这里面可以调用
  @bgcolor:#444;
//变量的调用方式
  width: @width;
  height: @height;
  border: solid 1px @borderColor;
  background-color:@bgcolor;
}

2.运算（Operations）

使用运算符时，尽量与变量之间有空格，避免像减号会被识别为未定义的(变量-)的情况。
连接运算符的可以是变量，也可以是字面量。
对颜色进行运算符时，按照rgb值的对应位置相加，当大于255时，默认为255。

@base:2;
@baseColor: blue;
@borderColor: red;
.menu{
  width: @width*@base;
  height: @height -2;
  border: solid 1px @borderColor+@baseColor;
}

3.混合（Mixins）

将一组属性从一个规则集包含（或混入）到另一个规则集的方法（方法的定义和调用）
1)无参

.borderRadius{
  border-radius:10px ;
}
//调用方式：
//直接在样式中调用，它可以带括号或者不带
.borderRadius();
.borderRadius;

2).含参

//1.默认情况下的含参
.borderRadius(@radius){
  border-radius:@radius ;
}
//调用方式：
//直接在样式中调用,必须要传参
.borderRadius(40px);

//2.含默认值的参数
.borderRadius(@radius:10px){
  border-radius:@radius ;
}
//调用方式：
//直接在样式中调用,如果不传参就用默认值，传参就用传的值
.borderRadius(50%);
.borderRadius();

4.嵌套（Nesting）

便于编译和维护
类似子父空格式写法(ul li)
& 表示当前选择器的父级
@规则嵌套和冒泡:
@ 规则（例如 @media 或 @supports）可以与选择器以相同的方式进行嵌套。@ 规则会被放在前面，同一规则集中的其它元素的相对顺序保持不变。这叫做冒泡。

.menu{
  width: @width*@base;
   @media (min-width: 768px) {
     width: @width;
   }
  height: @height;
  border: solid 1px @borderColor+@baseColor;
  .baby{
    width: @width;
    height: @height;
    border: solid 1px @borderColor;
    margin: auto;
    position: relative;
    //悬停
    &:hover{
      background-color: darkblue;
    }
    //伪类
    &:after{
      position: absolute;
      content: '';
      border: solid 12px #6bcbfa;
    }
  }
}

5.转义（Escaping）

允许使用任意字符串作为属性或变量值。任何 ~“anything” 或 ~‘anything’ 形式的内容都将按原样输出，除非 interpolation。

@media768:~"(max-width:768px)";
.zy{
  width: 200px;
  height: 300px;
  border: solid 1px @borderColor;
  margin: auto;
  @media @media768{
    width: 768px;
    background: red;
  }
}

6.函数（Functions）

1).逻辑功能(Logical Functions)

iscolor() :检测是否是一个颜色，返回的是true/false 。
if() 逻辑判断: if(条件,true,false)

@some:#dd1;
.iscolor{
  width: 100px;
  height: 100px;
  //如果为真，返回第一个值，反之返回第二个值
  background-color: if(iscolor(@some),@some,black);
}

布尔值
boolean(condition);
condition:布尔表达式

2).字符串函数(String Functions)
escape 转码字符串, 用于带字符串的值的用的转码。
escape(string);
3).清单功能(List Functions)

length(list); 返回长度
range(start,end,step); 产生一组数字 (start,step(帧数)可选)
each(list,rules); 遍历方法

//each()  遍历方法 
//3种写法
//value指当前的遍历值，index指当前遍历的索引从1开始，key指键值
each(range(5), {
.col-@{value} {
  width: @value * 5px;
  height: @value * 5px;
  border: solid 1px saddlebrown;
}});
//数组型
@arr:a,b,c,d,e;
each(@arr,{
.col-@{value} {
  width: @index * 5px;
  height: @index * 5px;
  border: solid 1px saddlebrown;
}
});
//对象型
@set:{one:red;two:blue;three: orange; four: pink; five: yellow; };
each(@set,{
  .col-@{key} {
    width: @index * 5px;
    height: @index * 5px;
    border: solid 1px saddlebrown;
  }
});

4).数学函数(Math Functions)

ceil 向上取整
floor 向下取整
percentage 转化百分比
round 四舍五入
sqrt 开平方的
abs 取绝对值的
sin asin cos acos tan atan
pi 3.141592653589793
pow 求幂
min 取最小值的
max 取最大值的

5).类型方法(Type Functions)

检测是否是数字的方法:isnumber, 返回值是true false
检测是否是字符串的:isstring, 返回值true
false 检测是否是路径:isurl,返回值true flase
检测像素值的:ispixel 返回值 true false
检测是否是em单位的:isem,返回值 true false
检测是否是%单位的:ispercentage,返回值true false

6).颜色的函数

rgb()
rgba()
hsl(): 哈希值 hsl(90, 100%, 50%)

操作颜色的函数：

lightness：设置颜色亮度 lightness(hsl(90, 100%, 50%))

lighten:减轻颜色的亮度lighten(hsl(90, 80%, 50%), 20%)
darken: 加重颜色的亮度darken(hsl(90, 80%, 50%), 20%)
fadein: 降低颜色的透明度
fade: 设置不透明度 rgba(241,70,50,0.1),80%
mix: 混合颜色的方法，前两个是颜色，平衡点可选，默认50%
tint: 把颜色和白色混合，平衡点默认50%
shade: 把颜色和黑色进行混合，平衡点默认50%
multiply: 混合两个颜色，让变暗
screen: 混合两个颜色，让变亮

7.映射（Maps）

定义一个命名空间,作用是封装

#space() {
  primary: blue;
  secondary: green;
  .btn {
    width: 100px;
    height: 100px;
    font-size: 13px;
  }
}
.bgcolor {
    width: 200px;
    height: 200px;
    background-color: #space[primary]; //是命名空间的映射关系
    .btn {
      #space.btn(); //访问命名空间
    }
  }