博客

【LESS 笔记】基础内容

  • Post author:
  • Post category:其他


文章目录



01 Less 是什么

Less css 是一种动态样式语言，属于 CSS 预处理语言的一种，它使用类似 CSS 的语法为 CSS 的赋予了动态的特性，如变量、继承、运算、函数等，更方便 CSS 的编写和维护实现 CSS 模块化

作为一种 CSS 扩展，Less 不仅向后兼容 CSS，它还使用现有的 CSS 语法新增了额外的特性。这使得学习 Less 更轻松，一旦有任何问题，可以随时退回使用标准的 CSS

Less CSS 可以在多种语言，环境中使用，包括浏览器端，桌面客户端，服务端

下载包：

npm install less-loader less –save-dev

webpack.config.js 文件里添加配置：


{test: /.less$/, use: ['style-loader','css-loader','less-loader']}


webpack.config.js 文件
 

module.exports = {
  entry: './src/js/entry.js',
  output: {
    filename: 'index.js',
    publicPath: './out',
    path: __dirname + '/out'
  },
  module: {
    rules: [
      {test: /.js$/, loader: 'babel-loader'},
      {test: /.css$/, use: ['style-loader','css-loader']},
      {test: /.(png|jpg|gif|svg)$/, use: 'url-loader?limit=8192&name=/[name].[ext]'},
      {test: /.less$/, use: ['style-loader','css-loader','less-loader']}
    ]
  }
}


entry.less 文件
 

body{
  background-color: #ff0;
  .demo01{
    width: 200px;
    height: 200px;
    background: #f0f;
  }
}


entry.js 文件
 

// 引入less文件
require('../less/entry.less');

console.log('index');


index.html 文件
 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="demo01">demo01</div>
  <div class="demo02">demo02</div>
  <script src="./out/index.js"></script>
</body>
</html>

在这里插入图片描述

在这里插入图片描述



02 Less 语法



2.1 注释

  • //：不会被编译
  • /**/：此注释会被编译



2.2 变量

  • 声明变量：

    @a:300px
  • 使用变量：

    .box {width: @a;}
  • @arguments 变量：@arguments 包含了所有传递进来的参数

    • 如果你不想单独处理每一个参数的话就可以像这样写

    • border_arg(@w:30px,@c:red,@xx:solid)


      {border:@arguments;}


entry.less 文件
 

@w:200px;
@h:200px;
@yellow1: #ff0;
@yellow2: #00f;
body{
  background: @yellow1;
  .demo01{
    width: @w;
    height: @h;
    background: #f0f;
  }
  .demo02{
    width: @w;
    height: @h;
    background: @yellow2;
    border: 5px solid #fff;
  }
}

在这里插入图片描述



2.3 混合



2.3.1 独立选择器样式可以被直接用在其他选择器样式之中

如：

.border {border: 1px solid orange}


.box {width:@a;height:@a; .border;}

相当于：

.box {width: 300px;height:300px;border:1px solid orange}

（同样可以将 #box）


entry.css
 

@w:200px;
@h:200px;
@yellow1: #ff0;
@yellow2: #00f;
.border{
  border: 5px solid #fff;
}
body{
  background: @yellow1;
  .demo01{
    width: @w;
    height: @h;
    background: #f0f;
    .border
  }
  .demo02{
    width: @w;
    height: @h;
    background: @yellow2;
    .border
  }
}

在这里插入图片描述



2.3.2 混合是可以带参数的

如：

.border2(@border_width) {border: @border_width solid yelllow}

使用：

.box {.border2(5px);}


entry.less 文件
 

