Less

了解Less

1. 什么是Less

Less 是一门CSS预处理语言,它扩充了CSS语言,增加了诸如变量,混合(mixin),函数等功能,让CSS更易维护,提高开发效率 https://less.bootcss.com/

less官网 http://lesscss.cn/

预处理(不能直接在浏览器运行,浏览器不识别，需要编译成CSS文件才能在浏览器运行)

2. 安装Less

在服务器端最容易的安装方式就是通过npm(node.js的包管理器)安装

$ npm install -g less

2.1 验证less有没有安装成功

$ lessc -v   //$表示命令语句

如果打印出了版本号就是安装成功

3. 编译

通过命令行编译less文件,注意: 在编译之前,一定要有一个less文件

3.1 命令行方式编译

1. 未指定编译路径

$ lessc index.less

编译完成以后,会在控制台打印编译结果,不会生成任何文件

2 指定编译路径

$ lessc index.less index.css

或者

$ lessc index.less > index.css

这样会在编译成功后,生成新的index.css文件,编译的结果不会打印在控制台

3. 编译后将编译结果的css文件进行压缩

需要借助less-plugin-clean-css插件

先安装插件

$ npm install less-plugin-clean-css -g

使用插件进行压缩

$ lessc index.less index.css --clean-css

3.2 外部工具的编译方式

为什么需要使用外部工具的编译方式呢,因为命令行的编译方式,没写一次less,都需要手动的编译,就非常耗时间,还不能实时刷新

外边的工具可以帮我们解决这样一些问题,通过实时编译刷新,就会想我们使用css一样,实时看到开发效果,

1. 安装考拉less 客户端编译工具

官网下载

使用Koala外部编译软件,可以选择是否压缩编译结果compress,可以选择是否监听less文件的变化,同时可以自动编译,还可以生成资源地图Source Map文件

3.3 使用开发工具webstorm 编译

WebStorm 内置 File Watchers,

设置方式:

文件 >> 设置 >> 工具 >> File Watchers >> 添加选择less >> 指定输出目录

3.4 使用开发工具vscode编译

在vscode中通过下载 easy Less插件,来使用less自动编译功能

less编译成css：vscode中下载less插件--> 写好less文件 ---> 保存 -->会自动生成同名的css文件(使用框架开发不用考虑less编译为css)

Less的语法

1. 注释语法

1.1 /**/ (多行注释)

这种注释是css的注释,编译以后,会保留显示在css文件中

1.2 // (单行注释)

// 这种代码注释css并不识别,编译后会影藏,不会显示在css文件中

/*这种注释在css中显示*/
//这个注释

2. 变量(重点)

在less 中,可以使用变量,来统一设置一类可以重复使用的值,方便后期CSS代码维护

2.1 普通变量的使用

使用@符号定义变量,

语法:

@变量名: 变量值;

注意:变量值一定要符合CSS属性值的规范

在CSS选择器中后面是用变量,如: 属性的名称: @变量

// 定义变量
@baseColor: #369;

// 使用变量
.box{
    color: @baseColor;
    border: 1px solid @baseColor;
}

@base-color:red;
div p{
    border:1px solid @base-color;
    padding:10px 20px;
    color:@base-color;
}

2.2 在字符串中使用变量

如果需要变量名和其他字符串拼接,

使用一下语法

"@{变量名}字符串"

@base-img:'./images/222.jpg';//定义图片变量, 也可以只定义相同路径部分
div .img{
    width: 300px;
    height: 300px;
    background:url(@base-img) no-repeat 0 0/cover;//写法一
    // background:url('@{base-img}') no-repeat 0 0/cover;//写法二
}

2.3 选择器使用变量

语法

@{变量名}{

}

html部分

大家好，辛苦啦

less部分

@select:#wrap;
@{select}{  //注意加上{}这里是变量，不加{}就是选择器，没有select这个选择器
    color:red;
    font-size:30px;
}

