Less是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。

使用Less语言来编写样式时,特别适合模块化编程,代码看起来更具有条理性。还有对一些不确定的CSS属性,可以先用变量@vaule替代的方式,然后把这些变量统一写在variables.less文件中,待样式全部写完之后,再去对这些不确定的变量赋值。而且代码的可维护性比css更好一点,能够实现在较短的时间内高效开发出页面。

基本语法

1、变量——Variables

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

2、混入——Mixins

//一般的混入
.bordered {
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
}
#menu a {
    color: #111;
    .bordered;
}
//函数的混入
.average(@x, @y) {
    @average: ((@x + @y) / 2);
}
div {
   .average(16px, 50px);
   padding: @average;
}

3、嵌套规则——Nested Rules

#header {
    color: black;
    .navigation {
    font-size: 12px;
    }
    .logo {
        width: 300px;
    }
    &:after {
        content: " ";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
}

4、运算——Operation

任何数字、颜色或者变量都可以参与运算。下面是一组案例:

@base: 5%;
@filler: @base * 2;
@other: @base + @filler;
color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;

5、函数——Function

Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。这些函数在函数手册中有详细介绍。函数的用法非常简单。下面这个例子将介绍如何将 0.5 转换为 50%,将颜色饱和度增加 5%,以及颜色亮度降低 25% 并且色相值增加 8 等用法:

@base: #f04615;
@width: 0.5;
.class {
    width: percentage(@width); // returns `50%`
    color: saturate(@base, 5%);
    background-color: spin(lighten(@base, 25%), 8);
}

6、命名空间——Namespaces

#bundle {
    .button {
         display: block;
         border: 1px solid black;
         background-color: grey;
         &:hover {
         background-color: white
    }
}
#header a {
    color: orange;
    #bundle > .button;
}

第一次萌生想要建立个人网站的想法,是在去年10月份左右的时候,总觉得作为一名开发人员,连个网站都没有,真没劲。

后来,开始去找域名和空间,一开始想在网上搜罗,总想着免费的午餐,结果可想而知。过了一段时间,又去淘宝上逛一逛,发现上面还是有一些便宜的套餐,对于刚刚入门建站,做个静态网页,练练手完全可以应付了,而且还能送个免费的域名。我当时选择的是创科数据中心,如下图的配置。

zone

有了域名和空间,下一步就需要搭建自己的网站,想了一阵子,毫无头绪,后来在网上看到了一个不错的个人简历网站,觉得很棒,以后找工作说不定还能派上用场,就跟着邯郸学步。

不懂设计,只能奔着简单大方的风格,去修改自己的个人简历网站。类似于手机产品宣传页,那种鼠标滚动主导点击的交互方式。陆续又引用了BootStrap前端框架,利用其中的栅格系统,实现了响应式的设计,经过几次不间断的改版,自我感觉越来越良好。

网站做的差不多了,想换一个正式一点的域名,就在创科中心上,购买注册了域名,非国际域名不选,最后以名字拼接生日的形式注册了leo0407.com

空间和域名都已经就绪了,接下来就将源码上传到虚拟主机上,我用的FTP上传工具是FileZilla,免费的挺好用。

最后的网站就成了这个样子,如下缩略图,点击查看大图!

个人简历页面

伴随着年后的跳槽季,我跟毕业后的第一份工作,培养了我一年半的富士康集团说了声再见,对于能有这份经历,我还是非常感激的,教会了我很多做人做事的道理,也让我慢慢成长起来。但是,这个世界很大,我想到外面看看。

其实在面试过程中,你只要想面试官证明你是可以胜任眼前的这份工作的。光靠说辞是远远不够的,你要拿出证明,比如说作品展示。或许你还要一个展示自己的窗口,让别人在短短的几分钟内对你有个整体的了解。

这个时候我觉得,个人博客网站会是一个很不错的平台,整理自己的思绪,写成一篇篇博客,分享自己学到的技术,还有如何学习的过程,以及人生的经历与感悟之类等等。日积月累,将会是一笔非常宝贵的财富。至少知道自己这些年,到底是怎么度过了。

于是我就开始接触WordPress博客平台,可以很方便地在支持PHP和MySQL数据库的服务器上架设属于自己的网站,同使也可以当作一个内容管理系统(CMS)来管理自己的博客网站,并且其中还有很多丰富的主题和插件可以使用。

能够有这样一个快速安装并部署的博客平台,真是很方便,节省很多开发和设计的时间,哪怕是不懂技术的人,也可以很快速地学会。

过了一段时间,香港的服务器运营商说要倒闭了。后来看到阿里有提供免费的云虚拟主机,只要把域名申请备案,就可以有两年的免费使用权。我又在阿里旗下的万网注册了新的域名:xiangrenya.com,已经申请备案过了,用着个人博客的用途。接下来,希望自己能够产出一些高质量的博文。

对于前端开发者来说,Sublime Text是一款非常轻便的代码编辑器,启动速度快,占用内存少,开发者可以根据需要,通过Package Control安装需要的插件,熟练掌握开发过程中用的编辑器或者IDE,特别是快捷键,对高效完成编程任务是很有帮助的。

自动编译

打开:Tools>Build System>New Build System
设置如下:

{
	"cmd":["C:/Program Files (x86)/Google/Chrome/Application/chrome.exe","$file"],
	"selector":["text.html"]
}

在HTML页面中,按F7||ctrl+B,在Chrome中查看页面。

安装Package Control:

自动安装:
1、通过快捷键ctrl+’或者 View > Show Console 菜单打开控制台
2、粘贴对应版本的代码后回车安装
适用于 Sublime Text 3:

import  urllib.request,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();urllib.request.install_opener(urllib.request.build_opener(urllib.request.ProxyHandler()));open(os.path.join(ipp,pf),'wb').write(urllib.request.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())

更多关于Package Control的使用,可参考:Package Control

Emmet插件

Emmet是一款很好的代码补全插件。非常的强大和智能,最大程度上减轻了编程的工作量。

// Emmet的缩写格式
#page>div.logo+ul#navigation>li*5>a{Item $}
// 可自动转换成如下的html语言
<div id="page">
 <div class="logo"></div>
 <ul id="navigation">
 <li><a href="">Item 1</a></li>
 <li><a href="">Item 2</a></li>
 <li><a href="">Item 3</a></li>
 <li><a href="">Item 4</a></li>
 <li><a href="">Item 5</a></li>
 </ul>
</div>