Less: css预处理语言

时间：2024-02-24 11:03:04

目录

1 变量

1.1 选择器变量

1.2 属性变量

1.3 url变量

1.4 声明变量

1.5 变量的运算

1.6 变量的作用域

1.7 变量定义变量

2 嵌套

2.1 简单嵌套

2.2 & 的使用

2.3 媒体查询

3 混合

3.1 无参数方法

3.2 默认参数方法

3.3 方法的匹配模式

3.4 方法的命名空间

3.5 方法的条件筛选

3.6 数量不定的参数

3.7 方法使用 !inportant

3.8 循环方法  (递归调用)

3.9 属性拼接

3.10 基于混合的映射

4 继承

4.1 extend 关键字的使用

4.2 all 全局搜索替换

4.3 减少代码的重复性

5 条件表达式 

5.1 带条件的混合

5.2 类型检测函数

5.3 单位检测函数

6 函数

7 导入

7.1 导入但是不编译

7.2 once  导入相同的文件只会执行一次

7.3 multiple  导入相同的文件可以执行多次

1 变量

1.1 选择器变量

【less】

@mySelecxtor: #sp;
@wrap: warp;

@{mySelecxtor} {
    font-size: 60px;
    font-family: 'Courier New', Courier, monospace;
    color: yellow;
}

.@{wrap} {
    width: 100px;
    height: 100px;
}
#@{wrap} {
    width: 200px;
    height: 200px;
}

【css】

#sp {
  font-size: 60px;
  font-family: 'Courier New', Courier, monospace;
  color: yellow;
}
.warp {
  width: 100px;
  height: 100px;
}
#warp {
  width: 200px;
  height: 200px;
}

1.2 属性变量

【less】

@borderStyle: border-style;
@solid: solid;

.wrap{
    @{borderStyle}: @solid;
}

【css】

.warp {
  border-style: solid;
}

1.3 url变量

当有相同的根目录时，使用这个比较方便

【less】 

@images: "../images";

.box1 {
    background: url("@{images}/111.jpg");
}

【css】

.box1 {
  background: url("../images/111.jpg");
}

1.4 声明变量

类似于声明一个函数，使用时，加小括号调用

【less】 

@background: { background: #000; }

#main {
    @background();
}

【css】

#main {
  background: #000;
}

1.5 变量的运算

在less中变量可以进行 + - * / 运算

【less】

@color: blue;
@border: 5px + 10;  // 在连接运算的时候，注意添加空格

h1 {
    font-size: @border *2 ;
    color: @color;
}

.box {
    font-size: @border + 10;
    font-family: 楷体;
}

【css】

h1 {
  font-size: 30px;
  color: blue;
}
.box {
  font-size: 25px;
  font-family: 楷体;
}

1.6 变量的作用域

会优先使用距离自己更近的变量及其的值

【less】

@new: @a;
@a: 10px;

#main {
    width: @new;
    @a: 20px;
}

#sidebar {
    width: @new;
}

【css】

#main {
  width: 20px;
}
#sidebar {
  width: 10px;
}

1.7 变量定义变量

【less】

@fond: @var;
@var: '666';

#wrap::after{
    content: @fond;
}

【css】

#wrap::after {
  content: '666';
}

2 嵌套

2.1 简单嵌套

【less】

.container {
    width: 100%;
    height: 100%;
    #wrap {
        width: 200px;
        height: 300px;

        li {
            width: 100px;
            height: 100px;
        
        }
        a {
            color: pink;
        }
    }
}

【css】

.container {
  width: 100%;
  height: 100%;
}
.container #wrap {
  width: 200px;
  height: 300px;
}
.container #wrap li {
  width: 100px;
  height: 100px;
}
.container #wrap a {
  color: pink;
}

2.2 & 的使用

& 表示当前选择器的父级

【less】

#content {
    a {
        color: pink;

        &:hover {
            color: red;
        }
    }
}

【css】

如果不加 & 符，就会把 :hover 当作一个选择器

#content a {
  color: pink;
}
#content a:hover {
  color: red;
}

2.3 媒体查询

【less】

#main {
    @media screen {
        @media (max-width: 768px) {
            width: 100px;  
        }
    }
}

【css】

@media screen and (max-width: 768px) {
  #main {
    width: 100px;
  }
}

3 混合

3.1 无参数方法

【less】

在这边.card 和 .card()是等价的，为了区分，建议使用函数名加括号的方式

.card() {
    background-color: yellow;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

#wrap {
    .card();
}

【css】

#wrap {
  background-color: yellow;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

3.2 默认参数方法

【less】

.border(@a:10px, @b:50px, @c:30px, @color: red) {
    border: 1px solid @color;
    box-shadow: @arguments;        // @arguments 表示使用全部参数
}

#wrap2{
    .border()
}

【css】

#wrap2 {
  border: 1px solid red;
  box-shadow: 10px 50px 30px red;
}

3.3 方法的匹配模式

【less】

.triangle(top, @width: 20px, @color: green) {
    border-color: @color transparent transparent  transparent;
}

.triangle(right, @width: 20px, @color: green) {
    border-color: transparent @color transparent  transparent;
}
.triangle(bottom, @width: 20px, @color: green) {
    border-color: transparent transparent @color transparent;
}
.triangle(left, @width: 20px, @color: green) {
    border-color: transparent transparent transparent @color;
}

.triangle(@_, @width: 20px, @color: green) {
    border-style: solid;
    border: @width;
}
#main {
    .triangle(bottom, 50px, blue);
}

@_ 是 Less 中的一个占位符参数，它的作用是接受任意数量的无名参数。在这个例子中，我们使用了这个占位符参数来定义 .triangle 类，使得它可以接受不同的方向参数（top、right、bottom、left）以及可选的宽度和颜色参数。这样我们就可以轻松地创建各种形状和颜色的三角形，而不需要针对每种情况都定义一个新类。 