2.4 属性变量

语法

选择器{

@{变量没}: 值

}

//html部分
 大家好，辛苦啦
//less部分
@base-color:color;
div{  
    @{base-color}:yellow;
    font-size:30px;
}

2.5 导入其他的less

语法

@变量名: 地址;

@import "@{变量名}";

@url: './base.less';
@import '@{url}';

注意,就是将其他的less 引入到自己的less中,最后统一编译成一个css文件

2.6 变量作用域

每个元素的css样式的{}都是一个独立的作用域, 按照js函数作用于来理解

语法

@color: red;
.wrap{
    color:@color; // .wrap自己作用域内没有color变量,所以用上一级作用域变量的值
}
.box{
    @color: skyblue;//自己作用域内定义变量值
    color:@color; // 因为.box自己作用于中有同名变量,就会先用自己作用域内变量的值
}

注意变量会被预解析，先使用后定义也没关系，但尽量还是把定义变量放前面。

// 先使用变量
.wrap{
    color:@color; 
}

// 后定义变量
@color: red;

2.7 变量的计算

变量的值可以参与运算

@base-width: 300px;
@base-color:#333;
.box{
    width: @base-width+100;//加减乘除都可以
    height:@base-width;
    background: skyblue;
    border:3px solid @base-color *3;  //颜色值也可以计算
    color:base-color;
}

3. 混合(重点)

Mixins 有点像函数,在定义后,可以通过名称调用.(也支持动态传参)

混合可以将一个定义好的class A 轻松的引入到另一个class B 中,从而简单实现class B继承class A 中的所有属性,我们还可以带参数地调用,就像使用函数一样

3.1 什么是Mixins混合

简单理解就是函数,可以封装CSS代码,在别的选择器中调用,提高代码的重用性和可维护性

3.2 定义混入

语法:

1.无参数混入定义

.混入名 () {

封装的CSS代码

}

//定义无参数的混合
.baseProp() {
    width: 200px;
    height: 50px;
    border: 3px solid red;
}

.box {
    .baseProp();//引用混入，如果混入没有参数可以不用加括号
    color: base-color;
}

p {
    .baseProp();//引用混合
    font-size:30px;
}

混合中引入了变量，首先在自己作用域找变量，自己没有找父级。而不在引用的标签内寻找。

@base-color: red;

.baseProp() {
    width: 200px;
    height: 50px;
    border: 3px solid @base-color; //这的变量@base-color应该先在自己找，再在父作用域找。在定义的地方确定作用域
}

.box {
    @base-color: skyblue;
    .baseProp();
}

2.有参数混入.混入名(@参数: 默认值){

封装的CSS代码

}

//混合使用引用作用域中的变量，就要在引用作用域 传参
@base-color: red;

.baseProp(@base-color,@base-borderWidth:1px) {//参数后无默认值表示必传
    width: 200px;
    height: 50px;
    border: 3px solid @base-color; 
}

.box {
    @base-color: skyblue;
    .baseProp(@base-color,);//如果想让混合使用这个作用域中的变量，就要传参
}

3.3 调用混入

语法

选择器{

混入名(@参数)

}

// 使用混入
@baseColor: #369;
.box p {
  .error(@baseColor, 30px)
}

3.4 如果混入没有参数可以不用加括号

.wrapProp(){
    width:200px;
    height:200px;
    border:1px solid red;
}

.wrap{
    .wrapProp() // 加括号 可以执行
}
.box{
    background: skyblue;
    .wrapProp;  // 没有参数不加括号也可以执行
    width:100px;
}

如果mixin需要动态传参数, 则必须加括号传参

.wrapProp(@wi,@height,@color){
    width:@wi;
    height:@height;
    border:1px solid @color;
}

@width:200px;
@height:200px;
@color:red;

.wrap{
    .wrapProp(@width,@height,@color);
}
.box{
    background: skyblue;
    .wrapProp(300px,100px,blue);
    // width:100px;
}

