CSS 预处理语言 Less

Unsplash

Less 是一门 CSS 预处理语言,作为 CSS 的一种扩展,Less 不仅完全兼容 CSS 语法,而且连新增的特性也是使用 CSS 语法,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充,Less 可以运行在 Node、浏览器和 Rhino 平台上

Less 可以应用在一些常见的条件逻辑判断场景里,在一些需要重复调用相同属性的地方,比如一个 APP 里的页面,大都是使用同一主题颜色,这时,只需要 Less 定义一个全局的属性,重复调用就可以了

Less 的使用方法有多种,详情请参考 Less中文网,本文主要是通过转换工具 Koala,将写好的.less文件编译成.css文件,也可以通过在编辑器里安装插件来达到文件编译效果

.less文件所在的文件夹拖入 Koala 界面中,就会在界面中显示 less 文件列表,选择对应的文件,点击 Compile 后,即可看到.less文件所在的文件夹里会生成相应的.css文件,也可以通过改变. css文件生成的路径,将其保存到其他地方

使用方法

1. Less 的使用

  • Less 变量是可以进行动态计算和混合的
  • Less 里的变量都是以@作为变量的起始标识,变量名由字母、数字、_- 组成
  • .less 文件中使用 // 进行注释,编译之后的 .css 文件里,注释不会保留,而使用 /**/ 进行注释,在编译之后的 .css 文件里,注释会保留

.less 文件

@color: red;
p {
  color: @color;
}
a {
  color: #123 + #121;
  .btn
}
.btn {
  display: block;
  text-align: center;
  height: 40px;
  width: 80px;
  background-color: red;
}

编译之后的 .css 文件

p {
  color: #ff0000;
}
a {
  color: #224444;
  display: block;
  text-align: center;
  height: 40px;
  width: 80px;
  background-color: red;
}
.btn {
  display: block;
  text-align: center;
  height: 40px;
  width: 80px;
  background-color: red;
}

Less 里的函数结构如下,记住一定要先定义,再调用

函数定义
.f() {
  //函数主体
  }
函数调用
.f()

.less 文件

.btn(@c:240,@h:44px) {
  display: block;
  color: #fff;
  text-align: center;
  height: @h;
  line-height: @h;
  background-color: hsl(@c, 100%, 50%);
}
body {
  color: red;
  p a:nth-child(1) {
    .btn(120,50px);
  }
  p a:nth-child(2) {
    .btn(10,50px);
  }
  span {
    .btn();
    .btn(0, 30px);
  }
}

编译之后的 .css 文件

body {
  color: red;
}
body p a:nth-child(1) {
  display: block;
  color: #fff;
  text-align: center;
  height: 50px;
  line-height: 50px;
  background-color: #00ff00;
}
body p a:nth-child(2) {
  display: block;
  color: #fff;
  text-align: center;
  height: 50px;
  line-height: 50px;
  background-color: #ff2b00;
}
body span {
  height: 44px;
  line-height: 44px;
  background-color: #0000ff;
  display: block;
  color: #fff;
  text-align: center;
  height: 30px;
  line-height: 30px;
  background-color: #ff0000;
}

2. Less 的条件判断及循环

.less文件

.header(@counter) when(@counter <= 6) {
    .icon_@{counter} {
        color: #123 + #121;
        font-size:  @counter * 10px ;
    }
    .header(@counter + 1);
}
.header(1);

编译之后的 .css 文件

.icon_1 {
  color: #224444;
  font-size: 10px;
}
.icon_2 {
  color: #224444;
  font-size: 20px;
}
.icon_3 {
  color: #224444;
  font-size: 30px;
}
.icon_4 {
  color: #224444;
  font-size: 40px;
}
.icon_5 {
  color: #224444;
  font-size: 50px;
}
.icon_6 {
  color: #224444;
  font-size: 60px;
}

3. 使用 Less 来编写一个移动端的登录页面

common.less 文件

// 公共属性设置
@bg: #f2f2f2;
.fs8() {
  font-size: 0.8rem;
}
.fs10() {
  font-size: 1rem;
}
.fs12() {
  font-size: 1.2rem;
}
.fs14() {
  font-size: 1.4rem;
}
.fs16() {
  font-size: 1.6rem;
}
.fs18() {
  font-size: 1.8rem;
}

.clearfix() {
  zoom: 1;
  &:after {        /*& 指代自身*/
    content:"";
    display: block;
    visibility: hidden;
    clear:both;
    height: 0;
    font-size: 0;
  }
}
.ellipsis() {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.btn(@w:100%, @h:44px, @bgc: transparent, @bc: #f2f2f2, @c:#fff) {
  display: block;
  text-align: center;
  color: @c;
  width: @w;
  height: @h;
  line-height: @h;
  background-color: @bgc;
  border: 1px solid @bc;
}
.arrow(@c: #fff, @deg: -45deg) {
  display: block;
  width: 12px;
  height: 12px;
  border-top: 1px solid @c;
  border-left: 1px solid @c;
  transform: rotate(@deg);
}
.arrow-left() {
  .arrow();
}
.arrow-up() {
  .arrow(@deg:45deg);
}

login.less 文件,使用 @import 来引入公共样式

@import "./common";

body {
  background-color: @bg;
}
#topBar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 2.66%;
    height: 40px;
    line-height: 40px;
    color: #fff;
    background-color: @cy;
    h1 {
      .fs18();
    }
    .btn-back {
      flex-basis: 40px;
      height: 100%;
      &:after {
        content:"";
        .arrow();
        margin: 12px auto 0;
      }
    }
    .btn-register {
      color: #fff;
      .fs16();
    }
}
.login-box {
  .logo {
    width: 26.66%;
    margin: 9.3% auto;
  }
  .form-box {
    width: 85.2%;
    margin: 0 auto;
    input {
      display: block;
      width: 100%;
      height: 44px;
      line-height: 44px;
      border: 1px solid #dbdbdb;
      padding: 0 12px;
      box-sizing: border-box;
      border-radius: 4px;
      margin-bottom: 12px;
    }
    p {
      text-align: right;
      a {
        color: @cy;
        .fs12();
      }
    }
    .btn-login {
      .btn(@bgc:@cy);
      font-size: 1.6rem;
      font-weight: bold;
      border-radius: 4px;
      margin-top: 34px;
    }
  }
}

