浅谈css的预编译---less语言
2017-02-10 09:56
453 查看
浅谈css的预编译---less语言
原文地址:http://www.cnblogs.com/koplemei/p/4931189.html?utm_source=tuicool&utm_medium=referral
正如各位所知道的一样,css是一门标记性语言,语法相对简单,对使用者的要求也比较低 。不过可乐不知道友友们有没有发现,在使用css的时候需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用,尤其对于一些缺乏css编写经验的猿猿来讲,写出组织良好且易于维护的 CSS 代码是相当困难的一件事情。这个时候呢,可乐悄悄地告诉你们,咱们的程序员蜀黍是无所不能的,针对这个调皮的css,专门开发了less语言。那么,就由可乐来细细为你们介绍这一个新朋友吧~~~
less.js 文件,然后在我们需要引入 LESS 源文件的 HTML 中加入如下代码:
注意,此处的rel属性值是“stylesheet/less”哦。
还有一点就是:less源文件一定要在less.js引入之前引入,才能保证less源文件正确编译解析:
2、在服务器端使用:主要是借助于LESS的编译器,将less源文件编译生成最终的css文件(推荐);
LESS 在服务器端的使用主要是借助于 LESS 的编译器,将 LESS 源文件编译生成最终的 CSS 文件,目前常用的方式是利用 node 的包管理器 (npm) 安装 LESS,安装成功后就可以在 node 环境中对 LESS 源文件进行编译。
在项目开发初期,我们无论采用客户端还是服务器端的用法,我们都需要想办法将我们要用到的 CSS 或 LESS 文件引入到我们的 HTML 页面或是桥接文件中,LESS 提供了一个我们很熟悉的功能— Importing。我们可以通过这个关键字引入我们需要的 .less 或 .css 文件。 如:
.less 文件也可以省略后缀名,像这样:
引入 CSS 同 LESS 文件一样,只是 .css 后缀名不能省略。
如上所示:
@color 就是可乐刚刚定义的变量,在
.bg-color 和 .border-color 当中都可以使用它
可乐注释一下:其中
@radius 是参数,不穿参数时,默认值为 5px ,如
#header 中的用法。
基础css样式:
第一种继承写法:
第二种继承写法:
两写法不同,编译后生成的CSS样式也不一样
第一种:
第二种:
LESS:
http://less.bootcss.com/functions/
比如我们要实现一个控制 ::placeholder 样式的 mixin,当传入颜色时只设置颜色,当传入声明块时输出对应的样式规则,其他情况输出一个默认的 color
可乐提示一下哈:default() in guards acts as else
好啦,对less的主要用法呢,可乐就讲这么多,最后再给一些友情提示,希望对各位博友们有帮助哦~~~
Sass官网:http://sass-lang.com/
http://www.w3cplus.com/sassguide/
Less官网:http://lesscss.org/ 中文:http://less.bootcss.com/
Stylus文档:http://learnboost.github.io/stylus/
LESS和SCSS对比:https://css-tricks.com/sass-vs-less/
2、sass与compass实战一书 主要讲解了Sass用法
原文地址:http://www.cnblogs.com/koplemei/p/4931189.html?utm_source=tuicool&utm_medium=referral
正如各位所知道的一样,css是一门标记性语言,语法相对简单,对使用者的要求也比较低 。不过可乐不知道友友们有没有发现,在使用css的时候需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用,尤其对于一些缺乏css编写经验的猿猿来讲,写出组织良好且易于维护的 CSS 代码是相当困难的一件事情。这个时候呢,可乐悄悄地告诉你们,咱们的程序员蜀黍是无所不能的,针对这个调皮的css,专门开发了less语言。那么,就由可乐来细细为你们介绍这一个新朋友吧~~~
一、less简介:
1、less语言是在css的语法基础上,引入了变量,Mixin(混入),运算,以及函数等功能,可以让我们用更少的代码做更多的事情哦!二、.less引入(两种方式):
1、客户端使用.less文件:先要从http://lesscss.org下载less.js 文件,然后在我们需要引入 LESS 源文件的 HTML 中加入如下代码:
<link rel="stylesheet/less" type="text/css" href="styles.less">
注意,此处的rel属性值是“stylesheet/less”哦。
还有一点就是:less源文件一定要在less.js引入之前引入,才能保证less源文件正确编译解析:
<script src="../less.min.js"></script>
2、在服务器端使用:主要是借助于LESS的编译器,将less源文件编译生成最终的css文件(推荐);
LESS 在服务器端的使用主要是借助于 LESS 的编译器,将 LESS 源文件编译生成最终的 CSS 文件,目前常用的方式是利用 node 的包管理器 (npm) 安装 LESS,安装成功后就可以在 node 环境中对 LESS 源文件进行编译。
在项目开发初期,我们无论采用客户端还是服务器端的用法,我们都需要想办法将我们要用到的 CSS 或 LESS 文件引入到我们的 HTML 页面或是桥接文件中,LESS 提供了一个我们很熟悉的功能— Importing。我们可以通过这个关键字引入我们需要的 .less 或 .css 文件。 如:
@import “variables.less”;
.less 文件也可以省略后缀名,像这样:
@import “variables”;
引入 CSS 同 LESS 文件一样,只是 .css 后缀名不能省略。
三、.less语法简介:
1、变量:一次定义,重复使用:
@color:#505253; .bg-color{ background-color:@color; } .border-color{ border:1px solid @color; }
如上所示:
@color 就是可乐刚刚定义的变量,在
.bg-color 和 .border-color 当中都可以使用它
2、混入--Mixins:申明一个类,然后在其它类中调用当前这个类
.roundeCorers(@radius:5px){ -moz-border-radius:@radius; -webkit-border-radius:@radius; border-radius:@radius; } #header{ .roundeCorers; } #footer{ .roundeCorers(10px); }
可乐注释一下:其中
@radius 是参数,不穿参数时,默认值为 5px ,如
#header 中的用法。
3.继承
有一个类用了一组样式,又写了一个类也想用这个样式,可继承上个类的样式,如:基础css样式:
.base-style { font-size: 12px; color: red; }
第一种继承写法:
.content{ .base-style(); background-color: white; }
第二种继承写法:
.content{ &:extend(.base-style); background-color: white; }
两写法不同,编译后生成的CSS样式也不一样
第一种:
.base-style{ font-size: 12px; color: red; } .content { font-size: 12px; color: red; background-color: white; }
第二种:
.base-style, .content{ font-size: 12px; color: red; } .content { background-color: white; }
4、嵌套规则:
html:<div id="header"> <h1><a href="">www.xdpie.com</a></h1> <p>自游自驾</p> </div>
LESS:
#header { display: inline; float: left; h1 { font-size: 26px; font-weight: bold; a { text-decoration: none; color: #f36; &:hover { text-decoration: underline; color: #63f; } } } p { font-size: 12px; } }
5、功能和操作:
可乐给大家一个网址,供大家参考:http://less.bootcss.com/functions/
6、逻辑控制:
LESS是用mixin通过guard的方式支持简单图瓦人分支控制,比如我们要实现一个控制 ::placeholder 样式的 mixin,当传入颜色时只设置颜色,当传入声明块时输出对应的样式规则,其他情况输出一个默认的 color
.mixin(@val) when (iscolor(@val)) { color: @val; } .mixin(@val) when (isruleset(@val)) { @val(); } .mixin(@val) when (default()) { color: #666; }
可乐提示一下哈:default() in guards acts as else
好啦,对less的主要用法呢,可乐就讲这么多,最后再给一些友情提示,希望对各位博友们有帮助哦~~~
预编译CSS有哪些:
Sass(Scss),Less,StylusSass官网:http://sass-lang.com/
http://www.w3cplus.com/sassguide/
Less官网:http://lesscss.org/ 中文:http://less.bootcss.com/
Stylus文档:http://learnboost.github.io/stylus/
LESS和SCSS对比:https://css-tricks.com/sass-vs-less/
LESS和SCSS分别有哪些项目和书籍可作为参考:
1、Bootstrap 用了LESS2、sass与compass实战一书 主要讲解了Sass用法
相关文章推荐
- 一种 动态 样式 语言. LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承, 运算, 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox),也可以借助Node.js或者Rhino在服务端运行。
- less(css)语言快速入门
- Sublime Text 支持 CSS预处理语言 LESS
- CSS预处理语言 less (一) 初识less
- 构建基于 NodeJS 的 LESS.js 预编译 CSS 服务
- Less (一种动态 CSS 语言)
- 常见的动态样式css语言之less
- sublime中用less实现css预编译
- CSS预处理语言Less常用语法
- less让css具有动态语言的特性
- LESS,强大的CSS预处理语言
- 浅谈vue引入css,less遇到的坑和解决方法
- less简单入门(CSS 预处理语言)
- CSS预处理语言--Less
- 【CSS】LESS(样式语言):动态样本表语言
- VueJS如何引入css或者less文件的一些坑
- 浅谈搜索引擎SEO(HTML/CSS)
- 用vs2015编译器写c语言程序提示“预编译头文件来自编译器的早期版本,或者预编译头为c++而在c中使用它(或相反)”
- 浅谈CSS定义超链接<a>正确顺序L-V-H-A
- 浅谈css中的backgroundcolor="transparent"