`
dcj3sjt126com
  • 浏览: 1871024 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

不要盲目的在项目中使用LESS CSS

阅读更多

 如果你还不知道LESS CSS是什么东西,可以看一下这篇文章,是我一朋友写给新人看的《CSS——LESS

  不可否认,LESS CSS是个强大的工具,它弥补了css没有变量、无法运算等一些“先天缺陷”,但它似乎给我一种错觉,就是为了功能而实现功能

  比如它的引用功能

.rounded_corners{
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
}
#header{
    .rounded_corners;
}
#footer{
    .rounded_corners;
}

  最终编译后会生成如下代码

.rounded_corners{
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
}
#header{
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
}
#footer{
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
}

  它似乎弥补上了css的一个缺陷,但我并没发现他这样做的目的是什么,我完全可以直接这样一段

.rounded_corners{
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
}

  然后页面哪需要圆角,直接加上class="rounded_corners",当然,它的引用是可以设置参数的,比如这样

.margin10(@size:10px){
    margin:@size;
}
.test{
    .margin10;
}

  似乎很高级的样子,参数可以控制,减少了重复代码的书写,但是否实用呢?我拿之前项目里的样式比较了下,发现能拎出来,通过参数设置具体样式的几乎没有,只有几个css3的属性用这个功能还是比较OK,比如这段阴影样式

.box-shadow(@arguments){
    -webkit-box-shadow:@arguments;
    -moz-box-shadow:@arguments;
    box-shadow:@arguments;
}

  因为只要是阴影,就少不了这三句,类似的还有圆角、透明等,就不一一列举了。

  然后,说说最基本的变量吧,我就一直没想通css要变量有什么用

@w100:100px;
@h100:100px;
div{
    width:@w100;
    height:@h100;
}

  可能会说,我定义好一个变量,在不同的地方都可以直接调用,如果要修改,只需修改一次。但问题是,万一我只想改其中一个的样式,另一个别动,或者就是两个同时都需要修改。

  就比如我一个页面里有2块广告区域,原先宽高是一样的,现在我要其中一个区域变大,另一个变小,这样我反而觉得定义变量增多了我的工作量。

  可能又会说,LESS CSS不是支持四则运算嘛,对,我们可以这样子

@w100:100px;
@h100:100px;
div{
    width:@w100 + 50px;
    height:@h100 - 50px;
}

  甚至还可以更2B青年一点

@w100:100px;
@h100:100px;
div{
    width:(@w100 + 50px) / 2 + 75px;
    height:@h100 - (100px / 2);
}

  LESS CSS里的计算功能就像变量一样让我无法理解,别忘了,LESS CSS是要编译过你写的.less文件的,最终生成的还是标准的css代码。换句话说,就是你再怎么定义变量,再怎么计算,最终它生成的还是一个固定的数值,帮我们减少的只是计算这个数值的时间,但我觉得我花时间去写个运算,还不如心算一下。

  当然了,LESS CSS也并非一无是处,它的嵌套功能就让我眼前一亮

<div class="test">
    <div class="test1">
        <div></div>
    </div>
</div>

  通常我们要给上面这三个div写样式,无非用2种方法,一种就是定义class/id,一种就是给最外层定义个class/id,然后用继承去写。而LESS CSS给了我们一种友好阅读的方式

.test{
    .margin10;
    @color:#4d926f;
    width:@w100 + 100px;height:100px;border:1px solid red;background:@color;
    &:hover,&.selected{background-color:#FFF}
    /*嵌套*/
    .test1{width:@w100 - 50px;height:100px;background-color:red;font-size:20px;
        /*多重嵌套*/
        div{width:100%;height:50px;background-color:#9F0;}
    }
    .test1:hover{background-color:@color}
}

  相信这样的样式要查找起来,都会比较轻松,哪一层套哪一层都一清二楚,这是我感觉它很赞的功能。

  总的来说,LESS CSS不是很适合用在项目中,它更适用于皮肤、模板等整体框架固定死的网站制作,比如论坛、空间。所以大家在使用LESS CSS请先考虑下这个工具是否适用,别盲目的使用,不但效率没提高,还增加了不必要的工作量。

 

出处:http://www.cnblogs.com/hooray

分享到:
评论

相关推荐

    不要盲目的在项目中使用LESS CSS.docx

    然而,正如标题所言,我们在项目中不应盲目地使用LESS CSS,而应根据实际需求和项目特点进行权衡。 首先,LESS CSS引入了变量,允许开发者定义如`@w100:100px;`和`@h100:100px;`这样的变量,然后在CSS中引用它们,...

    LessCSS

    资源名称:Less CSS内容简介:像写程序... LESS 既可以在 客户端 上运行 (支持IE 6 , Webkit, Firefox),也可以在服务端运行使用 Less CSS 的好处写更少的 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。

    前端学习项目 HTML CSS Less H5 .zip

    前端学习项目 HTML CSS Less H5 前端学习项目 HTML CSS Less H5 前端学习项目 HTML CSS Less H5 前端学习项目 HTML CSS Less H5 前端学习项目 HTML CSS Less H5 前端学习项目 HTML CSS Less H5 前端学习项目 ...

    lesscss-python 是 Less CSS 的 Python 版本.rar

    LESSCSS可以在多种语言、环境中使用,包括浏览器端、桌面客户端、服务端。 语言特性快速预览: 变量: 变量允许我们单独定义一系列通用的样式,然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要...

    详解在React项目中安装并使用Less(用法总结)

    一旦Less被正确配置,你就可以在项目中使用Less的语法编写样式了。Less中的变量使用`@`符号来定义,这使得管理颜色、字体大小等变得更加容易。定义变量的好处是,在多个地方使用同一个变量时,你可以只在一个地方...

    lesscss中文文档_编译工具koala

    在`lesscss中文文档`中,你可以找到关于LessCSS的详细语法和用法说明。文档通常会包含以下几个部分: 1. **变量(Variables)**:LessCSS允许定义变量存储颜色、尺寸等值,以便在多个地方复用,降低代码重复性。 2....

    less.js, less 转 css 工具

    在生产环境中,推荐使用命令行工具(如 `lessc`)预先编译 Less 文件为 CSS。 - 为了确保跨域安全,如果 Less 文件位于不同源,需要配置 CORS 设置或者使用服务器端的 Less 编译解决方案。 - 如果 Less 代码中包含...

    lessc 转换less为css

    在现代前端开发中,CSS预处理器扮演着重要的角色,其中Less就是一款广泛使用的预处理器。它扩展了CSS,引入了变量、嵌套规则、运算符等功能,使得CSS代码更加简洁、可维护。而lessc就是将Less代码编译成标准CSS的...

    使用node.js编写工具简化less编译(less2css.js)

    在Node.js环境中,我们可以使用内置的`fs`模块读取LESS文件,`path`模块处理文件路径,以及`child_process`模块调用外部命令(如`lessc`)进行编译。此外,可能还会涉及`shelljs`或`execa`等第三方库,以便更方便地...

    在 CSS 中使用 LESS 实现更多功能

    `,然后在多个选择器中使用它,当需要改变主题色时,只需修改一处即可。 其次,LESS的**嵌套规则**使代码结构更加清晰。在CSS中,嵌套规则允许我们把相关的样式组织在一起,比如: ```less .nav { ul { li { a ...

    IDEA配置 File Watcher CSS压缩及Less格式转换

    本知识点将详细介绍如何在IntelliJ IDEA中配置File Watcher来实现CSS的自动压缩以及Less文件的格式转换。 首先,让我们了解什么是File Watcher。File Watcher是IntelliJ IDEA中的一个功能,它可以监视指定文件或...

    Less css框架1.3

    LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承, 运算, 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox),也可以借助Node.js或者Rhino在服务端运行。 极大的减少了构建样式表的工作量。 本...

    Sass 和 Less CSS预处理器1

    【Sass 和 Less CSS预处理器】是前端开发中两种非常重要的工具,...在大型项目中,使用预处理器已经成为标准实践,确保CSS代码的组织有序,易于扩展。总的来说,Sass和Less都是前端开发者的强大工具,值得学习和掌握。

    LessCss.js

    LESSCSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量、继承、运算、函数等,...LESSCSS可以在多种语言、环境中使用,包括浏览器端、桌面客户端、服务端。

    css与QSS以及less

    在IT领域,特别是前端开发中,CSS(Cascading Style Sheets)是用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档呈现样式的一种语言...在实际工作中,可以根据项目需求和团队习惯灵活选择和组合使用这些技术。

    gwt-less-plugin:该模块提供了在GWT项目中使用LESS CSS编译器的功能

    通过深入研究这些内容,开发者可以快速上手并熟练掌握在GWT项目中使用LESS的方法。 总结起来,GWT-Less-Plugin是一个强大的工具,它将GWT的便捷性和LESS的灵活性结合在一起,为Java开发者提供了一种高效、整洁的...

    css开发的利器less

    LESS还提供了混合(mixins)功能,类似于函数或类,可以包含一组CSS声明,然后在其他地方重复使用。这对于创建可复用的样式组件非常有用,如边框圆角、过渡效果等,避免了编写相同的代码。 运算符是LESS的另一大...

Global site tag (gtag.js) - Google Analytics