欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

使用less开发css_html/css_WEB-ITnose

程序员文章站 2022-04-07 21:43:42
...

最近在和小伙伴讨论如何高效的编写css代码的问题,于是我们想到了使用css的预处理语言。例如(less,sass等)。最后我们决定使用less(相对于其他css预处理语言更简单,语法更接近css)。


先说说什么是less?

简单的说,你可以在你的css文件中使用变量、函数等方式来编写你的css。

less具有哪些功能?

  • 混入(Mixins)??class中的class;
  • 参数混入??可以传递参数的class,就像函数一样;
  • 嵌套规则??Class中嵌套class,从而减少重复的代码;
  • 运算??CSS中用上数学;
  • 颜色功能??可以编辑颜色;
  • 名字空间(namespace)??分组样式,从而可以被调用;
  • 作用域??局部修改样式;
  • JavaScript 赋值??在CSS中使用JavaScript表达式赋值。
  • 怎样在你的项目中使用less?


    1.首先下载less.js。
    2.创建你的less文件,如index.less。
    3.在你的中引入上面2个文件

    rel="stylesheet/less" type="text/css" href="css/index.less"/>

    这里要注意2点:一是link标签的rel属性必须是’stylesheet/less’,二是less.js必须在index.less之后引入。
    现在你就可以正式体验less了。

    1.嵌套

    像嵌套html一样嵌套书写css

    .wrap{background:@gray;padding:30px;h1{font:18px/2 ‘microsoft yahei’}}

    2.混入

    无须在html上添加多个class,只需要在css中就可以做到

    .box2{.wrap}

    3.参数混入

    像js函数一样可以传递参数,无需重复书写css

    1.比如需要css3的圆角效果首先定义一个类,圆角值作为参数传入,并设置5px的默认值:
    .border(@a:5px){-webkit-border-radius:@a;-moz-border-radius:@a;border-radius:@a;}

    2.使用:.box3{.border(20px)}

    4.选择器继承

    感觉这个功能跟混入有点类似,没多大用

    5.运算

    这个比较实用,使用数字或变量进行运算

    @base_margin: 10px;

    @double_margin: @base_margin * 2;

    使用:.box5{.border(10px);border:@base_width / 2 solid #ccc}

    6.color函数

    lighten函数:通过百分比来减轻颜色;less还提供其他变暗或者调整颜色饱和度函数

    lighten(@gray, 10%),实际上只显示 @gray 90%的颜色

    其他功能就不一一介绍了,如果你想更详细的了解less,可以去网上搜索更多的资料。


    less 的主要好处有三个:

  • 颜色 样式统一定义
  • 所有用到的颜色 距离 都用变量的形式统一定义在一个文件中 其它的代码中不允许出现直接使用的颜色和像素值 必须使用定义好的变量
    一些 css 规则组合定义为 mixin 在其它元素内部使用
    增加可读性复用性降低维护难度
  • HTML/CSS 语义/样式 分离
  • 得益于 层叠结构 mixin 命名空间的使用 完全实现 html 的语义化 不需要在 html 代码中加入样式信息
  • 提升开发效率
  • 使用 less 让手写 css 变成一件愉快的是 不用受制于一层又一层复杂的 selector 结构 不用纠结于大段的重复代码 各种函数式编程的小技巧大幅提升 css 的灵活性 极简单的 import 方式也让多人开发与项目间的代码复用变得异常简单

    版权声明:本文为博主原创文章,未经博主允许不得转载。

    相关标签: 使用less开发css