编译后得到的 login.css 文件

body {
  background-color: #f2f2f2;
}
#topBar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 2.66%;
  height: 40px;
  line-height: 40px;
  color: #fff;
  background-color: #f29004;
}
#topBar h1 {
  font-size: 1.8rem;
}
#topBar .btn-back {
  flex-basis: 40px;
  height: 100%;
}
#topBar .btn-back:after {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  transform: rotate(-45deg);
  margin: 12px auto 0;
}
#topBar .btn-register {
  color: #fff;
  font-size: 1.6rem;
}
.login-box .logo {
  width: 26.66%;
  margin: 9.3% auto;
}
.login-box .form-box {
  width: 85.2%;
  margin: 0 auto;
}
.login-box .form-box input {
  display: block;
  width: 100%;
  height: 44px;
  line-height: 44px;
  border: 1px solid #dbdbdb;
  padding: 0 12px;
  box-sizing: border-box;
  border-radius: 4px;
  margin-bottom: 12px;
}
.login-box .form-box p {
  text-align: right;
}
.login-box .form-box p a {
  color: #f29004;
  font-size: 1.2rem;
}
.login-box .form-box .btn-login {
  display: block;
  text-align: center;
  color: #ffffff;
  width: 100%;
  height: 44px;
  line-height: 44px;
  background-color: #f29004;
  border: 1px solid #f2f2f2;
  font-size: 1.6rem;
  font-weight: bold;
  border-radius: 4px;
  margin-top: 34px;
}

引入 base.css 文件,重置样式

html,body {margin:0; padding:0; font:10px/1.5 helvetica,arial,"Microsoft Yahei";}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p,figure{padding:0; margin:0;}
table,td,tr,th{font-size:10px;}
a{text-decoration: none;}
ol,ul {list-style:none;}
li{list-style-type:none;}
img {
    display: block;
    width: 100%;
}
input,select {outline: none;}
h1,h2,h3,h4,h5,h6{font-size:inherit; font-weight:normal;}
address,cite,code,em,th,i{font-weight:normal; font-style:normal;}

index.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>登录</title>
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="css/login.css">
</head>
<body>
  <header id="topBar">
    <a href="###" class="btn-back"></a>
    <h1>登录</h1>
    <a href="###" class="btn-register"></a>
  </header>
  <section class="login-box">
    <div class="logo">
      ![](./img/logo.png)
    </div>
    <div class="form-box">
      <form>
        <div class="input-group">
          <input type="text">
        </div>
        <div class="input-group">
          <input type="password">
        </div>
        <p>
          <a href="###">忘记密码</a>
        </p>
        <a href="javascript:void(0);" class="btn-login">登录</a>
      </form>
    </div>
  </section>
</body>
</html>

运行结果

该章节的内容到这里就全部结束了,源码我已经发到了 GitHub Source_code 上了,有需要的同学可自行下载,预览效果可点击 effect

End of File

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏中国Android研究院

Flutter开发环境搭建

对于上文Android Studio✗部分,只需要在AndroidStudio中的Plugin中安装Flutter插件即可。 对于'Some android l...

1163
来自专栏蓝天

Linux系统命令Top/free的使用及参数详解

top [-] [d delay] [q] [c] [S] [s] [i] [n]

1072
来自专栏nummy

Python版本管理利器--pyenv

设置局部python版本,将Python版本写进当前目录下的.python-version 文件,这个版本号会覆盖全局的版本号,可以被PYENV_VERSION...

731
来自专栏吴伟祥

Linux 文件基本属性 转

在当前目录下使用命令: ls -l,即可列出该目录下的所有文件,其第一列的第一个字母就包含了该文件的文件类型:

922
来自专栏企鹅号快讯

用户空间和内核空间

学习 Linux 时,经常可以看到两个词:User space(用户空间)和Kernel space(内核空间)。 简单说,Kernel space 是 Lin...

2048
来自专栏魏艾斯博客www.vpsss.net

wordpress 无法建立到 wordpress org 安全连接的解决办法

网友求助,说安装 Avada 插件时遇到如下错误提示:wordpress 无法建立到 wordpress.org 的安全连接,请联系您的服务器管理员。询问网友得...

1593
来自专栏北京马哥教育

看了还想看—普通权限及umask

权限在操作系统是尤为重要的,无论是windows和linux中,都少不了权限这么一说,权限的大小决定了你能操作些什么,在linux中,权限对目录和文件的意义是不...

3797
来自专栏猿天地

Word转PDF,PNG,HTML神器XDOC

在很多的项目中都会遇到操作Word文件的需求,特别是To B的这种项目。像一些招聘网站最常见的一个功能那就是导出简历啦,可以导出doc,pdf,html等格式。

3711
来自专栏杨龙飞前端

渐进增强 VS 优雅降级

2574
来自专栏闻道于事

IntelliJ IDEA 2018.3 重大升级(转)

2018.11.28 IntelliJ IDEA 2018.3 正式版发布。对于一个忠实爱好者,迫不及待的我下载了最新版本来体验下。而且 IDEA 今年的第三次...

2932

扫码关注云+社区

领取腾讯云代金券