less预处理的概念与使用

最新推荐文章于 2024-03-25 14:10:09 发布

原创最新推荐文章于 2024-03-25 14:10:09 发布 · 351 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#less

本文介绍Less CSS预处理器的基本概念及使用方法，包括变量、可变插值、混合、父选择器、嵌套的冒泡、运算和函数等功能，帮助初学者快速掌握Less语法。

概念

less 官网
Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。

基本的使用

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

总览

1. 变量 @

变量是延迟加载的，不必在使用前声明。所以可以先使用，后定义。因此会出现后面定义的变量覆盖前面的变量

// Variables
@link-color:        #428bca; // sea blue
@link-color-hover:  darken(@link-color, 10%);

// Usage
a,
.link {
  color: @link-color;
}
a:hover {
  color: @link-color-hover;
}
.widget {
  color: #fff;
  background: @link-color;
}

2. 可变插值

// Variables
@my-selector: banner;

// Usage
.@{my-selector} {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

//编译后
.banner {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

3.混合（类似函数的使用）

.b-coloe {
    border: 4px solid red;
}
.box {
    .b-coloe();
    width: 100px;
    height: 200px;
    background-color: blue;
}
//编译后
.b-coloe {
  border: 4px solid red;
}
.box {
  border: 4px solid red;
  width: 100px;
  height: 200px;
  background-color: blue;
}

4.父选择器&

经典的清除浮动案例
.clearfix {
  display: block;
  zoom: 1;

  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}
//编译后
.clearfix {
  display: block;
  zoom: 1;
}
.clearfix:after {
  content: " ";
  display: block;
  font-size: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}

5.嵌套的冒泡

思路：就近原则

 .component {
    width: 300px;
    @media (min-width: 768px) {
      width: 600px;
      @media  (min-resolution: 192dpi) {
        background-image: url(/img/retina2x.png);
      }
    }
   .box {
    @media (min-width: 1280px) {
        width: 800px;
      }
   }
  }
//编译后
.component {
  width: 300px;
}
@media (min-width: 768px) {
  .component {
    width: 600px;
  }
}
@media (min-width: 768px) and (min-resolution: 192dpi) {
  .component {
    background-image: url(/img/retina2x.png);
  }
}
@media (min-width: 1280px) {
  .component .box {
    width: 800px;
  }
}

6.运算（符合数学运算）

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

// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // 结果是 4px

// example with variables
@base: 5%;
@filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%

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

@var: 50vh/2;
width: calc(50% + (@var - 20px));  // 结果是 calc(50% + (25vh - 20px))

转义符，原样输出
~“anything” 或 ~‘anything’，可省略 ~

@min768: ~"(min-width: 768px)";
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}
编译为：

@media (min-width: 768px) {
  .element {
    font-size: 1.2rem;
  }
}

7.函数

简单使用
@base: #f04615;
@width: 0.5;

.class {
  width: percentage(@width); // returns `50%`
  color: saturate(@base, 5%);
  background-color: spin(lighten(@base, 25%), 8);
}