【css】

#main {
  border-color: transparent transparent blue transparent;
  border-style: solid;
  border: 50px;
}

3.4 方法的命名空间

【less】

#card {
    background: red;
    .d(@w: 300px){
        width: @w;
        #a(@h: 300px) {
            height: @h;
        }
    }
}

#wrap3 {
    #card > .d > #a(100px);  // 使用 > 号时，父元素不能加括号
}
#wrap4 {
    #card > .d(100px);
}

【css】

#card {
  background: red;
}
#wrap3 {
  height: 100px;
}
#wrap4 {
  width: 100px;
}

3.5 方法的条件筛选

【less】

#c {
    // when and   &&
    .border1(@width, @color, @style) when (@width >= 100px) and (@color = red) {
        border: @width @style @color;
    }
    // when not   !
    .border2(@width, @color, @style) when not (@width < 100px) {
        border: @width @style @color;
    }
 
    // 逗号分隔符  ||
    .border3(@width, @color, @style) when (@width > 100px), (@color = red) {
        border: @width @style @color;
    }
}

#mainN {
    #c>.border1(100px, red, solid);
}

【css】

#mainN {
  border: 100px solid red;
}

3.6 数量不定的参数

【less】

... 为ES6中的扩展运算符

.boxSha(...) {
    box-shadow: @arguments;
}
#mainN2 {
    .boxSha(1px 2px 3px red);
}

【css】

#mainN2 {
  box-shadow: 1px 2px 3px red;
}

3.7 方法使用 !inportant

【less】

.test {
    color: red;
    margin-left: 30px;
}
.M {
    .test() !important;
}

【css】

.M {
  color: red !important;
  margin-left: 30px !important;
}

3.8 循环方法  (递归调用)

【less】

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

【css】

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

3.9 属性拼接

+代表逗号     +_ 代表空格  

【less】

.b() {
    box-shadow+: inset 1px 1px 2px #555;
}
.Mi {
    .b();
    box-shadow+: 1px 1px 2px #aa2828;
}

// -----------------------------------------

.Animation() {
    transform+_: scale(2);
}
.Mai {
    .Animation();
    transform+_: rotate(15reg);
}

【css】

.Mi {
  box-shadow: inset 1px 1px 2px #555, 1px 1px 2px #aa2828;
}
.Mai {
  transform: scale(2) rotate(15reg);
}

3.10 基于混合的映射

【less】

#colors() {
  primary: blue;
  secondary: green;
}

.button {
  color: #colors[primary];
  border: 1px solid #colors[secondary];
}

【css】 

.button {
  color: blue;
  border: 1px solid green;
}

4 继承

4.1 extend 关键字的使用

【less】

.a {
    color: rgb(208, 0, 255);
    .b {
        letter-spacing: 40px;
        font-weight: bold;
    }
}

.main{
    font-size: 40px;
    &:extend(.a);

    &:extend(.a .b);
}

【css】

.a,
.main {
  color: #d000ff;
}
.a .b,
.main {
  letter-spacing: 40px;
  font-weight: bold;
}
.main {
  font-size: 40px;
}

4.2 all 全局搜索替换

【less】

#main1 {
    width: 200px;
}
#main1 {
    &::after{
        content: 'less is good';
    }
}

#wrap:extend(#main1 all) {
    width: 300px;
}

继承所有的 #main1

【css】

#main1,
#wrap {
  width: 200px;
}
#main1::after,
#wrap::after {
  content: 'less is good';
}
#wrap {
  width: 300px;
}

4.3 减少代码的重复性

【less】

.Method {
    width: 200px;
    &::after{
        content: 'less is good';
    
    }
}

#M {
    .Method
}

【css】

#M {
  width: 200px;
}
#M::after {
  content: 'less is good';
}

5 条件表达式 

5.1 带条件的混合

比较运算符： =  >  <  >=  <=

【less】

.mixin(@a) when(lightness(@a) >= 50%) {
    background-color: black;
}
.mixin(@a) when(lightness(@a) < 50%) {
    background-color: white;
}
.mixin(@a) {
    color: @a;
}

.class1 {
    .mixin(#ddd)
}

.class2 {
    .mixin(#555)
}

【css】

.class1 {
  background-color: black;
  color: #ddd;
}
.class2 {
  background-color: white;
  color: #555;
}

5.2 类型检测函数

【less】

/* 
    检测值的类型：
    iscolor
    isnumber
    isstring
    iskeyword
    isurl
    ....
*/

.mixin1(@a: #fff; @b:0;) when(iscolor(@a)) {
    background-color: @a;
}

.mixin2(@a: #fff; @b:0;) when(isnumber(@b)) {
    background-color: @b;
}

.class3 {
    .mixin1(#ddd, 10);
    .mixin2(#ddd, 10);
}

【css】

.class3 {
  background-color: #ddd;
  background-color: 10;
}

5.3 单位检测函数

/* 
    检测值的单位；
    ispixel
    ispercentage
    isem
    isunit
    ......

*/

6 函数

这边只介绍一个 color() 函数，用的时候直接查官网就行了

【less】

body {
    color: color("#fff");  // color函数
}

【css】

body {
  color: #fff;
}

7 导入

在一个 .less文件中导入其它 .less文件

@import './nav.less';

7.1 导入但是不编译

@import (reference) './bootstrap.less';

7.2 once  导入相同的文件只会执行一次

@import (once) './bootstrap.less';
@import (once) './bootstrap.less';    // 不会执行了

7.3 multiple  导入相同的文件可以执行多次

@import (multiple) './bootstrap.less';
@import (multiple) './bootstrap.less';    // 也会执行

相关文章