美文网首页
Less学习

Less学习

作者: xx_Shen | 来源:发表于2015-04-16 17:15 被阅读55次

What is Less

*动态的样式语言,扩充了css

Why use Less

*增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。

How use Less

  • http://lesscss.org/ 从这下载Less 然后
    <link rel="stylesheet/less" type="text/css" href="less/styles.less">
    <script src="js/less.js" type="text/javascript"></script>

demo

*变量
Less Code

 /*======== 定义变量===========*/
@color: #4d926f;
/*======== 应用到元素中 ========*/
#header {
    color: @color;
}
h2 {
    color: @color;
}

Compiled Css code:

/*======= Less 编译成 css ======*/
#header {
  color: #4d926f;
}
h2 {
  color: #4d926f;
}

Less中的变量还具有计算功能,如
Less Code

@nice-blue: #5b83ad;
@light-blue: @nice-blue + #111;
#header {
  color: @light-blue;
}

Compiled Css code:

#header {color: #6c94be;}

相关文章

  • less基础

    less less语法学习

  • less使用

    LESS 的介绍 学习网站:快速入门 | Less.js 中文文档LESS « 一种动态样式语言 Less的安装 ...

  • less的配置安装及语法使用

    [目录] Less为什么会出现? 学习Less的网站 Less的安装环境离线的安装方式在线的安装方式 less转化...

  • Less学习

    Variables(变量) 概述变量通过为你提供一种在一个地方管理这些值的方法让你的代码变得更容易维护: 变量插值...

  • Less学习

    1.全局安装: npm install less -g 2.编写less文件(xx.less),定义变量 官网在介...

  • Less学习

    为什么使用less css已经有很多新的东西学习了,为什么要学习less的知识。Github上很多项目都已经在用,...

  • 学习LESS

    变量 变量允许我们单独定义一系列通用的样式,然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几...

  • Less学习

    What is Less *动态的样式语言,扩充了css Why use Less *增加了诸如变量、混合(mix...

  • less学习笔记

    less学习笔记 导入 可以通过下面的形势引入 .less 文件, .less 后缀可带可不带: 如果导入一个CS...

  • LeSS三天的学习,复盘与感悟

    周四、周五、周六三天LeSS的学习,提前请好假,做好充足的准备,开始LeSS学习之旅。三天的学习收获颇多。虽然提前...

网友评论

      本文标题:Less学习

      本文链接:https://www.haomeiwen.com/subject/dbbsfttx.html