less的基本用法

欢迎访问我的博客，祝码农同胞们早日走上人生巅峰，迎娶白富美~~~

文章目录

1 前言

2 预处理语言

2.1 sass

2.2 less

2.2.1 less 初体验

2.2.2 编译工具

2.2.3 变量

2.2.4 嵌套

2.2.4.1 媒体查询@media

2.2.5 函数

2.2.5.1 一些内置函数

2.2.5.2 自己写个函数来用用

2.2.6 混入

2.2.7 继承 extend

2.2.8 运算

2.2.9 导入

2.2.9.1 reference

2.2.9.2 once

2.2.9.3 multiple

2.3 less 和 sass 的区别

3 参考文章

1 前言

当我们用多了

CSS

的时候，特别是由后端转前端的道友们用

CSS

的时候，会发现

CSS

简单易懂，但是毫无逻辑，我们来看看下面几种情况：

常常一个颜色的值能出现很多很多次，或者一个宽度的值能出现很多次；
大量的选择器在代码中，一会用那个，一会用这个，毫无逻辑，无层次，不美观，不易维护；
每一个新属性的诞生又会带来大量浏览器兼容性的问题；
此外， CSS 虽然易学，好用，但其短板不可忽视，于是就引入了预处理语言

2 预处理语言

我了解到的是 less 、 sass ，这里在后面会主要说 less ,欢迎道友补充指正

2.1 sass

sass诞生于2007年，是一个将脚本解析成 CSS 的脚本语言，最开始叫缩进语法，较新的叫SCSS，使用和 CSS 一样的块语法，即使用大括号将不同的规则分开，使用分号将不同的样式分开，通常扩展名为 .sass 或者 .scss 包含变量，嵌套，混入等，和 less 类似，下面看 less ，学会了 less 的基本语法，对 sass 就能有一定程度的掌握了

2.2 less

less 是一门 CSS 预处理语言，它扩充了 CSS ，增加了我们前面提到的能够使得代码更有逻辑性的东西，例如变量，混入，函数等，后缀名为 .less ，同时， less 可以运行在 Node 或者浏览器端

2.2.1 less 初体验

使用 less 方案一：

引包：在页面中直接引入 less.js ，可去官网下载放到自己的依赖包文件中，或者利用 CDN 在线引入

引入自己写好的less文件： link 标签一定要在 Less.js 之前引入，并且 link 标签的 rel 属性要设置为 stylesheet/less

<link rel="stylesheet/less" href="/less/style.less">
<script src="/libs/less.js/2.7.2/less.min.js"></script>

书写 CSS 文件看看

/* style.css */
div {
  background: #e92323;
}
a:hover {
  color: #e92323;
}
.box {
  color: #e92323;
}

我们用 less 语法去书写和上面 CSS 同样功能的代码来看看

/* style.less */
@mainColor:#e92323;
@className:box;

div{
  background: @mainColor;
}
a:hover{
  color: @mainColor;
}
//变量用于字符拼接使用方法
.@{className}{
  color: @mainColor;
}

总结：很显然，我们看出将经常出现的 #e92323 的值存储在一个变量中，这样清晰直观，假如需要修改某个网站的主题色，那么直接修改这个变量即可，我们 .box 这个类选择器也储存在一个变量中，同样的道理，易于维护
到这里，你可能已经爱上它了

使用 less 方案二：

使用包管理工具 npm 直接安装 less

npm i less -g

使用命令，将 less 文件编译成 css 文件

lessc style.less > style.css

在 webpack 打包工具中可以使用 less-loader 处理

2.2.2 编译工具

在这里可以选用

VSCode

或者

Sublime Text 3

，在使用

less

之前，建议大家先给自己的开发工具安装一个牛逼轰轰的插件，在

VSCode

中，可以

Ctrl + Shift + X

到左侧扩展商店里安装

Easy LESS

插件，在

Sublime

中安装

Less2Css

插件，他们有什么用呢？他们可以实时编译

less

文件为

CSS

文件，方便及时修改和查看，另外

sublime

安装插件的方法，请移步sublime安装插件&常用的sublime插件

效果大概如下图

less的基本用法

2.2.3 变量

关于 less
中变量、函数等，其实就和我们接触到的其他语法中的理解起来差不多，下面来举例理解

变量：想想
js 里面的变量，是干什么的？存储值，防止同一个值重复出现，提高代码维护效率，这里其实差不多

/* style.less */

@charset "UTF-8";
/*注释：在css当中可以使用，所有编译的过程当中生成在css文件*/
//注释：css不支持,不会编译在css文件

/*变量*/
//必须@前缀，：是等于的以上，必须分号结束；
//不能以数组开头，不能包含特殊字符，区分大小写
@mainColor:#e92323;
@className:box;

