资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/less学习笔记

less学习笔记

MkkHou / 1031人阅读

摘要：方便了的编写和维护。本文记录了开发中最常用的几种语法。这里的单位可以省略，但是两者必须有一个带单位嵌套嵌套是中非常有用高效的语法。学习学习学习在中如果我们需要对这一结构的样式进行渲染，就会使用等选择器。

一、什么是less

less是一种动态样式语言，属于css预处理语言的一种，它使用类似css的语法，为css赋予了动态语言的特性，如变量、运算、函数等。方便了css的编写和维护。

less可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。

本文记录了开发中最常用的几种less语法。

二、编译工具

浏览器并不认识less格式文件，我们需要使用编译工具将less文件编译成css文件，可以选择kaola这个工具编译。这个工具使用也十分简单，将less文件的目录拖入，然后设置输出路径。然后每次只要保存less文件就可实现编译。

如果使用其他开发工具也可以，比如使用VSCode的话就可以安装less插件easy less实现保存自动编译。因为我使用的就是VSCode编辑器，所以我使用了这个插件做编译处理。

基本使用
首先新建目录

 --images
--style
  -- main.less
index.html

编写index.html文件



 
  
  less编译工具使用
   //在这里引入的是编译后的css文件

编写mian.less文件:

@charset "utf-8";

#main {
    width: 100px;
    height: 100px;
    background-color: red;
}

保存编译后，在style目录下就会出现main.css文件，这是编译后的文件，我们可以直接使用。

三、less语法 1、注释

less中有两种注释：/**/和//。

使用/**/的注释是会被编译进css文件的，而使用//的注释不会被编译进css文件。

//main.less
@charset "utf-8";

/*我会被编译进css文件*/

//我不会被编译进css文件

//执行编译后的main.css
@charset "utf-8";

/*我会被编译进css文件*/

由于我们应该一般编写和维护less文件，所以我们一般采用第二种注释，无需将注释编译进css文件。

2、变量

less中使用@声明一个变量，和一般程序语言不同的是，@符号与变量之间不能有空格，比如我们要声明一个myWidth这个变量：@myWidth。变量的赋值类似键值对：@myWidth : 200px;

变量的使用：

//less文件
@charset "utf-8";

@myWidth : 200px;
@myHeight : 500px;

#main {
    width: @myWidth;
    height: @myHeight;
    background-color: yellowgreen;
}
3、混合

混合的意思是说可以将less写法与常规的css写法进行混合书写。

css中为某个元素添加样式，首先需要为其添加类名，使用混合则很方便

//less文件
@charset "utf-8";

@myWidth : 200px;
@myHeight : 200px;

#main {
    width: @myWidth;
    height: @myHeight;
    background-color: yellowgreen;
    .border
}

.border {  
    border:3px solid pink
}

在css中我们需要将.border这个类添加到元素的class属性中才能生效。但是在less中，只要将.border加入#main中就可以实现效果。

//编译后的css
@charset "utf-8";
#main {
  width: 200px;
  height: 500px;
  background-color: yellowgreen;
  border: 3px solid green;
}
.border {
  border: 3px solid green;
}

混合也可以带参数

//less
.border(@mywidth){
    border: @mywidth solid green;
}

.mybox {
    .border(5px);
}

//css
.mybox {
  border: 5px solid green;
}

参数也可以设置一个默认值：

//less
.border(@mywidth:4px){
    border: @mywidth solid green;
}

.mybox {
    .border();
}

//css
.mybox {
  border: 4px solid green;
}
4、匹配模式

根据不同的参数可以匹配不同的样式：

.pos(r) {
    position:relative;
}

.pos(a) {
    position:absolute;
}

.pos(f) {
    position:fixed;
}

.pipei {
    width:200px;
    height:200px;
    background-color:green;
    .pos(f);     //.pos(r)   .pos(a) 传入不同的参数，实现不同的定位方式
}
5、运算

less中可以实现运算，任何数字、颜色或者变量都可以参与运算（+ - * /），运算应该被包裹在括号中。

//less
.border(@mywidth:4px){
    border: @mywidth + 5px solid green;    //这里的单位可以省略，但是两者必须有一个带单位
}

.mybox {
    .border();
}

//css
.mybox {
  border: 4px solid green;
}
6、嵌套

嵌套是less中非常有用、高效的语法。