3.5 less可以直接继承其他选择器中的样式

.pp{   //必须单class类名选择器、或者单id类名选择器才可以继承，复合选择器不好使
    font-size:30px;
    border:2px solid red;
    padding:10px;
}
.box{
    .pp;//继承.pp的样式
    color:pink;
}

混入中还可以写变量

.pp {
   @width:300px;
   @height:200px;
}

.box {
    .pp; 
    width: @width;//混入中还可以写变量
    height:@height;
    color: pink;
    border:1px solid red;
    padding:10px;

}

3.6 可以在Mixin中使用选择器

.pp {
    font-size: 30px;
    border: 2px solid red;
    padding: 10px;
    // &:hover {
    //     color: blue; //混入里的选择器也可以放这
    // }
}

.box {
    .pp; 
    color: pink;
    &:hover {
        color: blue; //混入里还可以写选择器
    }
}

3.7 Mixins的命名空间

说白了就有点类似于js中的作用域的问题

// 混入 的作用域
@base-color:blue;
@base-width:200px;
.pp{
    //局部混入
    .baseProp() {
        width: @base-width;
        padding: 10px 0;
        color: @base-color;
        border: 1px solid @base-color;

        &:hover {
            color: red;
        }
    } 
}
   // 使用混入
.box {
    .pp .baseProp;  //   必须通过先找到.pp 然后在通过.baseProp混入进来       
    font-size: 30px;
}

3.8 Mixin的默认值与不定参

1. 默认值

Less 可以使用默认参数，如果没有传参数，那么将使用默认参数。

如果不是默认值, 在没有传参的情况下, Mixin参数没有值就会出错,所以实参和形成的个数必须保持一致

如果希望Mixin可以在更多场合复用, 可以使用默认值,如果没有传参,则使用默认值

#box(@width : 100px, @height : 100px, @color:red) {
    width: @width;
    height: @height;
    background-color: @color;
}

.box{
    #box(50px,50px,pink) ; // 这里使用自己传递的参数
    width:200px;
}

.wrap{
    #box;   // 这里没有传值，所以使用默认值
}

2. 不定参：不确定参数的个数

// ... 就是@reset 剩余参数, 会将剩余的所有参数都加到@arguments里 
.boxShadow(...){
          box-shadow: @arguments;  
 }

.box{
    .boxShadow(1px,4px,30px,red);
}

// @arguments是处理第一个实参外的所有实参的集合
.boxShadow(@width,...){
          box-shadow: @arguments;
 }
.box{
    .boxShadow( 50px,1px,4px,30px,red);
}

3.9 Mixins的判断条件

Less没有if / else 但是less具有一个when，and，not与“，”语法。

1. when 表示在使用Mixin的时候必须满足 when后面的条件

#box(@width, @height, @color) when (@width > 100px){ //这里的when是过滤条件
    width: @width;
    height: @height;
    background-color: @color;
}

.box{
    #box(101px,50px,pink)
}

2. 如果有两个必须同时满足的条件,使用 and

// 这里必须满足传递的宽度和颜色必须同时同满足条件才能执行Mixin
#box(@width, @height, @color) when (@width > 100px) and (@color = pink){
    width: @width;
    height: @height;
    background-color: @color;
}

.box{
    #box(101px,50px,skyblue)
}

3. 如果需要排除某个条件才能使用Mixin,使用not

// 这里排除颜色为pink ,除了pink颜色值都可以运行Mixin
#box(@width, @height, @color) when  not (@color = pink){
    width: @width;
    height: @height;
    background-color: @color;
}

.box{
    #box(101px,50px,skyblue)
}

4. 如果需要多个条件只要满足一个就执行Mixin,使用逗号,

// 虽然不满足宽度大于等于100px,但是满足为了颜色是skyblue 所以Mixin会执行
#box(@width, @height, @color) when (@width >= 100px),(@color = skyblue){
    width: @width;
    height: @height;
    background-color: @color;
}

