Less.js 安装 npm install -g less 变量 basic 变量采用@进行变量定义.变量可以直接参加运算. @width:100px; .variables{ width:@width; height: @width+50px; (变量运算之后,不加px单位也可) } 作用域 scope Less 中的作用域与 CSS 中的作用域非常类似.首先在本地查找变量和混合(mixins),如果找不到,则从"父"级作用域继承. <div id="nesting…

本文由 nzbin 翻译,黄利民 校稿.未经许可,禁止转载! 英文出处:css-tricks.com 发表地址:http://web.jobbole.com/91016/ 如果你看过老的科幻电影,你一定知道循环的强大之处.给你的机器人克星设置无限循环,它就会爆炸,然后机器人灰飞烟灭了. 预处理器的循环并不会在太空中发生剧烈爆炸(我希望),但是它有利于书写 DRY CSS(译者注:详细介绍可以参考这篇文章 http://vanseodesign.com/css/dry-principles/).每…

css预处理器赋予了css动态语言的特性,如变量.函数.运算.继承.嵌套等,有助于更好地组织管理样式文件,以及更高效地开发项目.css预处理器可以更方便的维护和管理css代码,让整个网页变得更加灵活可变.对于预处理器,广泛使用的有less和sass.在这不做对比,2者大同小异,sass基于Ruby语言编写,所以编译sass文件需要Ruby环境.我们使用sass并不需要过多了解Ruby语言,只需要安装Ruby环境即可,而less则主要是运行在node环境下,功能语法有类似之处.本文主要介绍Ruby…

前面的话   "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工具,提 供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护.本文将详细介绍sass的使用 定义   Sass是一门高于CSS的元语言,它能用来清晰地.结构化地描述文件样式,有着比普通CSS更加强大的功能.Sass能够提供更简洁.更优雅的语法,同时提供多种功能来创建可维护和管理的样式…

CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 首先我们来简单介绍下什么是 CSS 预处理器,CSS 预处理器是一种语言用来为 CSS 增加一些编程的的特性,无需考虑浏览器的兼容性问题,例如你可以在 CSS 中使用变量.简单的程序逻辑.函数等等在编程语言中的一些基本技巧,可以让你的 CSS 更见简洁,适应性更强,代码更直观等诸多好处. 不要再停留在石器时…

Myth 是一个预处理器,有点类似于 CSS polyfill .Myth 让你写纯粹的 CSS,同时还让你可以使用类似 LESS 和 Sass 的工具.您仍然可以使用变量和数学函数,就像你在其它预处理器中使用的一样. 您可能感兴趣的相关文章 Web 前端开发精华文章推荐[系列十二] 精选12款优秀 jQuery Ajax 分页插件和教程 10大流行的 Metro UI 风格 Bootstrap 主题 8款效果精美的 jQuery 加载动画和进度条插件 推荐35款精致的 CSS3 和 HTML5…

CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 首先我们来简单介绍下什么是 CSS 预处理器,CSS 预处理器是一种语言用来为 CSS 增加一些编程的的特性,无需考虑浏览器的兼容性问题,例如你可以在 CSS 中使用变量.简单的程序逻辑.函数等等在编程语言中的一些基本技巧,可以让你的 CSS 更见简洁,适应性更强,代码更直观等诸多好处. 不要再停留在石器时…

CSS 预处理器是什么?一般来说,它们基于 CSS 扩展了一套属于自己的 DSL,来解决我们书写 CSS 时难以解决的问题: 语法不够强大,比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器: 没有变量和合理的样式复用机制,使得逻辑上相关的属性值必须以字面量的形式重复输出,导致难以维护. 所以这就决定了 CSS 预处理器的主要目标:提供 CSS 缺失的样式层复用机制.减少冗余代码,提高样式代码的可维护性.这不是锦上添花,而恰恰是雪中送炭. 网上已经有不少对比目前最主流的三个预处理器 Les…

