vue基础七（Less）

Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。

安装

将less安装为开发依赖

 npm i less --save-dev

注释

/* 一个块注释  * style comment! */
// 这一行被注释掉了！ 单行注释仅在less中可以使用，在css中不可以使用

导入

新建 .less文件，保存之后会自动生成对应的css文件。

如果导入的文件是 .less 扩展名，则可以将扩展名省略掉

@import "./style/app"; // app.less
@import url(./style/app)； //app.less
@import "./css/app.css"; //导入css文件

变量（Variables）

在css的代码中，我们可以创建变量，在各个样式块中，可以重复使用该变量。并且变量可以作一些表达式的操作。

@width: 10px; //变量
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}

混合（Mixins）

混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。

定义类

.red{
  color: red;
  font-size: 12px
}

在其他规则中使用该类属性

.color{
  .red(); //混合，将该类的属性混入到.color的规则集中，使用该类中的样式
  color: yellow; //修改样式，覆盖
}

嵌套（Nesting）

Less 提供了使用嵌套（nesting）代替层叠或与层叠结合使用的能力

css代码

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

less语言实现嵌套

#header {
  color: black;
  .navigation {
    font-size: 12px;
    p{}
  }
  .logo {
    width: 300px;
  }
}

清除浮动

  



 

.wrap{
    .left{
        float :left;
        width: 200px;
        height: 100px;
        background-color: pink;
    }
    .right{
        float:right;
        width: 200px;
        height: 100px;
        background-color: deeppink;
    }
    &:after {
        content: " ";
        display: block;
        font-size: 0;
        height: 0; //兼容低版本浏览器
        clear: both;
        visibility: hidden;
      }
}

规则嵌套和冒泡

//响应式布局
#a1{
    width: @w;
    height: @h;
    background-color: skyblue;
    @media (min-width:768px){
        background-color: red;
        @media (min-width:1024px){
            background-color: green;
            @media (min-width:1400px){
                background-color: yellow;
            }
        }
    }
 }

运算

算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。
如果可能的话，算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。
如果单位换算无效或失去意义，则忽略单位。无效的单位换算例如：px 到 cm 或 rad 到 % 的转换。

// 所有操作数被转换成相同的单位
@conversion-1: 5cm + 10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm

// 不能进行单位换算
@incompatible-units: 2 + 5px - 3cm; // 结果是 4px

// 变量运算
@base: 5%;
@filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%

乘法和除法不作转换。因为这两种运算在大多数情况下都没有意义，一个长度乘以一个长度就得到一个区域，而 CSS 是不支持指定区域的。Less 将按数字的原样进行操作，并将为计算结果指定明确的单位类型。

@base: 2cm * 3mm; // 结果是 6cm

对颜色进行算术运算：

@color: #224488 / 2; //结果是 #112244
background-color: #112244 + #111; // 结果是 #223355

calc()特例

为了与 CSS 保持兼容，calc() 并不对数学表达式进行计算，但是在嵌套函数中会计算变量和数学公式的值。

@var: 50vh/2;   //1vw等于视口宽度的1%,1vh等于视口高度的1%
width: calc(50% + (@var - 20px));  // 结果是 calc(50% + (25vh - 20px))

实现左中右布局（左边和右边宽度固定，中间宽度不固定，中间为自适应布局）

less

.wrap{
    .left{
        float :left;
        width: 200px;
        height: 100px;
        background-color: pink;
    }
    .center{
        float: left;
        width: calc(100% - 400px);
        height: 100px;
        background-color: green;
    }
    .right{
        float:right;
        width: 200px;
        height: 100px;
        background-color: deeppink;
    }
    &:after {
        content: " ";
        display: block;
        font-size: 0;
        height: 0; //兼容低版本浏览器
        clear: both;
        visibility: hidden;
      }
}

转义（Escaping）

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