div{
  background: @mainColor;
}
a:hover{
  color: @mainColor;
}
//变量用于字符拼接使用方法
.@{className}{
  color: @mainColor;
}

/* style.css */
@charset "UTF-8";
/*注释：在css当中可以使用，所有编译的过程当中生成在css文件*/
/*变量*/
div {
  background: #e92323;
}
a:hover {
  color: #e92323;
}
.box {
  color: #e92323;
}

2.2.4 嵌套

十分神奇，写完它，你会觉得样式代码层次感十足，逻辑分明，主要是看着爽，选择器便于查找，易于维护

这是我做的一个防微金所小项目里的一段代码

@charset "UTF-8";
.wjs_app{
  display: block;
  img{
    display: none;
  }
  // 需要连接的情况使用 &
  &:hover{
    img{
      display: block;
      position: absolute;
      left: 50%;
      margin-left:-60px;
      border: 1px solid #ccc;
      border-top: none;
      top:40px;
      z-index: 100000;
    }
  }
  >div{
    display: block;
  }
  &::before{
    content: "";
  }
}

@charset "UTF-8";
.wjs_app {
  display: block;
}
.wjs_app img {
  display: none;
}
.wjs_app:hover img {
  display: block;
  position: absolute;
  left: 50%;
  margin-left: -60px;
  border: 1px solid #ccc;
  border-top: none;
  top: 40px;
  z-index: 100000;
}
.wjs_app > div {
  display: block;
}
.wjs_app::before {
  content: "";
}

看看以上的代码，

less

文件中是不是层次感十足，这里说几点问题

& ，当需要连接时使用 & ，代表上层选择器的名字，这里代表 .wjs_app ，例如可以写 &:active ， &::before ， &:hover 等等
其他选择器，例如 > ，即与父元素有直接的血缘关系的子元素，在后面直接接上就行

2.2.4.1 媒体查询@media

媒体查询，在响应式布局上应用十分广泛，那么在 CSS 中我们往往需要将一个类分开写，例如下面这样

.container{
        width:750px;
      }
      @media screen and (max-width:768px){
        .container{
          background: red;
        }
      }

而在 less 中，可以利用嵌套，将他们写在一块

/* Less */
      .container{
          width: 750px;
    
          @media screen{
              @media (max-width:768px){
                background-color: red;
              }
          }
          @media tv {
            background-color: yellow;
          }
      }

@media screen and (maxwidth:768px){
       .container{
            background-color: red; 
        }
      }
      @media tv{
        .container{
          background-color: yellow;
        }
      }

2.2.5 函数

2.2.5.1 一些内置函数

判断：

isnumber

，

iscolor

，

isurl

,分别判断是否是一个数字，颜色，url

颜色操作：

lighten

增加颜色亮度，

darken

降低颜色亮度，

fade

增加透明度，

mix

根据比例混合两种颜色，

saturate

增加颜色饱和度等等

数学函数：

ceil

向上取整，

floor

向下取整，

round

四舍五入，

sqrt

平方根，

abs

绝对值，

pow

幂，

percentage

浮点数转化为百分比字符串等

2.2.5.2 自己写个函数来用用

.fun() {
  width: 100px;
}

.container {
  .fun();
}

.container {
  width: 100px;
}

2.2.6 混入

组合样式混入
类混入
函数混入

@charset "UTF-8";
/*混入*/
/*组合样式的例子*/
.w50{
 width: 50%;
}
.f_left{
 float: left;
}
.f_right{
 float: right;
}
/*类混入*/
.w50-f_left{
 .w50();
 .f_left();
}

/*函数混入*/
/*定义函数*/
.w50(){
  width: 50%;
}
/*定义函数包含参数*/
.f_left(){
 float: left;
}
.f_right(){
 float: right;
}
/*
1.定义了参数（没有默认值），调用的时候必须传参
2.怎么定义默认值 和定义变量值是一样的
3.定义了参数（有默认值），可传可不传
*/
.f(@direction:left){
  float: @direction;
}
.borderRadius(@width:100px){
  border-radius: @width;
  -webkit-border-radius:@width;
  -moz-border-radius:@width;
  -o-border-radius:@width;
  -ms-border-radius:@width;
}
.w50-f_left{
  .w50();
  .f(right);
  .borderRadius(20px);
}