.box{
    #box(50px,50px,skyblue)
}

// 混入 的筛选
.haha(@width, @height, @color) when(@width>100px) {
    //参数不满足过滤条件就不生效，混不进去
    width: @width;
    height: @height;
    color: @color;
    border: 2px solid blue;
}
.hh {
    .haha(100px, 100px, red)
}

3.10 Less循环

Less循环采用的类似于js的递归调用

.wuwei(@length,@i:1) when (@i  <= @length){
    .item-@{i}{
        width: @i * 50px;
        height:50px;
        border:1px solid red;
    }
    
    // 递归调用的同时,改变循环变量@i
    .wuwei(@length, (@i+1));
};

.wuwei(6);

3.11 模式匹配

根据条件进行样式显示,类似JS中的switch

有些情况下,我们想根据传入的参数来改变混合的默认呈现,

比如

相当于定义一个相同的混合名称,根据传入其他混合名称的不同,执行不同混合分支

但是有一个公共的分支,任何一个分支都会调用

@_ 表示匹配所有,通常用于定义公共部分

语法:

模式匹配的定义

公共部分

.fun (@_, @color){
  // 任何分支都会执行的公共部分
}

.fun( s1,@color){
  // s1 分支独有代码
}

模式匹配的使用

h1{

.fun(s2, @color)

}

模式匹配举例--三角形

html部分





  
  
  
  
  Document

less部分

//模式匹配 --- 三角形
.base-sjx(@_, @width, @color) {
    // 只要使用这个混入就执行, 公共的混入
    width: 0;
    height: 0;
    border: @width solid rgba(80, 80, 80, .1);
    margin-bottom: 15px;
}
.base-sjx(t, @width, @color) {
    //顶部三角形
    border-top-color: @color;
}

.base-sjx(r, @width, @color) {
    //右侧三角形
    border-right-color: @color;
}

.base-sjx(b, @width, @color) {
    //底部三角形
    border-bottom-color: @color;
}

.base-sjx(l, @width, @color) {
    //左侧三角形
    border-left-color: @color;
}

#sjx1 {
    .base-sjx(t, 100px, green);
}

#sjx2 {
    .base-sjx(r, 20px, yellow);
}

#sjx3 {
    .base-sjx(b, 100px, red);
}

#sjx4 {
    .base-sjx(l, 30px, skyblue);
}

// Mixins 里除了返回变量,还可以返回Mixins
#box(@color){
    .wrap(){
        width:500px;
        height:100px;
        background:@color;
    }
}

.box{
    #box(red);  // 执行第一个Mixin是为了能够使用里面的Mixin
    .wrap();   // 第二个执行Mixin里面的Mixin
}

4. 颜色函数

CSS预处理器一般都会内置一些颜色处理函数,用来对颜色值进行处理,,例如: 加亮,变暗,颜色梯度等

色彩三要素: 色相(颜色的名称,) 饱和度(鲜艳程度) 明度(亮度,明暗程度)亮到一定程度就是白色，暗到一定程度就是黑色，好比灯光

语法:

lighten(@color, 10%) 比@color 亮 10% 的颜色 (亮度)

darken(@color, 10%) 比@color 暗 10% 50%以后的都是黑色了

saturate(@color, 10%) 比@color 浓 10% (饱和度)

desaturate(@color, 10%) 比 @color 淡 10%

spin(@color., 10) 色相值增加10 (色相,就是颜色的名称0--360)

spin(@color, -10) 色相值减少10

mix(@color1, @color2) 混合两种颜色

sj.jpg

//对已有的颜色增亮、变暗
div{
 color:red;
}
p{
    color:lighten(red,10%)
}
span{
    color:lighten(red,40%)  
}
h1{
    color:lighten(red,42%)   
}

5. 嵌套(重点)

5.1 什么是嵌套

具有层级关系的CSS样式,CSS的层级是有HTML的结构决定的