@min768:~"(min-width:768px)";
@min1024:~"(min-width:1024px)";
#a1{
    width: @w;
    height: @h;
    background-color: skyblue;
    @media @min768{
        background-color: rgb(174, 243, 189);
        @media @min1024{
            background-color: rgb(237, 253, 180);
            @media (min-width:1400px){
                background-color: rgb(207, 214, 245);
            }
        }
    }
}

在高版本的less中，允许简写

@min768: (min-width: 768px)

函数（Functions）

Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。

@base: #f04615; //变量
@width: 0.5;
.class {
  width: percentage(@width); // returns `50%`  转换为百分比
  color: saturate(@base, 5%);  //饱和度增加百分之五
  background-color: spin(lighten(@base, 25%), 8);  //先将亮度增加百分之二十五，再将色相角度增加八
}

渐变函数

background: -webkit-gradient(linear, left bottom, left top, color-stop(0, blue), color-stop(0.5,green),color-stop(1, yellow)); //线性变化，从下往上，从蓝色变绿再变黄

颜色变化函数

saturate(hsl(90,80%,50%),20%) -- 添加饱和度
输出：#80ff00 // hsl(90, 100%, 50%)
desaturate(hsl(90, 80%, 50%), 20%) -- 减少饱和度
输出：#80cc33 // hsl(90, 60%, 50%)
lighten(hsl(90, 80%, 50%), 20%) -- 亮度增加
输出：#b3f075 // hsl(90, 80%, 70%)
darken(hsl(90, 80%, 50%), 20%) -- 亮度减少
输出：#4d8a0f // hsl(90, 80%, 30%)
fadein(hsla(90, 90%, 50%, 0.5), 10%) -- 不透明度增加
输出：rgba(128, 242, 13, 0.6) // hsla(90, 90%, 50%, 0.6)
fadeout(hsla(90, 90%, 50%, 0.5), 10%) -- 不透明度减少
spin(hsl(90, 80%, 50%), 30) -- 色相角度增加
输出：#19e619 // hsl(120, 80%, 50%)
spin(hsl(90, 80%, 50%), -10) -- 色相角度减少
输出：#a1e619// hsl(80, 80%, 50%)

命名空间和访问符

将同类型的混合或变量放在同一个命名空间中，便于管理和重用。

#colors(){
  .red{
    color: red;
  }
  .pink{
	color：pink；
	}
}
p{
  #colors.red();
}

使用命名空间中的混合时，需要在混合前加上命名空间名

映射

从 Less 3.5 版本开始，你还可以将混合（mixins）和规则集（rulesets）作为一组值的映射（map）使用。将一组值封装在一个规则集中。

//边框值的映射
#border(){
    b1:1px solid red;
    b2:1px solid yellow;
    b3:2px solid green;
}
div{
	border:#border[b1]; //通过中括号调用
}

作用域

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

@color:red;
div{
	@color:yellow;
	#a{
		@color:green;
		background-color:@color; //先从该作用域中寻找@color，没有再从父作用域中寻找
	}
}

@color:red;
div{
    #a{
		background-color:@color;
	}
	@color:yellow; //变量和混合可以放置在引用的下面，变量提升会将变量和混合提升到上面
}

sass,less和stylus

sass

sass分为dart-sass与node-sass

• node-sass 是用 node(调用 cpp 编写的 libsass)来编译 sass；
• dart-sass 是用 drat VM 来编译 sass；
• 后缀名可以为sass/scss

更推荐选择使用dart-sass，sass官方已经将dart-sass作为未来主要的开发方向，有任何新功能它都是会优先支持的，而且它已经在社区里稳定运行了很长的一段时间，而且安装更方便！

变量的表示

sass ：$var
less：@var
stylus ：var=值 or $var

变量的赋值

sass： $var: value,
less：@var: value
stylus：var=10

缩进的问题

sass, less均不需要缩进, 缩进无关
stylus也可以不用缩进, 使用默认的css花括号

if条件判断的问题

sass的if和stylus的if很早引入了
但是less没有if

都支持嵌套