@w:200px;
@h:200px;
@yellow1: #ff0;
@yellow2: #00f;
.border(@borderStyle){
  border: 5px solid @borderStyle;
}
body{
  background: @yellow1;
  .demo01{
    width: @w;
    height: @h;
    background: #f0f;
    .border(#f00);
  }
  .demo02{
    width: @w;
    height: @h;
    background: @yellow2;
    .border(#0f0);
  }
}

在这里插入图片描述


entry.less 文件
 

@w:200px;
@h:200px;
@yellow1: #ff0;
@yellow2: #00f;

.border(@borderWidth,@boederStyle,@borderColor){
  border: @borderWidth @boederStyle @borderColor;
}
body{
  background: @yellow1;
  .demo01{
    width: @w;
    height: @h;
    background: #f0f;
    .border(10px,solid,#f00);
  }
  .demo02{
    width: @w;
    height: @h;
    background: @yellow2;
    .border(20px,dashed,#090);
  }
}

在这里插入图片描述



2.3.3 此参数可以具备默认值

如：

.border3 (@border-width:10px) {border:@border-width solid green}

使用：

.box {.border3;}

用处：兼容写法，减轻冗余代码

例子如下： 

.borderRadius(@radius:5px) {
  -webkit-border-radius:@radius;
  -moz-border-radius:@radius;
  border-radius:@radius}
.box{
  .border3;
  borderRadius(5%);
};



2.4 匹配模式



2.4.1 基本语法


entry.less 文件
 

.triangle(top,@borderColor){
  border-width: 50px;
  border-style: solid;
  border-color: transparent;
  border-top-width: 0;
  border-bottom-color: @borderColor;
}
.triangle(bottom,@borderColor){
  border-width: 50px;
  border-style: solid;
  border-color: transparent;
  border-bottom-width: 0;
  border-top-color: @borderColor;
}
.triangle(right,@borderColor){
  border-width: 50px;
  border-style: solid;
  border-color: transparent;
  border-right-width: 0;
  border-left-color: @borderColor;
}
.triangle(left,@borderColor){
  border-width: 50px;
  border-style: solid;
  border-color: transparent;
  border-left-width: 0;
  border-right-color: @borderColor;
}
body{
  .demo01{
    width: 0;
    height: 0;
    .triangle(right,#f0f);
  }
  .demo02{
    width: 0;
    height: 0;
    .triangle(top,#0ff);
  }
}

在这里插入图片描述



2.4.2 代码冗余，将公共部分提取出来


.trangle(@_,....){}

这句话的意思是，无论在哪使用

.triangle(....)

都会把

.trangle(@_,....){}

里的样式带上


entry.less 文件
 

.triangle(@_,...){
  border-width: 50px;
  border-style: solid;
  border-color: transparent;
}
.triangle(top,@borderColor){
  border-top-width: 0;
  border-bottom-color: @borderColor;
}
.triangle(bottom,@borderColor){
  border-bottom-width: 0;
  border-top-color: @borderColor;
}
.triangle(right,@borderColor){
  border-right-width: 0;
  border-left-color: @borderColor;
}
.triangle(left,@borderColor){
  border-left-width: 0;
  border-right-color: @borderColor;
}
body{
  .demo01{
    width: 0;
    height: 0;
    .triangle(right,#f0f);
  }
  .demo02{
    width: 0;
    height: 0;
    .triangle(top,#0ff);
  }
}

在这里插入图片描述



2.5 嵌套写法

符合 DOM 结构


index.html 文件
 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="demo01">demo01
    <div class="demo01-01">demo01-01</div>
  </div>
  <div class="demo02">demo02</div>
  <script src="./out/index.js"></script>
</body>
</html>


entry.less 文件
 

@w:150px;
@h:150px;
body{
  background: blanchedalmond;
  .demo01{
    width: @w;
    height: @h;
    background: #0ff;
    .demo01-01{
      width: 100%;
      height: 50%;
      background: #ff0;
      &:hover{
        height: 70%;
      }
    }
    .demo01-01:hover{
      width: 70%;
    }
  }
  .demo02{
    width: @w;
    height: @h;
    background: #f0f;
  }
}

在这里插入图片描述


entry.less 文件
 

@w:150px;
@h:150px;
body{
  background: blanchedalmond;
  .demo01{
    width: @w;
    background: #0ff;
    .demo01-01{
      width: 100%;
      height: 50%;
      background: #ff0;
      &:hover{
        height: 200px;
      }
    }
  }
  .demo02{
    width: @w;
    height: @h;
    background: #f0f;
  }
}

在这里插入图片描述



2.5.1 浮动和清除浮动

浮动


entry.less 文件
 

@w:150px;
@h:150px;
body{
  background: blanchedalmond;
  .demo01{
    width: @w;
    background: #0ff;
    .demo01-01{
      float: left;
      width: 100px;
      height: 200px;
      background: #ff0;
    }
  }
  .demo02{
    width: @w;
    height: @h;
    background: #f0f;
  }
}

在这里插入图片描述

清除浮动


entry.less 文件
 

@w:150px;
@h:150px;
body{
  background: blanchedalmond;
  .demo01{
    width: @w;
    background: #0ff;
    &:after{
      content: '';
      display: block;
      clear: both;
    }
    .demo01-01{
      float: left;
      width: 100px;
      height: 200px;
      background: #ff0;
    }
  }
  .demo02{
    width: @w;
    height: @h;
    background: #f0f;
  }
}

在这里插入图片描述



2.6 样式属性值计算

Less 计算样式：


  • @wOne: 300px;

  • @wOne + 30px

  • .box {width:(@wOne - 20) * 5;}
  • 加减乘除皆可

CSS 计算样式：


  • width: ~'calc(100px + 30%)'

    ==

    cal(130px)

  • width: ~'calc(100% + 30px)'

    ==

    cal(130%)
  • 加减乘除皆可



2.7 避免编译

有时候我们需要输出一些不正确的 css 语法或者使用一些 Less 不认识的专用语法

要输出这样的值我们可以在字符串前加一个

~

例如:

width: ~'calc(100% - 35px)';

使用：

.box {width:~'calc(300px-30px)';}

==>

.box {width: calc(300px-30px)}



2.8 模块引入

利用

@import './triangle.less';

或者

@import url('./triangle.less');

引入模块


index.html 文件
 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="demo01">demo01
    <!-- <div class="demo01-01">demo01-01</div> -->
  </div>
  <div class="demo02">demo02</div>
  <script src="./out/index.js"></script>
</body>
</html>


triangle.less 文件
 

.triangle(@_,...){
  border-width: 50px;
  border-style: solid;
  border-color: transparent;
}
.triangle(top,@borderColor){
  border-top-width: 0;
  border-bottom-color: @borderColor;
}
.triangle(bottom,@borderColor){
  border-bottom-width: 0;
  border-top-color: @borderColor;
}
.triangle(right,@borderColor){
  border-right-width: 0;
  border-left-color: @borderColor;
}
.triangle(left,@borderColor){
  border-left-width: 0;
  border-right-color: @borderColor;
}


entry.less 文件
 

// @import './triangle.less';
@import url('./triangle.less');
body{
  .demo01{
    width: 0;
    height: 0;
    .triangle(right,#f0f);
  }
  .demo02{
    width: 0;
    height: 0;
    .triangle(top,#0ff);
  }
}


版权声明：本文为JT61100原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。