什么是CSS预处理器? CSS可以让你做很多事情,但它毕竟是给浏览器认的东西,对开发者来说,Css缺乏很多特性,例如变量.常量以及一些编程语法,代码难易组织和维护.这时Css预处理器就应运而生了.Css预处理器定义了一种新的语言将Css作为目标生成文件,然后开发者就只要使用这种语言进行编码工作了.预处理器通常可以实现浏览器兼容,变量,结构体等功能,代码更加简洁易于维护. “我应该选择哪种css预处理器?”是最近网上的一大热门话题,很多人为此争论不休.相比过去我们对是否应该使用Css预处理器的话题…

CSS 预处理编译器能让我成程序化其的方式编写CSS代码,可以引入CSS中没有的变量.条件.函数等特性,从而让代码更简单易维护,但一般按预处理器语法编写的代码无法直接在浏览器中运行,需用通过工具比如gulp转换成标准的CSS语法,从而在浏览器中运行.个人理解它是标准CSS语法的扩展及增强,能在一定程度上提高编码效率. 三种预处理器的对比: Sass诞生是最早也是最成熟的CSS预处理器,有Ruby社区和Compass支持:安装.编译依赖Ruby环境: Stylus早期服务器Node JS项目,在该…

http://sass-lang.com/ Sass是一种CSS预处理器语言,通过编程方式生成CSS代码.因为可编程,所以操控灵活性自由度高,方便实现一些直接编写CSS代码较困难的代码. 同时,因为Sass是生成CSS的语言,所以写出来的Sass文件是不能直接用的,必须经过编译器编译成CSS文件才能使用. Sass有什么好处? Sass的主要特性如下:变量.嵌套.导入.混合.继承.运算.函数.这些特性为编写CSS加入编程控制的能力. 如何开始使用Sass 直接使用任何文本或代码编辑器都可以开始编…

xwei | 2012-07-07 | 网页重构 什么是CSS预处理器? Css可以让你做很多事情,但它毕竟是给浏览器认的东西,对开发者来说,Css缺乏很多特性,例如变量.常量以及一些编程语法,代码难易组织和维护.这时Css预处理器就应运而生了.Css预处理器定义了一种新的语言将Css作为目标生成文件,然后开发者就只要使用这种语言进行编码工作了.预处理器通常可以实现浏览器兼容,变量,结构体等功能,代码更加简洁易于维护. “我应该选择哪种css预处理器?”是最近网上的一大热门话题,很多人为此争论不…

什么是 CSS 预处理器?  就CSS本身而言,对于大多数Web前端从业人员来说就不是问题.学过CSS的人都知道,它不是一种编程语言.你可以用它开发网页样式,但是没法用它编程.换句话说,CSS基本上是设计师的工具,不是程序员的工具. 就CSS本身而言,对于大多数Web前端从业人员来说就不是问题.学过CSS的人都知道,它不是一种编程语言.你可以用它开发网页样式,但是没法用它编程.换句话说,CSS基本上是设计师的工具,不是程序员的工具.在程序员的眼里,CSS是很头痛的事情,它并不像其它程序语言,比如…

什么是CSS预处理器? CSS可以让你做很多事情,但它毕竟是给浏览器认的东西,对开发者来说,Css缺乏很多特性,例如变量.常量以及一些编程语法,代码难易组织和维护.这时Css预处理器就应运而生了.Css预处理器定义了一种新的语言将Css作为目标生成文件,然后开发者就只要使用这种语言进行编码工作了.预处理器通常可以实现浏览器兼容,变量,结构体等功能,代码更加简洁易于维护. “我应该选择哪种css预处理器?”是最近网上的一大热门话题,很多人为此争论不休.相比过去我们对是否应该使用Css预处理器的话题…

[大伽说]如何运维千台云服务器 »   CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 首先我们来简单介绍下什么是 CSS 预处理器,CSS 预处理器是一种语言用来为 CSS 增加一些编程的的特性,无需考虑浏览器的兼容性问题,例如你可以在 CSS 中使用变量.简单的程序逻辑.函数等等在编程语言中的一些基本技巧,可以让你的 CSS 更见简洁,适应性更强,代…