5.2 嵌套的好处:

用在具有后代关系和父子关系的选择器中
减少代码量,
代码结构更加清晰

5.3 使用

语法:

父选择器{

父属性样式

子选择器A{

子选择器A的样式

}
html 部分


  
   文字文字
      行内
      pppp 
  
  外面

less部分

.box {
    font-size: 30px;
    border: 1px solid pink;

    span {
        display: inline-block;
        color: red;
        font-weight: bold;
    }

    p {
        color: blue;
        font-weight: bold;
    }
}
div{
    color:green;
}

5.4 &符号的使用

使用场景: 父子,兄弟,紧邻,伪类选择器使用时

$符号表示父元素

.box{
    width: 100px;
    height: 100px;
    .wrap{
        font-size: 16px;
        $:hover{
            color: red;
        }
    }
    
}

html部分

  
   文字文字
      行内
      pppp
        ssss
       
  
  外面


less部分
.box {
    font-size: 30px;
    border: 1px solid pink;

    span {
        display: inline-block;
        color: red;
        font-weight: bold;
    }

    p {
        color: blue;
        font-weight: bold;
       span{
           color:aqua;
       }
    }
    &>span:hover{//元素本身直接的span在hover时。不写&表示后代元素hover时。写&才是元素本身hover。
        background-color: #ccc;
    }
}

6. 运算符

运算符的作用: 可以对角度,颜色,高度等进行运算

运算符的分类: 加 +, 减 - , 乘 *, 除 /

@w1:200px;
@w2:300px;
@c1: #333;
@c2: #666;

li {
    width: @w1 + @w2;
}

// 16进制的颜色值,只能在#000000 ~ #ffffff之间,如果超出了,就会自动使用最大值
li {
   background: @c1 + @c2;
}

例子:

.button(@size){
    width: 100px * @size;
    height: 40px * @size;
    font-size: 14px * @size;
}

// 使用
.button {
    .button(3)
}

sass官网 https://www.sass.hk/

stylus官网 https://www.stylus-lang.cn/

Less

了解Less

1. 什么是Less

2. 安装Less

2.1 验证less有没有安装成功

3. 编译

3.1 命令行方式编译

1. 未指定编译路径

2 指定编译路径

3. 编译后将编译结果的css文件进行压缩

3.2 外部工具的编译方式

1. 安装考拉less 客户端编译工具

3.3 使用开发工具webstorm 编译

3.4 使用开发工具vscode编译

Less的语法

1. 注释语法

1.1 /**/ (多行注释)

1.2 // (单行注释)

2. 变量(重点)

2.1 普通变量的使用

2.2 在字符串中使用变量

2.3 选择器使用变量

2.4 属性变量

2.5 导入其他的less

2.6 变量作用域

2.7 变量的计算

3. 混合(重点)

3.1 什么是Mixins混合

3.2 定义混入

3.3 调用混入

3.4 如果混入没有参数可以不用加括号

3.5 less可以直接继承其他选择器中的样式

3.6 可以在Mixin中使用选择器

3.7 Mixins的命名空间

3.8 Mixin的默认值与不定参

1. 默认值

2. 不定参：不确定参数的个数

3.9 Mixins的判断条件

1. when 表示 在使用Mixin的时候必须满足 when后面的条件

2. 如果有两个必须同时满足的条件,使用 and

3. 如果需要排除某个条件才能使用Mixin,使用not

4. 如果需要多个条件只要满足一个就执行Mixin,使用 逗号,

3.10 Less循环

3.11 模式匹配

模式匹配举例--三角形

4. 颜色函数

5. 嵌套(重点)

5.1 什么是嵌套

5.2 嵌套的好处:

5.3 使用

5.4 &符号的使用

6. 运算符

你可能感兴趣的:(Less)

1. when 表示在使用Mixin的时候必须满足 when后面的条件

4. 如果需要多个条件只要满足一个就执行Mixin,使用逗号,