Less简单语法

LESS（Leaner Style Sheets）定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。
LESS 做为 CSS 的一种形式的扩展，它并没有阉割 CSS 的功能，而是在现有的 CSS 语法上，添加了很多额外的功能

1.注释

//注释内容   不会被编译到css文件里

/* 注释内容 */ 会被编译到css文件里

// 顺便说说 & 符号，它其实就是指上一个父级标签

2.变量

变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。

less用 @ 符号来声明变量

   // LESS
   @color: #4D926F;
   #header {
   color: @color;
   }
   h2 {
   color: @color;
   }

   /* 生成的 CSS */
   #header {
   color: #4D926F;
   }
   h2 {
   color: #4D926F;
   }
   // LESS
   @color: #4D926F;
   #header {
   color: @color;
   }
   h2 {
   color: @color;
   }

   /* 生成的 CSS */
   #header {
   color: #4D926F;
   }
   h2 {
   color: #4D926F;
   }

less变量还可以作为属性名字
- 作为属性值调用时：@变量名
- 作为属性名调用时：@{变量名}

//less
.box{
    position: relative;
    @{lf}:10px;
    margin-@{lf}:20px;
    float: @lf;
}
//css
.box {
  position: relative;
  left: 10px;
  margin-left: 20px;
  float: left;
}
//less
.box{
    position: relative;
    @{lf}:10px;
    margin-@{lf}:20px;
    float: @lf;
}
//css
.box {
  position: relative;
  left: 10px;
  margin-left: 20px;
  float: left;
}

变量可以在外部声明，也可以在内部声明

//在内部声明
    //less
    .inner{
        @cl: #f00;
        color:@cl;
    }
    //css
    .inner {
        color: #ff0000;
    }
//在内部声明
    //less
    .inner{
        @cl: #f00;
        color:@cl;
    }
    //css
    .inner {
        color: #ff0000;
    }

3.嵌套

我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。 - & 表示选择父元素

//less
#header {
    h1 {
      font-size: 26px;
      font-weight: bold;
    }
    p { font-size: 12px;
      a { text-decoration: none;
        &:hover { border-width: 1px }
      }
    }
}
//css
#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border-width: 1px;
}
//less
#header {
    h1 {
      font-size: 26px;
      font-weight: bold;
    }
    p { font-size: 12px;
      a { text-decoration: none;
        &:hover { border-width: 1px }
      }
    }
}
//css
#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border-width: 1px;
}

4.混合

混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。

//less
.bg (@bg: #f00) {
    background-color: @bg;
} /* 不会被编译到css中 */
  
  #header {
    .bg;
  }
  #main {
    .bg();
  }
  #footer {
    .bg(#0f0); //带参数调用
    font-size: 16px;
  }
//css
#header {
  background-color: #ff0000;
}
#main {
  background-color: #ff0000;
}
#footer {
  background-color: #00ff00;
  font-size: 16px;
}
//less
.bg (@bg: #f00) {
    background-color: @bg;
} /* 不会被编译到css中 */
  
  #header {
    .bg;
  }
  #main {
    .bg();
  }
  #footer {
    .bg(#0f0); //带参数调用
    font-size: 16px;
  }
//css
#header {
  background-color: #ff0000;
}
#main {
  background-color: #ff0000;
}
#footer {
  background-color: #00ff00;
  font-size: 16px;
}

也可以定义多个变量

//less
.box1 (@w:100px, @h:200px) {
    width: @w;
    height: @h;
}
.wrap1 {
    .box1;
}
.wrap2 {
    .box1(200px,100px);
}
.wrap3 {
    .box1(200px);
}
.wrap4 {
    .box1(@h:100px);
}
.wrap5 {
    .box1();
}
//css
.wrap1 {
  width: 100px;
  height: 200px;
}
.wrap2 {
  width: 200px;
  height: 100px;
}
.wrap3 {
  width: 200px;
  height: 200px;
}
.wrap4 {
  width: 100px;
  height: 100px;
}
.wrap5 {
  width: 100px;
  height: 200px;
}
//less
.box1 (@w:100px, @h:200px) {
    width: @w;
    height: @h;
}
.wrap1 {
    .box1;
}
.wrap2 {
    .box1(200px,100px);
}
.wrap3 {
    .box1(200px);
}
.wrap4 {
    .box1(@h:100px);
}
.wrap5 {
    .box1();
}
//css
.wrap1 {
  width: 100px;
  height: 200px;
}
.wrap2 {
  width: 200px;
  height: 100px;
}
.wrap3 {
  width: 200px;
  height: 200px;
}
.wrap4 {
  width: 100px;
  height: 100px;
}
.wrap5 {
  width: 100px;
  height: 200px;
}