CSS(Cascading Style Sheet)被译为级联样式表,做为一名前端从业人员来说,这个专业名词并不陌生,在行业中通常称之为“风格样式表(Style Sheet)”,它主要是用来进行网页风格设计的.通过设立样式表,可以统一地控制HTML(XHTML)中各标签的显示属性.可以使人更能有效的控制Web页面(或Web应用程序)外观,可以精确指定Web元素位置,外观以及创建特殊效果的能力.CSS拥有对网页对象和模型样式编辑能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言.…

本文根据Johnathan Croom的<sass vs. less vs. stylus: Preprocessor Shootout>所译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点.如需转载此译文,需注明英文出处:http://net.tutsplus.com/tutorials/html-css-techniques/sass-vs-less-vs-stylus-a-preprocessor-shootout/,以及作者相关信息 --作者:Johnatha…

Sass.LESS是什么?大家为什么要使用他们?  他们是CSS预处理器.他是CSS上的一种抽象层.他们是一种特殊的语法/语言编译成CSS.  Less是一种动态样式语言. 将CSS赋予了动态语言的特性,如变量,继承,运算, 函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox),也可一在服务端运行 (借助 Node.js). 为什么要使用它们? •结构清晰,便于扩展.  •可以方便地屏蔽浏览器私有语法差异.这个不用多说,封装对浏览器语法差异的重复处理,减少…

