Less的简单使用(一)——变量的用法

Less的简单使用(一)——变量的用法

Less是css的扩展,Less不仅与CSS向后兼容,而且它添加的其他功能都使用现有的CSS语法。

变量

一、变量正常用法(variables)

在一个位置控制常用值
.less文件中

/**/ 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;
}**

.css文件中对应的css代码:

a,
.link {
  color: #428bca;
}
.widget {
  color: #fff;
  background: #428bca;
}
二、变量作为选择器名称使用

语法:变量声明:@变量:值 --------------使用:.@{变量}
.less文件中代码:

//Variables
@my-selector: bananer;
//Usage
.@{my-selector} {
    font-weight: bold;
    color: lightblue;
}

.css文件中对应的css代码:

.bananer {
  font-weight: bold;
  color: lightblue;
}
三、变量作为属性名称使用

使用方法与作为选择器名称使用一样:
.less文件中代码:

// Properties
@property: color;

.@{property} {
    @{property}: red;
    background-@{property}: green;
}

.css文件中对应的css代码:

.color {
  color: red;
  background-color: green;
}
三、变量作为URL使用

语法:@变量:值 ----------- URL使用:url("@{变量}/图片名称")(注:变量即路径)
直接在变量中直接写入完整的路径也是可以的
.less文件中的代码:

//URLs
@images: "../img";
body {
    background-image: url("@{images}/white-sand.png");
}

.css文件中对应的css代码:

body {
  background-image: url("../img/white-sand.png");
}
四、变量作为@import语句使用

用法跟URL一样

// Variables
@themes: "../test";
// Usage
@import "@{themes}/test.less";

在.css文件中输出的即为tess.less中所对应的css代码,而不是@import语句

五、变量作为变量名使用

在.less文件中,可以使用变量定义另一个变量的名称
.less文件中的代码:

// Variable Variables
@primary: lightblue;
@secondary: lightyellow;

.section {
    @color: primary;

    .element {
        color: @@color;
    }
    p {
        color: @secondary;
    }
}

.css文件中对应的css代码:

.section .element {
  color: lightblue;
}
.section p {
  color: lightyellow;
}
六、变量的Lazy Evaluation

变量在使用之前可以不必声明,可以在使用之后声明
如果存在局部变量,那么该作用域的属性会引用局部变量,如果不存在局部变量,那么后面声明的变量会覆盖前面声明的变量(如果声明了两个局部变量,同理)
.less文件中的代码:

// Lazy Evaluation
.lazy-eval {
    width: @var;
    @a: 100px;
}
@var: @a;
@a: 80px;
@a: 40px;

.css文件中对应的css代码:

.lazy-eval {
  width: 100px;
}
七、属性作为变量

使用$prop语法将属性当作变量来使用
.less文件中的代码:

//   Properties as Variables 
.widget {
    color: #dafafb;
    background-color: $color;
}
.ul {
    height: 20px;
    .li {
        padding: $height;
    }
    height: 40px;
}

.css文件中对应的css代码:

.widget {
  color: #dafafb;
  background-color: #dafafb;
}
.ul {
  height: 20px;
  height: 40px;
}
.ul .li {
  padding: 40px;
}
八、默认变量

默认变量使得可以通过在后面放置定义来覆盖变量
.less文件中的代码:

// Default Variables
@base-color: green;
@dark-color: darken(@base-color, 20%);  //深绿色

.footer {
    @base-color: red;
    color: @dark-color;
}

.css文件中所对应的css代码:

.footer {
  color: #990000;  //深红色
}

由于延迟加载, @base-color已被覆盖并且@dark-color为深红色

你可能感兴趣的:(Less)