Less学习笔记

最新推荐文章于 2024-06-24 17:34:14 发布

_无意_

最新推荐文章于 2024-06-24 17:34:14 发布

阅读量429

点赞数 9

文章标签：学习笔记

本文链接：https://blog.csdn.net/wqdjlqfwqlh/article/details/134870387

版权

一、变量

1.值变量

// @开头定义变量，使用时可直接键入

@color:red;    // 不需要加引号
@fontSize:50px;
.main{
  color: @color;
  font-size: @fontSize;
}

2.选择器变量

@inner:.inner;
@outer:outer;

@{inner}{    // 需用大括号包裹
  width: 300px;
  height: 300px;
  background-color: orange;
}
.@{outer}{
  width: 500px;
  height: 500px;
  background-color: skyblue;
}

3.属性变量

@bgc:background-color;
@fs:font-size;

.inner{
  width: 300px;
  height: 300px;
  @{bgc}: orange;    // 变量名需用大括号包裹
  @{fs}:50px
}
.outer{
  width: 500px;
  height: 500px;
  @{bgc}: skyblue;
}

4.url变量

@image:'./image.png';
@img:'./assets';

.inner{
  width: 300px;
  height: 300px;
  background: url("@{image}");    // 变量名需用大括号包裹
  background-size: cover;
}
.outer{
  width: 500px;
  height: 500px;
  background: url("@{img}/image.png");
  background-size: cover;
}

5.声明变量

@bgred:{background-color: red;}
@bgblue:{background-color: skyblue;}

.inner{
  width: 300px;
  height: 300px;
  @bgblue();
}
.outer{
  width: 500px;
  height: 500px;
  @bgred();
}

6.变量运算

@base:100px;
@color:rgb(1 1 1);
@color16:#111;

.inner{
  width: @base * 3;
  height: @base + 200;
  background-color: @color + 100;
}
.outer{
  width: @base * 5;
  height: @base * 6 - 100;
  background-color: @color16 * 2;
}

7.变量作用域-就近原则

@color:red;

.inner{
  @color:skyblue;
  width: 300px;
  height: 300px;
  background-color: @color;
}
.outer{
  width: 500px;
  height: 500px;
  background-color: @color;
}

8.用变量定义变量

@fs:30px;
@bigSize:"fs";

.inner{
  width: 300px;
  height: 300px;
  background-color: skyblue;
  font-size: @@bigSize;
}
.outer{
  width: 500px;
  height: 500px;
  background-color: red;
}

二、嵌套

1. 基本嵌套

.outer {
  width: 500px;
  height: 500px;
  background-color: red;

  .inner {
    width: 300px;
    height: 300px;
    background-color: skyblue;
  }
}

2.使用&符引用父选择器

基本使用

.outer {
  width: 500px;
  height: 500px;
  background-color: red;

  .inner {
    width: 300px;
    height: 300px;
    background-color: skyblue;
  }

  &:hover{
    background-color: green;
  }
}

编译为

.outer {
  width: 500px;
  height: 500px;
  background-color: red;
}
.outer .inner {
  width: 300px;
  height: 300px;
  background-color: skyblue;
}

.outer:hover{
  background-color: green;
}

可用于生成重复的类名

.box{
  &-box1{
    background-color: red;
  }
  &-box2{
    background-color: orange;
  }
  &-box3{
    background-color: green;
  }
}

编译为

.box-box1 {
  background-color: red;
}

.box-box2 {
  background-color: orange;
}

.box-box3 {
  background-color: green;
}

&表示所有的父选择器而不仅仅是最近的

.outer {
  width: 500px;
  height: 500px;
  background-color: red;

  .inner {
    width: 300px;
    height: 300px;
    background-color: skyblue;

    &:hover{
      background-color: green;
    }
  }
}

编译为

.outer {
  width: 500px;
  height: 500px;
  background-color: red;
}

.outer .inner {
  width: 300px;
  height: 300px;
  background-color: skyblue;
}

.outer .inner:hover {
  background-color: green;
}

可用来改变选择器的顺序，将选择器前置到继承的父选择器

.outer {
  width: 500px;
  height: 500px;
  background-color: red;

  .inner {
    width: 300px;
    height: 300px;
    background-color: skyblue;
    
    .main &{
      font-size: 30px;
    }
  }
}

编译为

.outer{
  width: 500px;
  height: 500px;
  background-color: red;
}

.outer .inner{
  width: 300px;
  height: 300px;
  background-color: skyblue;
}

.main .outer .inner {
  font-size: 30px;
}

3.媒体查询

.main {
  width: 100px;

  @media screen {
    width: 200px;

    @media (min-width: 768px) {
      width: 300px;
    }
  }

  @media(min-width: 1280px) {
    width: 800px;
  }
}

编译为

.main{
  width: 100px;
}

@media screen {
  width: 200px;
}

@media screen and (min-width: 768px) {
  width: 300px;
}

@media (min-width: 1280px){
  width: 800px;
}

三、混合

1.普通混合

.base {
  width: 300px;
  height: 300px;
}

.inner {
  .base;
  background-color: skyblue;
}

编译为