五.Mixins (混入) Mixins 有点像是函数或者是宏,当你某段 CSS 经常需要在多个元素中使用时,你可以为这些共用的 CSS 定义一个 Mixin,然后你只需要在需要引用这些 CSS 地方调用该 Mixin 即可. Sass 的混入语法: /* Sass mixin error with (optional) argument $borderWidth which defaults to 2px if not specified */ @mixin error($borderWidt…

前沿 : 第一次写不够成熟,可能描述有所错误,还请大家修改指正,我会对已完成的文章进行修改. 一.什么是CSS预处理器 CSS预处理器定义了一种新的语言,基本的思想是用一种专门的编程语言,开发者只需要使用这种语言进行编码工作,减少枯燥无味的CSS代码的编写过程的同时,它能让你的CSS具备更加简洁.适应性更强.可读性更加.层级关系更加明显.更易于代码的维护等诸多好处. CSS预处理器种类繁多,本次就以Sass.Less.Stylus进行比较. 二.语法 在使用CSS预处理器之前最重要的是了解语法,…

写在前面的乱七八糟的前言: emmm,不得不说,早上七点是个好时间,公园里跳广场舞的大妈,街边卖菜刀看报的大爷,又不得不说,广州图书馆是个好地方,该有的安静,该有的人气,听着楼下小孩子的声音,看着周围各色各样的人,emmm比如:无视请勿饮食的标识语正在吃东西的小姐姐,好像是个三明治- -,我不会承认,我也饿了的TAT,老生常谈那么几句,一直秉承着不仅要学会用也要知道用的这些从何处而来,所构成的逻辑及背后的故事,总不能哪天面试官问你,谈谈你对CSS预处理器的看法,或问,你觉得Sass方便在哪,然后…

这篇文章是初步介绍css预处理的,详细学习请移步官网~ 什么是css预处理器 CSS 预处理器是一种语言, 通俗易懂的话来说就是“用一种专门的编程语言,进行 Web 页面样式编写,再通过编译器转化为正常的 CSS 文件,以供项目使用”,无需考虑浏览器的兼容性问题. 例如你可以在 CSS 中使用变量.简单的程序逻辑.函数等等在编程语言中的一些基本技巧,可以让你的 CSS 更见简洁,适应性更强,代码更直观等诸多好处. 但是,CSS预处理器也不是万金油,原生CSS的好处在于简便.随时随地被使用和调试.…

http://www.w3cplus.com/css/css-preprocessor-sass-vs-less-stylus-2.html 一.什么是CSS预处器 CSS预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用这种语言进行编码工作.通俗的说,CSS预处理器用一种专门的编程语言,进行Web页面样式设计,然后再编译成正常的CSS文件,以供项目使用.CSS预处理器为CSS增加一些编程的特性,无需考虑浏…

CSS 自诞生以来,基本语法和核心机制一直没有本质上的变化,它的发展几乎全是表现力层面上的提升.最开始 CSS 在网页中的作用只是辅助性的装饰,轻便易学是最大的需求:然而如今网站的复杂度已经不可同日而语,原生 CSS 已经让开发者力不从心. 当一门语言的能力不足而用户的运行环境又不支持其它选择的时候,这门语言就会沦为 “编译目标” 语言.开发者将选择另一门更高级的语言来进行开发,然后编译到底层语言以便实际运行. 于是,在前端领域,天降大任于斯人也,CSS 预处理器应运而生.而 CSS 这门古老的…

CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 首先我们来简单介绍下什么是 CSS 预处理器,CSS 预处理器是一种语言用来为 CSS 增加一些编程的的特性,无需考虑浏览器的兼容性问题,例如你可以在 CSS 中使用变量.简单的程序逻辑.函数等等在编程语言中的一些基本技巧,可以让你的 CSS 更见简洁,适应性更强,代码更直观等诸多好处. 不要再停留在石器时…

001.什么是css预处理器? css预处理器定义了一种新的语言.用一种专门的编程语言,为css增加了一些编程的特性,将css作为目标生成文件,然后开发者就只要使用这种语言进行编码工作.(通俗点说“”css预处理器用一种专门的编程语言,进行web页面样式设计,然后在编译成正常的css文件,以供项目使用“”) 002.css预处理器的优点 css预处理器为css增加一些编程的特性,无需考虑浏览器的兼容性问题.如在css中使用 变量.简单的逻辑程序.函数.可以让你的css更加简洁.适应性更强.可读性…

学过CSS的人都知道,它不是一种编程语言.你可以用它开发网页样式,但是没法用它编程.也就是说,CSS基本上是设计师的工具,不是程序员的工具.在程序员眼里,CSS是一件很麻烦的东西.它没有变量,也没有条件语句...   学过CSS的人都知道,它不是一种编程语言. 你可以用它开发网页样式,但是没法用它编程.也就是说,CSS基本上是设计师的工具,不是程序员的工具.在程序员眼里,CSS是一件很麻烦的东西.它没有变量,也没有条件语句,只是一行行单纯的描述,写起来相当费事. 很自然地,有人就开始为CSS加入…

在程序员眼里,css不像其他程序语言(例如PHP, Javascript等等),有自己的变量.常量.条件语句以及一些编程语法,它只是一行行单纯的属性描述,写起来相当费事,而且代码难以组织和维护.自然的有人开始想,能不能给css像其他程序语言一样,加入一些编程元素,让css能像其他程序语言一样可以做一些预定的处理,就这样,有了"css预处理器(css preprocessor)”. 具体什么是css预处理器呢? css预处理器定义了一种新的语言,其基本思想是:用一种专门的编程语言,为css增加一些…

CSS预处理器有很多,最早的是2006年的Less,到后来2010年的SASS,还有现在也很出名的Stylus.不过要使用它们都要使用一些工具,比如Less的话要使用Grunt或者Gulp或者Node.js,SASS要用Ruby的环境来编译.我个人对工具依赖性太强的东西并无好感,我还是喜欢只要给我一个文本编辑器和几个我已经读透了的常用的类库和框架我就能写出很多我想要的东西这样的方式.多了解一些总没坏处,So,学习吧! Less 环境布置 <!DOCTYPE html> <html>…

因为我是前端刚入门,昨天看了一个大神写的的初级前端需要掌握的知识,然后我就开始一一搜索,下面是我对css预处理器和后处理器的搜索结果,一是和大家分享下这方面的知识,另一方面方便自己以后翻阅.所以感兴趣的可以看下. 转载自"赵雷的博客",原文地址:http://zhaolei.info/2014/01/04/css-preprocessor-and-postprocessor/ 说到 CSS 预处理器,大家都很熟悉了,本文的重点是介绍从中抽出的 CSS 后处理器,这也是近一年多以来,前端…