less使用迷你书

加入QQ群：864680898，一起学习进步！点击群名可查看本人网站，有最新文章！

less使用迷你书 官方文档

什么是less，less做什么

• Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展

• Less 可以运行在 Node 或浏览器端

• 我理解它的用途是将css复用性提高

less的安装和配置

• 1、 demo练习模式

// 1. 全局安装
npm install -g less

// 2. 编译成css
lessc styles.less // 以原名

lessc styles.less newName.css

• 2、webpack下项目模式

// 1. 安装 npm install --save less less-loader
// 2. webpack.base.conf.js 配置加载器
module:{
  rules: [
    {
      test: /\.less$/,
      loader: 'style-loader!css-loader!less-loader',
    }
  ]
}

引入

@import "foo.less";

1. 定义变量

• 以@符开头接字母

@gloabalColor: #33c9d4;

• 变量值可进行运算

@basic: 40;
.container{
  width: 2px * @basic;
}

2. 混合

可以在一个类下调用另一个

.border{
  border: 1px solid #eee;
}
.title{
  .border;
  width: 20px;
  height: 20px;
}
.title a{
  .border;
  text-decoration: none;
}

3. 可以嵌套使用

层级关系下可嵌套，如

.title{
  width: 20px;
  height: 20px;
}
.title a{
  text-decoration: none;
}

嵌套写法为：

.title{
  width: 20px;
  height: 20px;
  a{
    text-decoration: none;
  }
}

• &符号可直接以该类为开头

.clearfix {
  display: block;
  zoom: 1;

  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

• 诸如media或keyframe可以以与选择器相同的方式嵌套指令。指令位于顶部，相对于同一规则集内其他元素的相对顺序保持不变。这叫做冒泡

.screen-color {
  @media screen {
    color: green;
    @media (min-width: 768px) {
      color: red;
    }
  }
  @media tv {
    color: black;
  }
}

// 输出为
@media screen {
  .screen-color {
    color: green;
  }
}
@media screen and (min-width: 768px) {
  .screen-color {
    color: red;
  }
}
@media tv {
  .screen-color {
    color: black;
  }
}

4. 自定义函数

定义一个设置宽高的函数

.wh(@w,@h){
  width: @w;
  height: @h;
}

// 使用时
.title{
  .wh(20px, 20px);
}
//等同于
.title{
  width: 20px;
  height: 20px;
}

5. 扩展

nav ul {
  &:extend(.inline);
  background: blue;
}
.inline {
  color: red;
}

// 输出为
nav ul {
  background: blue;
}
.inline,
nav ul {
  color: red;
}

6. 循环

• 在Less中，mixin可以自称。当与Guard表达式和模式匹配结合使用时，这种递归mixin 可用于创建各种迭代/循环结构。

.generate-columns(4);

.generate-columns(@n, @i: 1) when (@i =< @n) {
  .column-@{i} {
    width: (@i * 100% / @n);
  }
  .generate-columns(@n, (@i + 1));
}

// 输出为
.column-1 {
  width: 25%;
}
.column-2 {
  width: 50%;
}
.column-3 {
  width: 75%;
}
.column-4 {
  width: 100%;
}