浅谈less与css的区别

什么是lessLess 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。如何引入less使用less有以下三种方式直接引入 Less.js使用CDN在线引入在命令行 使用npm安装npm install less -g3.为什么使用less(less优势) 1.变量 2.混合嵌套 3.方法 4.父子元素 5.import4.如何使用less 1.创建html页面,在页面内引入mian.css

2.创建less页面,并编写less代码

3.运行指令lessc main.less > main.css,生成对应的css文件 在命令控制行中通过运行指令lessc main.less > main.css,生成对应的css文件 可以通过指令lessc main.less来预先查看编译后的css代码样式

5.变量 通过@变量名的方式来进行变量的定义(@等同于var),之后通过调用变量名来进行赋值,这样可以极大的重复代码,对于性能优化也有很好的提升6.混合嵌套 在编写部分css代码时,可能会出现相同属性多次使用的情况,如图:

在传统 CSS 写法中只能这样一遍又一遍的去书写重复的内容,在 Less 中通过将公共属性抽取出来作为一个公共类的方式规避这一点。

总结

混合也是减少代码书写量的一个方法;

混合的类名在定义的时候加上小括弧 (),那么在转译成 css 文件时就不会出现;

混合的类名在被调用的时候加上小括弧 ()和不加上小括弧 ()是一样的效果,看个人习惯,如:第三行和第八行转译成 css 是一样的。

在less中,我们可以通过编写一个css类的方法,将值通过参数的形式进行传参,然后只调用方法和实参,就可以完成css的设置。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 什么是lessLess 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使...
    李原猿阅读 11,032评论 0 3
  • 声明 本篇内容梳理自以下几个来源: Github:smyhvae/web Bootstrap网站的 less 文档...
    请叫我大苏阅读 4,811评论 0 10
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,018评论 1 45
  • 每一门技术的出现都是为了解决现存的问题,同样的,Less 的出现是为了解决 CSS 中过于呆板的写法。Less 官...
    dkvirus阅读 43,071评论 24 83
  • 学习Less-看这篇就够了 前言 CSS的短板 预处理语言的诞生 其中 就我所知的有三门语言:Sass、Less ...
    DragonRat阅读 3,701评论 1 4