less的基本使用

众所周知，less是一门css预处理语言，其他的类似还有scss、Stylus 等，和js相似度比较高的就是less了。话不多说，我们来看less的使用。

Node.js 环境中使用 Less ：

npm install -g less

> lessc styles.less styles.css

我用的vscode,编译后css文件在vscode项目文件里显示不出来，但是在本地路径下查看得到。

在浏览器环境中使用 Less ：

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.8.1/less.min.js" ></script>

1.变量的使用

Less中，变量由变量名称和值组成。变量名以 @ 为前缀，由字母、数字、_和-组成，变量名称和值之间用冒号隔开

@width:80%;

@height:100px;

@color:blue;

.box{

   width:@width;

   height:@height;

   background-color: @color;

   margin-top: 5px;

}

.box1{

   width:@width+10px;

   height:@height;

   background-color: @color;

   margin-top: 10px;

}

.box2{

   width:@width+20px;

   height:@height;

   background-color: @color;

   margin-top: 5px;

}

less变量也分全局变量和局部变量，不仅可以直接在属性值中使用变量，还可以用类似 @{name} 的结构，以“插值”的方式在选择器名、属性名、URL、import、媒体查询中使用变量。在编译时，变量将被替换为它们相应的值。

2.混合（是一种将一组属性从一个规则集包含到另一个规则集的方法）

.box1{

   width:@width+20px;

   height:@height;

   background-color: @color;

   margin-top: 5px;

   .bordered();

}

.bordered{

   border-top:dotted 1px #ff0000;

   border-bottom:solid 2px #;

}

恩，就是定义一个类似函数的东西，然后引用它就行

3.嵌套

@width:%;

@height:100px;

@color:pink;

.box{

   width:@width;

   height:@height;

   background-color: @color;

   margin-top: 5px;

   p{

      color:red;

      font-size: 12px;

   }

   .username{

      color:#eeeeee;

      font-size: 16px

   }

}

等效于

.box{width:@width;height:@height;background-color:@color;margin-top: 5px; }

.box p{color:red;font-size: 12px;}

.box .username{color:red;font-size: 12px;}

这波操作也是很骚了，是不是想到了js函数嵌套啊~

4.运算

官网翻译哈：算术运算+、-、*、/可以对任何数字、颜色或变量进行运算。如果可能的话，数学运算在加、减或比较之前会考虑到单位并转换数字。结果具有最左边的显式单位类型。如果转换不可能或没有意义，则忽略单位。不可能的转换示例：px到cm或rad到%。

@count-:5cm+10mm;

@count-:5cm+10mm-2mm;

@count-:5cm+10px;

@count-:5cm-10px;

@count-:5cm-10mm+50px;

@base:%;

@filter:@base*;

@color:#;

.d1{

   width:@count-;

   background-color: @color+#;

}

.d2{

   width:@count-;

   background-color: @color+#;

}

.d3{

   width:@count-;

   background-color: @color+#;

}

.d4{

   width:@count-;

   background-color: @color+#;

}

.d5{

   width:@count-;

   background-color:@color+#fff;

}

效果图

less的基本使用

5.Escaping

转义允许您使用任意字符串作为属性或变量值。在~“anything”或~“anything”中的任何内容都将按原样使用，除了插值之外没有任何更改。

@min768: ~"(min-width: 768px)";

.element {

  @media @min768 {

    font-size: .2rem;

  }

}

等效于

@media (min-width: 768px) {

  .element {

    font-size: .2rem;

  }

}

感觉是给了你*，反而让人有点不习惯来了呢~

6.函数

这是我们最经常用到的东西，但是用法也很多，具体的还是参见函数手册吧

@width:0.5;

@base:#c0b40c;

.class{

   width:percentage(@width);

   color:saturate(@base,%);

   background-color: spin(lighten(@base, %), );

}

丑图

less的基本使用

7.命名空间和访问器

#bundle() {

  .button {

    display: block;

    border: 1px solid black;

    background-color: grey;

  }

   .font{...}

   .tab{...}

}

#header a {

  color: orange;

  #bundle.button();  // 也可以写成#bundle > .button

}

这也是为了方便函数复用了，命名空间选择器了解一下。

命名空间不加（）也行。

.box{

   width:@width;

   height:@height;

   background-color: @color;

   .username{

      color:#eeeeee;

      font-size: 16px;

   }

}

.box1{

   .box.username;

   width:@width;

   height:@height;

   background-color: @color;

}

8.Map

从3.5以下的版本开始，可以使用mixin和ruleset作为值的映射

#library() {

  .colors() {

    primary: green;

    secondary: blue;

  }

}

#library() {

  .colors() { primary: grey; }

}

.button {

  color: #library.colors[primary];

  border-color: #library.colors[secondary];

}

//等效于
//.button { color: grey; border-color: blue; }

再次感叹万能的对象！

这些还只是初步的less语法知识,下次我们再来深入了解吧！推荐大家去less官网学习，官网上够详细啦

随机推荐

Python黑帽编程 3&period;2 ARP监控
Python黑帽编程 3.2 ARP监控在第3.1节<ARP欺骗>中,我们学习了ARP的基本原理,使用Python实现了我们自己的ARP欺骗工具.在上一节的基础上,我们来实现一个ARP监 ...
CSS Font知识整理总结
1.什么是字体字体是文字的外在形式,就是文字的风格,是文字的外衣.比如行书.楷书.草书,都是一种字体.同样一个字每个人写起来都会有差异,可以说每个人都有一套潜在的字体库.对于web页面来说,字体就是 ...
[Java基础]循环结构3
[Java基础]循环结构3 break 与 continue 中断循环... /** 文件路径:G:\JavaByHands\循环语句\ 文件名称:BreakTest.java 编写时间:2016/6 ...
[Arduino] 外部中断
原文:http://www.arduino.cn/thread-2421-1-1.html 1.什么是中断? 试想一下,你正在家里吃饭,这时传来了敲门声,虽然你巨饿,虽然面前全是山珍海味,但此时你不得 ...
Angular JS API
ng function angular.bind angular.bootstrap angular.copy angular.element angular.equals angular.exten ...
Mongodb 3&period;4 + Centos6&period;5 配置 + mysql&period;sql转为csv 或 json导入和导出Mongo （64位系统）
Centos下通过yum安装步骤如下: 声明:相对比那些用源码安装,少了配置和新建log和data目录,这种简单粗暴, ,创建仓库文件, vi /etc/yum.repos.d/mongodb-org ...
FZU 2234
题目为中文,题意略. 这个题目我开始用贪心做bfs两次,这样做是错的,因为两次局部的最优解并不能得出全局的最优解,以下面样例说明: 3 0 10 -1 10 10 10 1 0 ...
解构领域驱动设计（一）：为什么DDD能够解决软件复杂性
1 为什么我要研究领域驱动设计 1.1 设计方法各样且代码无法反映设计我大概从2017年10月份开始研究DDD,当时在一家物流信息化的公司任职架构师,研究DDD的初衷在于为团队寻找一种软件设计的方法 ...
Redis 分布式锁及缓存注释的使用方法
使用工具:Apache an 测压命令: ab -n 100 -c 100 http://www.baidu.com -n代表模拟100个请求,-c代表模拟100个并发,相当于100个人同时访问 ab ...
第68节&colon;Java中的MYSQL运用从小白到大牛
第68节:Java中的MYSQL运用从小白到大牛前言学习java必备要求,学会运用!!! 常见关系化数据库 BootStrap是轻量级开发响应式页面的框架,全局css组件,js插件.栅格系统是将页 ...

秒客网

less的基本使用

随机推荐

相关文章