文档章节

LESS CSS 的简单使用

你要爪子
 你要爪子
发布于 2014/07/19 16:11
字数 438
阅读 46
收藏 0

为你的网站或者 App 建立一个 LESS CSS 的 按钮

在我们的网站建设中 css 都是必不可少的东西。他可以让我们网站布局更加的美观。但在开发的过程中,有诸多的不方便。因此,产省了 LESS LESS 相当与 动态的样式语言,可以动态的定义我们的样式。可以根据你的定义而产生不同的效果。 LESS 提供了诸如:变量, 混合,函数,嵌套运算符等功能。

三种使用 LESS 的方法

1.客户端

LESS 允许在浏览器中通过 LESS.js 实时进行编译。先好 LESS 代码,然后放在中 ,把 LESS.js也包含在中,记住,js要在样式css的之前。

2.服务端

如果你使用了 Node.js 或者 Rhino ,也可以在服务端使用 Less;

3.直接编译使用 Less

如果你不想在服务端或者客户端编译,你可以直接编译你的 Less 代码变成 CSS 代码,安装 LESS 使用npm编译,使用 lessc来编译 less文件;

lessc styles.less styles.css

下面我们就来创建一个实例吧。

style.less

//Variables
@base-color: #E5F5FB;
@font-size: 16px;
@size: 4px;

//Define the colors
@light-blue: #5AC1E4;
@dark-blue: #0DA4D8;
@dark-pink: #BB4E75;
@darker-pink: #992E58;
@light-green: #99AF5E;
@dark-green: #75A61F;

//Page body
body
{
    background-color: @base-color;
    font-family: 'Josefin Sans', sans-serif;
}

//Base style for button and text classes
.base_button
{
    border-radius: @size;
    display: inline-block;
    font-size: @font-size;
    color: #fff;
}

//Class button
.button(@base, @hover)
{
    //Inherit the base_button class
    .base_button;
    background-color: @base;
    padding-bottom: @size;

    //child element with class text inside class button
    .text
    {
        .base_button;
        background-color: @hover;
        padding: @size+4;

        //On Mouse hover
        &:hover
        {
            position: relative;
            top: -1px;
        }
    }
}

//Element with ID = blue-button
#blue-button
{
    .button(@dark-blue, @light-blue);
}

//Element with ID = pink-button
#pink-button
{
    .button(@darker-pink, @dark-pink);
}

//Element with ID = green-button
#green-button
{
    .button(@dark-green, @light-green);
}

index.html

<div>
    <a href="#"><span class="text">Click Me</span></a>  
    <a href="#"><span class="text">Click Me</span></a>  
    <a href="#"><span class="text">Click Me</span></a>
</div>

使用 lessc 编译。

© 著作权归作者所有

你要爪子
粉丝 25
博文 92
码字总数 44444
作品 0
昆明
高级程序员
私信 提问
Web 设计师不可错过的 25+ CSS 工具

当涉及到简化 CSS 设计和开发相关的工作时,工具总能创造奇迹。值得指出的是,绝大多数的网页设计者和开发人员对不同的 CSS 工具都感到兴奋,这些工具能帮助他们更快的制作功能完善又十分完美...

oschina
2015/07/28
6.4K
13
2015年50+ CSS 工具、框架、库合集

CSS动画工具 & 库 1. Animate Plus 一个可以帮你创建CSS属性和SVG属性的JavaScript动画库。 2. Rocket 一个创建WEB动画的简单的工具。 3. Tuesday 新奇CSS动画库。 4. Shift.css 创建定时CSS...

柠檬酷
2015/12/15
112
0
CSS 编码中超级有用的工具集合

当你开发网站和 Web 应用时,使用合适的工具可以节省大量的时间。本文我将收集一些非常有用的 CSS 编码工具,希望对你有帮助。 Pure CSS Pure 是来自雅虎的 CSS 框架,使用 Normalize.CSS 无...

oschina
2013/07/17
4K
10
36 个 CSS 框架推荐

来自Arunace的博文,本文介绍了36个CSS框架,提高开发、设计效率的事情总是让人不懈追求,快来看看吧,让你看看专家们的选择和推荐! 1. 1KB CSS GRID 大部分CSS框架,很牛,但是也很复杂,尤...

小卒过河
2011/10/26
49.4K
15
引人瞩目的 CSS 变量(CSS Variable)

这是一个令人激动的革新。 CSS 变量,顾名思义,也就是由网页的作者或用户定义的实体,用来指定文档中的特定变量。 更准确的说法,应该称之为 CSS 自定义属性 ,不过下文为了好理解都称之为 ...

chokcoco
2016/11/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

css3D 全景图 - 含有定位的文字Label

查看全景效果 完整代码 <style type="text/css"> body { margin: 0px; } .canvasWrap { width: 100%; height: 600px; backgro......

tianyawhl
28分钟前
1
0
JS利用新的参数刷新easyui的tab的panel的url

思路:根据浏览器地址,截图?之前的url作为head,然后把url后面的参数解析为object对象,再根据传入的参数对象,重置参数对象,最后重新拼接url JS: /** * 更新panel的url * @returns */fu...

文文1
29分钟前
1
0
jmeter集群测试。

jmeter集群测试的官方文档:http://jmeter.apache.org/usermanual/jmeter_distributed_testing_step_by_step.html 一、测试机器。 集群测试的电脑,分为2种: Master 运行JMeter GUI 界面(j...

王坤charlie
30分钟前
1
0
网页结构简介

有人说“互联网中有50%以上的流量是爬虫”,第一次听这句话也许你会觉得这个说法实在太夸张了,怎么可能爬虫比用户还多呢?毕竟会爬虫的相对与不会爬虫的简直少之又少。 但是很多爬虫工程师或...

猪哥66
32分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部