less语法--Math函数/命名空间/避免编译

责编:menVScode 2018-03-12 22:52 阅读(408)

Math函数:round()--四舍五入、ceil()--向上取整、floor()--向下取整。

/* less */
.box{
    width:round(59.5)*1px;
    height:ceil(21.1)*1px;
    border:floor(2.6)*1px solid red;
}

/* 编译后的css */
.box {
  width: 60px;
  height: 22px;
  border: 2px solid #ff0000;
}


less的命名空间

有时候,你可能为了更好组织CSS或者单纯是为了更好的封装,将一些变量或者混合模块打包起来, 你可以像下面这样在#bundle中定义一些属性集之后可以重复使用:

/* less */
#bundle {
    .button () {
        display: block;
        border: 1px solid black;
        background-color: grey;
        &:hover { background-color: white }
    }
    .tab {  }
    .citation {  }
}
#header a {
    color: orange;
    #bundle > .button;
}

/* 编译后的css */
#header a {
  color: orange;
  display: block;
  border: 1px solid black;
  background-color: grey;
}
#header a:hover {
  background-color: #ffffff;
}


less的文件注释

//:不会被编译到css文件中,通常用于生产环境;

/**/:会被编译到css文件中;


Importing

可以在main文件中通过下面的形势引入 .less 文件, .less 后缀可带可不带。

@import "lib.less";  // 内部定义了变量,在引入的那个文件变量也能用。
@import "lib";

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

@import "lib.css";


避免编译:~

/* less */
@rem:20rem;
.box{
    font:(12/@rem)~'/'(20/@rem) '宋体';
}
/* 编译后的css */
.box {
  font: 0.6rem / 1rem '宋体';
}
标签: less math importing
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码