.base {    // 定义的混合会被编译到CSS文件中
  width: 300px;
  height: 300px;
}

.inner {
  width: 300px;
  height: 300px;
  background-color: skyblue;
}

2.不带输出的混合

普通混合的基础上加括号，混合就不会编译到css文件中

.base() {
  width: 300px;
  height: 300px;
}

.inner {
  .base;
  background-color: skyblue;
}

编译为

.inner {
  width: 300px;
  height: 300px;
  background-color: skyblue;
}

3.带参数的混合

.base(@a, @b) {
  width: @a;
  height: @a;
  background-color: @b;
}

.inner {
  .base(300px, skyblue)
}

编译为

.inner {
  width: 300px;
  height: 300px;
  background-color: skyblue;
}

可以设置默认参数，如果没有传参，将使用默认参数

可以使用 @arguments 指代全部参数

.base(@a: 100px, @b: red) {
  width: @a;
  height: @a;
  background-color: @b;
  border: @arguments solid;
}

.inner {
  .base()
}

.outer {
  .base(300px, skyblue)
}

编译为

.inner {
  width: 100px;
  height: 100px;
  background-color: red;
  border: 100px red solid;
}

.outer {
  width: 300px;
  height: 300px;
  background-color: skyblue;
  border: 300px skyblue solid;
}

可以用 ... 表示接收数量不定的的参数

.boxShadow(...) {
  box-shadow: @arguments;
}

.inner {
  .boxShadow(1px, 4px, 10px, red)
}

编译为

.inner {
  box-shadow: 1px 4px 10px red;
}

4.定义多个相同名称的混合

.base(@width) {
  width: @width;
}

.base(@height, @color: red) {    // color有默认值，所以这个也会被匹配
  height: @height;
  color: @color;
}

.inner {
  .base(100px);
}

编译为

.inner {
  width: 100px;
  height: 100px;
  color: red;
}

@_：表示通用的匹配模式，无论同名的哪一个混合被匹配了, 都会先执行通用匹配模式中的代码

.base(@_) {    
  width: 200px;
  height: 200px;
  background-color: orange;
}

.base(GREEN, @color: green, @fontSize: 20px) {
  color: @color;
  font-size: @fontSize;
}

.base(BLUE, @color: skyblue, @fontSize: 30px) {
  color: @color;
  font-size: @fontSize;
}


.inner {
  .base(BLUE);
}

编译为

.inner {
  width: 200px;
  height: 200px;
  background-color: orange;
  color: skyblue;
  font-size: 30px;
}

5.命名参数

引用mixin时可以通过参数名称来为mixin提供参数值，而不必按照特定的顺序来使用参数

.base(@width: 100px, @height: 100px, @color: skyblue, @fontSize: 20px) {
  width: @width;
  height: @height;
  color: @color;
  font-size: @fontSize;
}

.inner {
  .base(200px, 200px, @fontSize: 30px)
}

编译为

.inner {
  width: 200px;
  height: 200px;
  color: skyblue;
  font-size: 30px;
}

6.条件筛选

// 只有 @width > 200px 时才会匹配
.base(@width: 100px, @height: 100px, @color: skyblue) when (@width>200px) {
  width: @width;
  height: @height;
  color: @color;
  background-color: orange;
}

.inner {
  .base(201px)
}

编译为

.inner {
  width: 201px;
  height: 100px;
  color: skyblue;
  background-color: orange;
}

7.混合中变量的返回值

.base(@a, @b) {
  @base: ((@a + @b)*2);
}

.inner {
  .base(100px, 100px);
  width: @base;
}

编译为

.inner {
  width: 400px;
}

8.命名空间

.base() {
  background-color: orange;

  .a(@width: 100px) {
    width: 100px;

    .b(@height: 100px) {
      height: 100px;
    }
  }
}

.inner {
  height: 200px;
  background-color: skyblue;
  .base>.a;    // 只使用 .a()
  // 也可以将>换成空格
  // .base .a;
}

编译为

.inner {
  width: 100px;
  height: 200px;
  background-color: skyblue;
}

四、继承

.base {
  width: 100px;
  height: 100px;
}

.inner:extend(.base) {
  background-color: skyblue;
}

//或者

.base {
  width: 100px;
  height: 100px;
}

.inner {
  &:extend(.base);
  background-color: skyblue;
}

编译为

.inner {
  background-color: skyblue;
}

.base,
.inner {
  width: 100px;
  height: 100px;
}

使用 all 继承所有状态，如伪类选择器

.base {
  width: 100px;
  height: 100px;

  &:hover {
    color: red;
  }
}

.inner {
  &:extend(.base all);
  background-color: skyblue;
}

编译为

.inner {
  background-color: skyblue;
}

.base,
.inner {
  width: 100px;
  height: 100px;
}

.base:hover,
.inner:hover {
  color: red;
}

_无意_

关注

9
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
Less学习笔记

fs:30px;.inner{.outer{.base(@height, @color: red) { // color有默认值，所以这个也会被匹配.inner {编译为.inner {color: red;@_：表示通用的匹配模式，无论同名的哪一个混合被匹配了, 都会先执行通用匹配模式中的代码.inner {编译为.inner {
复制链接

扫一扫