@arguments 表示多个变量

//less
.shadow (@x,@y,@b,@c){
    -webkit-box-shadow:@arguments;
    -moz-box-shadow: @arguments;
    -o-box-shadow:@arguments;
    -ms-box-shadow: @arguments;
    box-shadow: @arguments;
}
.box{
    .shadow(1px,1px,2px,#f00);
}
//css
.box {
  -webkit-box-shadow: 1px 1px 2px #ff0000;
  -moz-box-shadow: 1px 1px 2px #ff0000;
  -o-box-shadow: 1px 1px 2px #ff0000;
  -ms-box-shadow: 1px 1px 2px #ff0000;
  box-shadow: 1px 1px 2px #ff0000;
}
//less
.shadow (@x,@y,@b,@c){
    -webkit-box-shadow:@arguments;
    -moz-box-shadow: @arguments;
    -o-box-shadow:@arguments;
    -ms-box-shadow: @arguments;
    box-shadow: @arguments;
}
.box{
    .shadow(1px,1px,2px,#f00);
}
//css
.box {
  -webkit-box-shadow: 1px 1px 2px #ff0000;
  -moz-box-shadow: 1px 1px 2px #ff0000;
  -o-box-shadow: 1px 1px 2px #ff0000;
  -ms-box-shadow: 1px 1px 2px #ff0000;
  box-shadow: 1px 1px 2px #ff0000;
}

5.继承

继承Extend，它允许一个选择器继承另一个选择器的样式。

//less
nav{
    width: 100px;
    height: 50px;
}
ul:extend(nav){
    background: #f00;
}
ol{
    &:extend(nav);
    background:#0f0;
}
//css
nav,
ul,
ol {
  width: 100px;
  height: 50px;
}
ul {
  background: #f00;
}
ol {
  background: #0f0;
}
//less
nav{
    width: 100px;
    height: 50px;
}
ul:extend(nav){
    background: #f00;
}
ol{
    &:extend(nav);
    background:#0f0;
}
//css
nav,
ul,
ol {
  width: 100px;
  height: 50px;
}
ul {
  background: #f00;
}
ol {
  background: #0f0;
}

一个选择器还可以继承多个选择器的样式

//less
nav{
    width: 100px;
    height: 50px;
}
.color{
    color:#00f;
}
ul:extend(nav, .color){
    background: #f00;
}
//css
nav,
ul {
  width: 100px;
  height: 50px;
}
.color,
ul {
  color: #00f;
}
ul {
  background: #f00;
}
//less
nav{
    width: 100px;
    height: 50px;
}
.color{
    color:#00f;
}
ul:extend(nav, .color){
    background: #f00;
}
//css
nav,
ul {
  width: 100px;
  height: 50px;
}
.color,
ul {
  color: #00f;
}
ul {
  background: #f00;
}

6.运算

less运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。

//less
@the-border: 1px;
@base-color: #111;
@red: #842210;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}
#footer { 
  color: @base-color + #030;
}
//css
#header {
  color: #333333;
  border-left: 1px;
  border-right: 2px;
}
#footer {
  color: #114411;
}
//less
@the-border: 1px;
@base-color: #111;
@red: #842210;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}
#footer { 
  color: @base-color + #030;
}
//css
#header {
  color: #333333;
  border-left: 1px;
  border-right: 2px;
}
#footer {
  color: #114411;
}

7.引入

你可以在当前文件中通过下面的形势引入 .less 文件, .less 后缀可带可不带:

@import "lib.less";
@import "lib";
@import "lib.less";
@import "lib";

如果你想导入一个CSS文件而且不想LESS对它进行处理，只需要使用.css后缀就可以,这样LESS就会跳过它不去处理它.

@import "lib.css";
@import "lib.css";

posted @ 2022-04-17 23:46 RHCHIK 阅读(105) 评论(0) 编辑收藏举报

刷新页面返回顶部

百索园前端

懂一点代码的程序员

Less简单语法

Less简单语法

1.注释

2.变量

3.嵌套

4.混合

5.继承

6.运算

7.引入