//html


    
  • less学习2017-11-26
    • 
    
  • less学习2017-11-26
    • 
    
  • less学习2017-11-26
    •

    在css中如果我们需要对这一html结构的样式进行渲染，就会使用#list、#list li、#list li a、#list li span等选择器。在less中我们有了更简洁的写法：

    //less
#list {
    width: 600px;
    margin: 30px auto;
    list-style: none;
    padding: 0;

    li {
        height: 30px;
        line-height: 30px;
        background-color: pink;
        margin-bottom: 5px;

        a {
            float: left;
        }

        span {
            float: right;
        }
    }
}

//css
#list {
  width: 600px;
  margin: 30px auto;
  list-style: none;
  padding: 0;
}
#list li {
  height: 30px;
  line-height: 30px;
  background-color: pink;
  margin-bottom: 5px;
}
#list li a {
  float: left;
}
#list li span {
  float: right;
}

    在less中使用伪类选择器也十分方便：

    //less
#list li a {
  float: left;
  &:hover {
    font-size:20px;
  }
}

//css
#list li a:hover {
  font-size: 18px;
}
    7、arguments参数

    有时候我们不想单个操作参数，可以使用@argemunts操作参数。

    //less
.border_arg(@w:30px,@c:red,@xx:solid){
    border:@arguments;
}

.test_arguments{
    .border_arg();
}

//css
.test_arguments {
  border: 30px red solid;
}
    8、避免编译

    有时候我们需要输出一些不正确的css语法或者使用一些less不认识的专有语法，要输出这样的值我们需要使用~""将语法包裹起来，语法放在双引号或者单引号中间。从而实现不让less编译该段代码：

    //less
width:~"calc(100%-35)"

//css
width: calc(100%-35);
    GPU云服务器 云服务器 学习笔记 学习笔记一 基础学习笔记 深度学习笔记

    文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

    转载请注明本文地址：https://www.ucloud.cn/yun/54433.html

    相关文章

    • 前端构建工具grunt学习笔记

      使用grunt实时编译less文件 下图是项目的文件组织 showImg(https://segmentfault.com/img/bVqbtg); 生成package.json文件，通过npm init命令。 安装你需要的Devdependencies/denpendencies。 npm install grunt --save-dev npm install load-grunt-ta...

      zone 评论0 收藏0

    • less学习笔记

      摘要：方便了的编写和维护。本文记录了开发中最常用的几种语法。这里的单位可以省略，但是两者必须有一个带单位嵌套嵌套是中非常有用高效的语法。学习学习学习在中如果我们需要对这一结构的样式进行渲染，就会使用等选择器。 一、什么是less less是一种动态样式语言，属于css预处理语言的一种，它使用类似css的语法，为css赋予了动态语言的特性，如变量、运算、函数等。方便了css的编写和维护。 le...

      codercao 评论0 收藏0

    • 前端学习笔记

      摘要：环境安装本站实例采用的是百度的静态资源库上的资源。不包含文档和最初的源代码文件。点击该按钮，您可以直接从上得到最新的和源代码。如果您使用的是未编译的源代码，您需要编译文件来生成可重用的文件。 1.Bootstrap 1.1 Bootstrap 包的内容 基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。...

      alogy 评论0 收藏0

    • 前端学习笔记

      摘要：环境安装本站实例采用的是百度的静态资源库上的资源。不包含文档和最初的源代码文件。点击该按钮，您可以直接从上得到最新的和源代码。如果您使用的是未编译的源代码，您需要编译文件来生成可重用的文件。 1.Bootstrap 1.1 Bootstrap 包的内容 基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。...

      chenjiang3 评论0 收藏0

    • 关于Less的学习笔记

      摘要：简介部分记录是一门预处理语言，它扩充了语言，增加了诸如变量混合函数等功能，让更易维护方便制作主题扩充，是一种动态样式语言。运算可进行加减乘除的运算。 Less简介部分记录： 1、 Less是一门CSS预处理语言，它扩充了CSS语言，增加了诸如变量、混合（mixin）、函数等功能，让CSS更易维护、方便制作主题、扩充，是一种动态样式语言。2、 编译工具：Koala。3、 注释（两种...

      姘搁『 评论0 收藏0

    发表评论

    登陆后可评论

    0条评论

    MkkHou

    男|高级讲师
    我要私信

    TA的文章

    阅读更多
    最新活动
    阅读需要支付1元查看
    <