less的基本用法

0.5字数 1827阅读 475

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

更好的体验,请移步less的基本用法

1 前言

当我们用多了CSS的时候,特别是由后端转前端的道友们用CSS的时候,会发现CSS简单易懂,但是毫无逻辑,我们来看看下面几种情况:

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

2 预处理语言

我了解到的是lesssass,这里在后面会主要说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 方案一

  1. 引包:在页面中直接引入less.js,可去官网下载放到自己的依赖包文件中,或者利用CDN在线引入
<script src="/libs/less.js/2.7.2/less.min.js"></script>
  1. 引入自己写好的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>
  1. 书写CSS文件看看
/* style.css */
div {
  background: #e92323;
}
a:hover {
  color: #e92323;
}
.box {
  color: #e92323;
}
  1. 我们用less语法去书写和上面CSS同样功能的代码来看看
/* style.less */
@mainColor:#e92323;
@className:box;

div{
  background: @mainColor;
}
a:hover{
  color: @mainColor;
}
//变量用于字符拼接使用方法
.@{className}{
  color: @mainColor;
}
  1. 总结:很显然,我们看出将经常出现的#e92323的值存储在一个变量中,这样清晰直观,假如需要修改某个网站的主题色,那么直接修改这个变量即可,我们.box这个类选择器也储存在一个变量中,同样的道理,易于维护
  2. 到这里,你可能已经爱上它了

使用 less 方案二

  1. 使用包管理工具npm直接安装less
npm i less -g
  1. 使用命令,将less文件编译成css文件
lessc style.less > style.css
  1. webpack打包工具中可以使用less-loader处理

2.2.2 编译工具

在这里可以选用VSCode或者Sublime Text 3,在使用less之前,建议大家先给自己的开发工具安装一个牛逼轰轰的插件,在VSCode中,可以Ctrl + Shift + X到左侧扩展商店里安装Easy LESS插件,在Sublime中安装Less2Css插件,他们有什么用呢?他们可以实时编译less文件为CSS文件,方便及时修改和查看,另外sublime安装插件的方法,请移步sublime安装插件&常用的sublime插件

效果大概如下图

variables

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文件中是不是层次感十足,这里说几点问题

  1. &,当需要连接时使用&,代表上层选择器的名字,这里代表.wjs_app,例如可以写&:active&::before&:hover等等
  2. 其他选择器,例如>,即与父元素有直接的血缘关系的子元素,在后面直接接上就行
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 一些内置函数

判断isnumberiscolorisurl,分别判断是否是一个数字,颜色,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 混入

  1. 组合样式混入
  2. 类混入
  3. 函数混入
@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文件,大概分为变量、函数、等等,然后导入到一个具主要处理的文件中,再通过嵌套、混入、运算等写一个完整的层叠样式表了,这样写的好处是,功能分明,易于维护

  1. 导入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: "";
}

是不是很爽?

  1. @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 的区别

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

less是基于javascript运行,所以less也常用语客户端处理

sass是基于Ruby,常在服务端处理

3 参考文章

推荐阅读更多精彩内容