less学习二---变量

Cruise_Chan 发布于2019-04-23 13:27 / 3522人阅读

摘要：中声明的变量可以存储属性值，还可以存储选择器，属性名，以及等变量声明及赋值格式属性值变量编译成选择器或者编译后都是一定要把定义的选择器变量名放在里面，并在花括号的前面加编译后在定义变量时，注意将路径用引号扩起来属性名编译后在中可以用一个

less中声明的变量可以存储css属性值，还可以存储选择器，属性名，url以及@imporant等

变量声明及赋值格式：@variableName : varableValue ;

//属性值

</>复制代码 
//less
//变量
@pink:pink;
.content{
    color:@pink;
}

编译成

</>复制代码 
.content{
    color:#ffc0cb;//pink
}

//选择器

</>复制代码 
@selector:content;
.@{selector}{
    color:pink;
}
//或者
@sector:.content;
@{selector}{
　　color:pink;
}
//编译后都是
.content{
    color:pink;
}

一定要把定义的选择器变量名放在{}里面，并在花括号的前面加@

//url

</>复制代码 
@img:"../img/";
.content{
    backgrond:url("@{img}/sea.jpg");
}
//编译后
.content{
    background:url("../img/sea.jpg");
}

在定义url变量时，注意将路径用引号扩起来；

／／属性名

</>复制代码 
@property:color;
.content{
    background-@{property}:green;
    a{
        @{property}:white;
    }
}
//编译后
.content{
    background-color:#00ff00;
}
.content a{
    color:white;
}

在less中可以用一个变量来定义另一个变量

</>复制代码 
@primary:red;
.content{
    @color:primary;
    background-color:@@color;
}
//或者
.content{
    @color:@primary;
    background-color:@color;
}
//编译后都是
.content{
    background-color:red;
}

less 中的懒加载

即我们可以不需要在使用变量之前使用这个变量

</>复制代码 
@h:300px;
.content{
    width:@var;
    height:@h;
}
@var:9%;
//编译后
.content{
  width:9%;
  height:300px;
}

当我们重复定义多个变量时，以当前作用域中最后定义的为准，若当前作用域没有定义，则逐级向上寻找；

</>复制代码 
@var: 0;
.class {
  @var: 1;
  .brass {
    @var: 2;
    three: @var;
    @var: 3;
  }
  one: @var;
}
//编译后
.class {
  one: 1;
}
.class .brass {
  three: 3;
}

在3.0版本中最新的利用$propertyName来获取属性值，有时候利用好了可以使代码看起来更简便

</>复制代码 
.widget {
  color: #efefef;
  background-color: $color;
}
//编译后
.widget {
  color: #efefef;
  background-color: #efefef;
}

GPU云服务器云服务器深度学习二 less less2 html使用less

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1900.html

less学习笔记

摘要：方便了的编写和维护。本文记录了开发中最常用的几种语法。这里的单位可以省略，但是两者必须有一个带单位嵌套嵌套是中非常有用高效的语法。学习学习学习在中如果我们需要对这一结构的样式进行渲染，就会使用等选择器。一、什么是less less是一种动态样式语言，属于css预处理语言的一种，它使用类似css的语法，为css赋予了动态语言的特性，如变量、运算、函数等。方便了css的编写和维护。 le...

MkkHou 2019-08-02 15:58 评论0 收藏0
less学习笔记

摘要：方便了的编写和维护。本文记录了开发中最常用的几种语法。这里的单位可以省略，但是两者必须有一个带单位嵌套嵌套是中非常有用高效的语法。学习学习学习在中如果我们需要对这一结构的样式进行渲染，就会使用等选择器。一、什么是less less是一种动态样式语言，属于css预处理语言的一种，它使用类似css的语法，为css赋予了动态语言的特性，如变量、运算、函数等。方便了css的编写和维护。 le...

codercao 2019-08-29 13:53 评论0 收藏0
css还可以这么写？

摘要：如果我们使用的话，就可以这么写我们要修改主色，只需要将修改为即可。二让我们可以用伪类的写法去合并一些类。比如会编译成可以看到，生成的中并没有任何的变化，那这个做了什么呢其实在通过引用的对象内发生了变化。作为一个前端，毫无疑问css肯定是最基础的一项技能之一。css是一个标记语言，没有编程语言的诸多特性，比如变量定义，复用，嵌套等，所以相应的开发效率也受到限制。在追求效率和自动化的当下...

kidsamong 2019-08-29 16:35 评论0 收藏0
css还可以这么写？

摘要：如果我们使用的话，就可以这么写我们要修改主色，只需要将修改为即可。二让我们可以用伪类的写法去合并一些类。比如会编译成可以看到，生成的中并没有任何的变化，那这个做了什么呢其实在通过引用的对象内发生了变化。作为一个前端，毫无疑问css肯定是最基础的一项技能之一。css是一个标记语言，没有编程语言的诸多特性，比如变量定义，复用，嵌套等，所以相应的开发效率也受到限制。在追求效率和自动化的当下...

zhiwei 2019-08-23 11:36 评论0 收藏0
css还可以这么写？

摘要：如果我们使用的话，就可以这么写我们要修改主色，只需要将修改为即可。二让我们可以用伪类的写法去合并一些类。比如会编译成可以看到，生成的中并没有任何的变化，那这个做了什么呢其实在通过引用的对象内发生了变化。作为一个前端，毫无疑问css肯定是最基础的一项技能之一。css是一个标记语言，没有编程语言的诸多特性，比如变量定义，复用，嵌套等，所以相应的开发效率也受到限制。在追求效率和自动化的当下...

RaoMeng 2019-08-02 11:22 评论0 收藏0