互联网+时代,说建站,谈运营与网络营销
如皋网站制作,你还在使用纯css吗?如果你还没有接触过样式预处理器,那么希看这篇文章能帮到你.
简介(需要可参考,详情可见官网)
less:2009年出现,受sass的影响较大,但又使用css的语法,让大部分开发者和制作师更非常容易上手,在ruby社区之外兼容者远超过sass,其缺点是比起sass来,可编程功能不够,不过优点是简单和兼容css,反过来也影响了sass演变到了scss的时代,著名的twitter bootstrap就是选用less做底层语言的.
·sass:2007年诞生,最早也是最成熟的css预处理器,有着ruby社区的兼容和compass这一最较强的css框架,目前受less影响,已经进化到了全面兼容css的scss.·
·stylus:2010年产生,来自node.js社区,主要用来给node项目开展css预处理兼容,在此社区之内有一定兼容者,在普遍的意义上人气还彻底不如sass和less.
css预处理器是一种专门编写css代码的语言(工具),css 预处理器能够给大家带来许多超水平,为大家带来了几项重要的水平,我都会一一列出.简单来说,预处理器有越来越多种,今天大家来说说less,样式处理器能让css也能像编程语言一样写,然后再将其转换为css.使用css预处理器, 可以提供 css 缺失的样式层复用机制、减少冗余代码,提高样式代码的可维护性.
使用方法:
首先使用样式预处理器需要创建less样式表,扩展名为less,写完样式保存会全全自动生成css文件.在这个文件内编写less代码.html文件中引进css文件就可以.
文件切分css 预处理器扩展了@import指令的水平,如皋网站制作根据编译环节将切分后的文件重新合并为一个大文件.这一方面解决了大文件不便维护的问题,另一方面也解决了一堆小文件在加载时的配置问题.
变量声明可复用样式,比如说页面许多模块需要使用相同变量,大家可声明一个变量复用.
变量使用@变量名:信息.
样式层级嵌套
以下本图是less文件转换完的css文件,小伙伴们,这样是不是更方便大家快速写好样式呢?
mixin式复用性混进用法,将一段css代码,引进到另一个选择器中,提高复用性.
选择符嵌套用于表示当前选择的元素的本身,选择符嵌套的本元素,主用于给伪类添加样式更方便.
如皋网站制作总结:我看越来越多初学样式预处理的小伙伴们,经常对一些符号记混.
@可用来引进文件
@import “地址”
@声明遍历
&表示当前嵌套的元素
()混合元素可用()调用