轩枫阁

首页 / Web前端 / CSS / LESS编写技巧分享,快乐编写CSS

LESS编写技巧分享,快乐编写CSS

是不是也曾经为编写CSS而苦恼,重复性的编写、存在兼容性等问题,接下来就分享下我是如何使用LESS快乐编写CSS的,让你事半功倍~

前言

在此之前你可能听说过或使用过LESS, Sass 和其他 CSS 预处理器,它们是一种超棒的方法用来扩展 CSS 功能,使之更适合程序员。你可以使用变量、函数、混合、继承等多种编程常用方法来编写 CSS,以更少的代码完成更多的样式。

关于LESS

如果你还没接触过 LESS,可以先行阅读以下教程:

LESS CSS中文官网:http://www.lesscss.net/article/home.html

或者对于选择使用LESS或者SASS有疑问:

Less介绍及其与Sass的差异:http://www.w3cplus.com/css/an-introduction-to-less-and-comparison-to-sass.html

 

组件分享

组件简介

基础组件包括:layout.less、reset.less(源码附后),接下来可在其他的less文件中引入这些文件:@import “include/reset.less”;即可,分成更多的模块文件,使结构更清晰。

编写技巧

layout.less:包含reset.css,及部分常用的兼容性代码,包括圆角、省略号、文本隐藏、阴影、渐变、折行等,一一介绍.

 

简单圆角半径 Borer-radius

28104246_yfsz

CSS3 一个非常基本的新属性可以快速的生产圆角效果,如上图所示。要使用 CSS3 的圆角效果我们必须针对不同的浏览器定义各自的前缀,而如果使用了 LESS 就可以不用那么麻烦。

下面代码使用 mixin 技术,通过定义 .border-radius 并接收一个 radius 参数,该参数默认值是 5px,你可以在多个地方重复使用该 mixin 方法:

将这个 less 编译成 css 后的结果是:

 

四角的半径定制 Radius

如果你希望用户可自由定制四个角的半径,那么我们需要对上面代码做下改进。使用4个变量分别代表四个边角的半径大小:

编译后的 CSS

 

文本超出显示省略号 Ellipsis

SOUW9Q_D0O)06D9{FY`(99Y

如上图,只需要给li设置width或者max-width,再给li加上.text-autocut这个class即可

 

内阴影 Inner-shadow

sdgfsdg

4个参数分别表示:x轴偏移、y轴偏移、模糊长度、透明度(默认颜色是黑色) :

编译后的CSS

 

外阴影 box-shadow

dsfgsdgfh

编译后的CSS:

 

颜色渐变 Gradients

渐变是 CSS3 最复杂的属性之一,有上百万中不同的设置组合,但我们常用的无非几种。实现两个不同颜色之间的渐变,你可以定义开始颜色和最终颜色,这里我们使用最新的渐变语法,浏览器的支持情况请看这里

sdfgdgtd

第一个参数指定渐变的方向:top、left,第二第三个参数为起始和终止颜色,兼容IE7-11、chrome、FF等各大浏览器,不支持的取2个颜色的混合色,IE使用滤镜,因为LESS不支持滤镜写法,所以取值时需要加上 ~””。

编译后的CSS:

 

元素过渡效果 Transition

28104250_stAr
CSS3 的过渡使用起来更加麻烦,你必须最大化的支持各种浏览器,因此你需要定义 5 个前缀:

编译后的CSS:

 

变形 Transform

28104252_SJGI
可以使用 CSS3 来对元素进行角度旋转、缩放和倾斜等效果

编译后的CSS:

 

镜像效果Reflect

CSS3 中的镜像效果只支持webkit浏览器

sdfgeh

28104255_Feqm

编译后的CSS:

 

三角形 Trangle

asfdesf

5个参数:宽度,颜色(上、右、下、左)

编译后的CSS:

颜色计算-互补色方案 Complementary Color Scheme

LESS 和 Sass 最独特的功能就是颜色计算函数,你可以轻松使用 LESS 来创建各种调色板。

28104256_Z97b

 

这里我们使用一个基本色,然后通过彩色旋转以及加亮和变暗方法扩展到5个不同色板。为了生成互补色,我们使用 spin 将颜色旋转 180 度:

生成的 CSS:

 

颜色计算-颜色微调 Subtle Color Scheme

28104258_0MSJ

互补色很有用,但在网页设计中另外一个更有用的就是颜色微调:

生成的 CSS:

 

文本折行 Wrap

如英文或数字过长的换行显示

 

透明度 Opacity

inline-block

文本隐藏 Hide

 

小结

通过以上的这些技巧,相信以后再写CSS的过程中会轻松很多,而且利用CSS3也使网站变得更美观。

如果你不打算用LESS,sublime的Emmet也提供了类似功能,链接地址

当然了这只是一部分,刚开始写网页的时候,记得要先将样式重置了,下面是具体的代码

样式重置 reset.less

 文件下载

layout.less

reset.css

284/470
286/470

相关阅读

文章评论

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]

    点击开始录制,可以录制弹奏的曲子