@charset "UTF-8";
/*混入*/
/*组合样式的例子*/
.w50 {
  width: 50%;
}
.f_left {
  float: left;
}
.f_right {
  float: right;
}
/*类混入*/
.w50-f_left {
  width: 50%;
  float: left;
}
/*函数混入*/
/*定义函数*/
/*定义函数包含参数*/
/*
1.定义了参数（没有默认值），调用的时候必须传参
2.怎么定义默认值 和定义变量值是一样的
3.定义了参数（有默认值），可传可不传
*/
.w50-f_left {
  width: 50%;
  float: right;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -o-border-radius: 20px;
  -ms-border-radius: 20px;
}

2.2.7 继承 extend

能够继承所匹配的所有样式，但不会继承其子元素的内容

.container {
      	width: 100px;
      	.other {
      		color: red;
      	}
      }
      .content {
      	&:extend(.container);
      }
      .span {
      	&:extend(.container .other);
      }

.container,
.content {
  width: 100px;
}
.container .other,
.span {
  color: red;
}

2.2.8 运算

在

less

语法中可以进行简单的运算，首先我们来看下面一段代码

@num:9;
ul{
  width: 100%*@num;
  li{
    width: 100%/@num;
    color: red+yellow+blue;
    background: gray*0.7;
    /*内置函数*/
    border-color: darken(red,20%);
  }
}

ul {
  width: 900%;
}
ul li {
  width: 11.11111111%;
  color: #ffffff;
  background: #5a5a5a;
  /*内置函数*/
  border-color: #990000;
}

其实看到这里，我们可以引申一点，bootstrap的栅格布局原理，这是其中之一了，当然只是引申，想要了解全部的，请移步Web前端中的几种流行布局

2.2.9 导入

那么学了以上那些内容，其实就可以将我们平常写的

CSS

文件，大概分为变量、函数、等等，然后导入到一个具主要处理的文件中，再通过嵌套、混入、运算等写一个完整的层叠样式表了，这样写的好处是，功能分明，易于维护

导入 less 文件，可省略后缀

@charset "UTF-8";

@import "variables";

@import "mixins";

@import "topBar";

@import "banner";

@charset "UTF-8";
/*注释：在css当中可以使用，所有编译的过程当中生成在css文件*/
/*变量*/
div {
  background: #e92323;
}
a:hover {
  color: #e92323;
}
.box {
  color: #e92323;
}

.w50-f_left {
  width: 50%;
  float: right;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -o-border-radius: 20px;
  -ms-border-radius: 20px;
}
.wjs_app {
  display: block;
}
.wjs_app img {
  display: none;
}
.wjs_app:hover img {
  display: block;
  position: absolute;
  left: 50%;
  margin-left: -60px;
  border: 1px solid #ccc;
  border-top: none;
  top: 40px;
  z-index: 100000;
}
.wjs_app > div {
  display: block;
}
.wjs_app::before {
  content: "";
}

是不是很爽？

@import 的位置可随意放置

.container {
    width: 100px;
}

@import "style";

2.2.9.1 reference

引入的 Less 文件，但不编译

@import (reference) "style";

2.2.9.2 once

该

less

文件只导入一次，其余导入的该

less

文件都不会被解析

@import (once) "style.less"; // 文件会被解析
@import (once) "style.less"; // 该文件不会被解析

2.2.9.3 multiple

允许导入多个同名文件，但是都会被解析

@import (multiple) "style.less"; // 文件会被解析
@import (multiple) "style.less"; // 文件也会被解析

2.3 less 和 sass 的区别

less

和

sass

最大的区别在于其实现方式不同

less

是基于

javascript

运行，所以

less

也常用语客户端处理

sass

是基于

Ruby

，常在服务端处理

3 参考文章

SASS
Less中文网
Less

less的基本用法

文章目录

1 前言

2 预处理语言

2.1 sass

2.2 less

2.2.1 less 初体验

2.2.2 编译工具

2.2.3 变量

2.2.4 嵌套

2.2.4.1 媒体查询@media

2.2.5 函数

2.2.5.1 一些内置函数

2.2.5.2 自己写个函数来用用

2.2.6 混入

2.2.7 继承 extend

2.2.8 运算

2.2.9 导入

2.2.9.1 reference

2.2.9.2 once

2.2.9.3 multiple

2.3 less 和 sass 的区别

3 参考文章

继续阅读

手动配置webpack4.x配置打包vue项目脚手架

1.2 css3选择器

函数对象及适配器

上司希望你明白的24件事（双语）

51单片机汇编指令集（指令集带英文翻译）

linux apache 日志分析与状态

前端学习之路---移动web开发（二）

JOJ 1007解题

前端代码生成器

【Less】一文带你了解Less【Less】一文带你了解Less

CSS样式抽离之 extract-text-webpack-plugin 插件

入门的UTM投影

/etc/snmp/snmpd.conf

一些符号的英文读法

vue项目中使用less？

React中less的引用初窥