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

Less

环境布置

<!DOCTYPE html>

<html>

    <head>

        <link rel="stylesheet/less" type="text/css" href="css/test.less" />

        <script src="js/less.js" type="text/javascript"></script>

    </head>

    <body>

    </body>

</html>

务必确保在 less.js 之前加载你的样式表。
如果加载多个 .less 样式表文件，每个文件都会被单独编译。因此，一个文件中所定义的任何变量、mixin 或命名空间都无法在其它文件中访问 。
注：请在服务器环境下使用！本地直接打开可能会报错！

变量

变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。

@color: #4D926F;

.test{

    background:@color;

}

还可以把变量名当作变量

@fnord: "I am fnord.";

@var: 'fnord';

content: @@var;

解析后的结果就是，content:"I am fnord.";

混合

混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。

.rounded-corners (@radius: 5px) {

  border-radius: @radius;

  -webkit-border-radius: @radius;

  -moz-border-radius: @radius;

}

.test1 {

  .rounded-corners;

}

.test2 {

  .rounded-corners(10px);

}

比如说我们经常要写到的border属性，很多时候用到的border都是一样，这个时候我们可以把border专门写成一个class，然后混合到其他class当中

.bordered {

  border-top: dotted 1px black;

  border-bottom: solid 2px black;

}

#menu a {

  color: #111;

  .bordered;

}

.post a {

  color: red;

  .bordered;

}

这样最后的结果就等同于

#menu a {

  color: #111;

  border-top: dotted 1px black;

  border-bottom: solid 2px black;

}

.post a {

  color: red;

  border-top: dotted 1px black;

  border-bottom: solid 2px black;

}

@arguments 变量

@arguments包含了所有传递进来的参数.

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {

  box-shadow: @arguments;

  -moz-box-shadow: @arguments;

  -webkit-box-shadow: @arguments;

}

.box-shadow(2px, 5px);

这样的结果就是

box-shadow: 2px 5px 1px #000;

  -moz-box-shadow: 2px 5px 1px #000;

  -webkit-box-shadow: 2px 5px 1px #000;

模式匹配

.class {

  .mixin(@switch, #888);

}

.mixin (dark, @color) {

  color: darken(@color, 10%);

}

.mixin (light, @color) {

  color: lighten(@color, 10%);

}

.mixin (@_, @color) {

  display: block;

}

如果运行下面这段代码

@switch: light;

.class {

  .mixin(@switch, #888);

}

将会得到

.class {

  color: #a2a2a2;

  display: block;

}

第一个混合定义并未被匹配，因为它只接受dark做为首参
第二个混合定义被成功匹配，因为它只接受light
第三个混合定义被成功匹配，因为它接受任意值

也可以匹配多个参数

.mixin (@a) {

  color: @a;

}

.mixin (@a, @b) {

  color: fade(@a, @b);

}

参数不同，函数的导向不同。

引导（导引表达式）

当我们想根据表达式进行匹配，而非根据值和参数匹配时，导引就显得非常有用。
为了尽可能地保留CSS的可声明性，LESS通过导引混合而非if/else语句来实现条件判断，因为前者已在@media query特性中被定义。

定义

.mixin (@a) when (lightness(@a) >= 50%) {

  background-color: black;

}

.mixin (@a) when (lightness(@a) < 50%) {

  background-color: white;

}

.mixin (@a) {

  color: @a;

}

when关键字用以定义一个导引序列。

调用

.class1 { .mixin(#ddd) }

.class2 { .mixin(#555) }

结果

.class1 {

  background-color: black;

  color: #ddd;

}

.class2 {

  background-color: white;

  color: #555;

}

除去关键字true以外的值都被视示布尔假：

.class {

  .truth(40); // Will not match any of the above definitions.

}

导引序列使用逗号‘,’—分割，当且仅当所有条件都符合时，才会被视为匹配成功。（其实就是---&&）

.mixin (@a) when (@a > 10), (@a < -10) { ... }

可以使用and关键字实现与条件：

.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }

使用not关键字实现非条件

.mixin (@b) when not (@b > 0) { ... }

如果想基于值的类型进行匹配，我们就可以使用is*函式：

.mixin (@a, @b: 0) when (isnumber(@b)) { ... }

.mixin (@a, @b: black) when (iscolor(@b)) { ... }

嵌套规则

我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。

.test_div{

    span{

        font-size: 18px;

    }

    p{

        font-size: 12px;

        a{

            text-decoration:none;

            &:hover{

                text-decoration:underline;

            }

        }

    }

}

函数 & 运算

运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。LESS中的函数一一映射了JavaScript代码，如果你愿意的话可以操作属性值。

@the-border: 1px;

@base-color: #111;

@red:        #842210;

#header {

  color: @base-color * 3;

  border-left: @the-border;

  border-right: @the-border * 2;

}

#footer {

  color: @base-color + #003300;

  border-color: desaturate(@red, 10%);

}

API

lighten(@color, 10%);     // return a color which is 10% *lighter* than @color

darken(@color, 10%);      // return a color which is 10% *darker* than @color

saturate(@color, 10%);    // return a color 10% *more* saturated than @color

desaturate(@color, 10%);  // return a color 10% *less* saturated than @color

fadein(@color, 10%);      // return a color 10% *less* transparent than @color

fadeout(@color, 10%);     // return a color 10% *more* transparent than @color

fade(@color, 50%);        // return @color with 50% transparency

spin(@color, 10);         // return a color with a 10 degree larger in hue than @color

spin(@color, -10);        // return a color with a 10 degree smaller hue than @color

mix(@color1, @color2);    // return a mix of @color1 and @color2

round(1.67); // returns `2`

ceil(2.4);   // returns `3`

floor(2.6);  // returns `2`

percentage(0.5); // returns `50%`

补充

字符串插入

@base-url: "http://assets.fnord.com";

background-image: url("@{base-url}/images/bg.png");

来源：http://www.bootcss.com/p/lesscss/#guide

SASS

1.变量

SASS允许使用变量，所有变量以$开头。

$blue : #1875e7;　

div {

　　color : $blue;

}

如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中

$side : left;

.rounded {

　　border-#{$side}-radius: 5px;

}

2.计算

SASS允许在代码中使用算式：

body {

　　　　margin: (14px/2);

　　　　top: 50px + 100px;

　　　　right: $var * 10%;

　　}

3.嵌套

选择器可以嵌套

div {

　　　　hi {

　　　　　　color:red;

　　　　}

　　}

属性也可以嵌套

p {

　　　　border: {

　　　　　　color: red;

　　　　}

　　}

在嵌套的代码块内，可以使用&引用父元素。比如a:hover伪类，可以写成：

a {

　　　　&:hover { color: #ffb3ff; }

　　}

4.继承

SASS允许一个选择器，继承另一个选择器。

.class1 {

　　　　border: 1px solid #ddd;

　　}

class2要继承class1，就要使用@extend命令：

.class2 {

　　　　@extend .class1;

　　　　font-size:120%;

　　}

5.混合

Mixin有点像C语言的宏（macro），是可以重用的代码块。

使用@mixin命令，定义一个代码块。

@mixin left {

　　　　float: left;

　　　　margin-left: 10px;

　　}

使用@include命令，调用这个mixin。

div {

　　　　@include left;

　　}

mixin的强大之处，在于可以指定参数和缺省值。

@mixin left($value: 10px) {

　　　　float: left;

　　　　margin-right: $value;

　　}

使用的时候，根据需要加入参数：

div {

　　　　@include left(20px);

　　}

下面是一个mixin的实例，用来生成浏览器前缀。

@mixin rounded($vert, $horz, $radius: 10px) {

　　　　border-#{$vert}-#{$horz}-radius: $radius;

　　　　-moz-border-radius-#{$vert}#{$horz}: $radius;

　　　　-webkit-border-#{$vert}-#{$horz}-radius: $radius;

　　}

使用的时候，可以像下面这样调用：

#navbar li { @include rounded(top, left); }

#footer { @include rounded(top, left, 5px); }

6.条件语句

@if可以用来判断：

p {

　　　　@if 1 + 1 == 2 { border: 1px solid; }

　　　　@if 5 < 3 { border: 2px dotted; }

　　}

配套的还有@else命令：

@if lightness($color) > 30% {

　　　　background-color: #000;

　　} @else {

　　　　background-color: #fff;

　　}

7.循环

SASS支持for循环：

@for $i from 1 to 10 {

　　　　.border-#{$i} {

　　　　　　border: #{$i}px solid blue;

　　　　}

　　}

还有while循环：

$i: 6;

　　@while $i > 0 {

　　　　.item-#{$i} { width: 2em * $i; }

　　　　$i: $i - 2;

　　}

each命令，作用与for类似：

@each $member in a, b, c, d {

　　　　.#{$member} {

　　　　　　background-image: url("/image/#{$member}.jpg");

　　　　}

　　}

8.自定义函数

SASS允许用户编写自己的函数。

@function double($n) {

　　@return $n * 2;

}

#sidebar {

　　width: double(5px);

}

来源：http://www.ruanyifeng.com/blog/2012/06/sass.html

CSS预处理器们的更多相关文章

  1. 前端CSS预处理器Sass

    前面的话   "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...

  2. css预处理器sass使用教程(多图预警)

    css预处理器赋予了css动态语言的特性,如变量.函数.运算.继承.嵌套等,有助于更好地组织管理样式文件,以及更高效地开发项目.css预处理器可以更方便的维护和管理css代码,让整个网页变得更加灵活可 ...

  3. 关于前端CSS预处理器Sass的小知识！

    前面的话   "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...

  4. CSS预处理器Sass、LESS 和 Stylus

    CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 首先我们 ...

  5. Myth – 支持变量和数学函数的 CSS 预处理器

    Myth 是一个预处理器,有点类似于 CSS polyfill .Myth 让你写纯粹的 CSS,同时还让你可以使用类似 LESS 和 Sass 的工具.您仍然可以使用变量和数学函数,就像你在其它预处 ...

  6. CSS 预处理器（框架）初探：Sass、LESS 和 Stylus

    现在最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 拿less来说,可以在页面上直接使用less文件,但要引用less.js进行解析:同时也可以直接将less ...

  7. 为您详细比较三个 CSS 预处理器（框架）：Sass、LESS 和 Stylus

    CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 首先我们 ...

  8. 160907、CSS 预处理器-Less

    CSS 预处理器是什么?一般来说,它们基于 CSS 扩展了一套属于自己的 DSL,来解决我们书写 CSS 时难以解决的问题: 语法不够强大,比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器: ...

  9. CSS预处理器实践之Sass、Less大比拼[转]

    什么是CSS预处理器? CSS可以让你做很多事情,但它毕竟是给浏览器认的东西,对开发者来说,Css缺乏很多特性,例如变量.常量以及一些编程语法,代码难易组织和维护.这时Css预处理器就应运而生了.Cs ...

  10. CSS预处理器Sass(Scss)、Less、Stylus

    CSS 预处理编译器能让我成程序化其的方式编写CSS代码,可以引入CSS中没有的变量.条件.函数等特性,从而让代码更简单易维护,但一般按预处理器语法编写的代码无法直接在浏览器中运行,需用通过工具比如g ...

随机推荐

  1. C#高级编程 (第六版) 学习 第五章：数组

    第五章 数组 1,简单数组 声明:int[] myArray; 初始化:myArray = new int[4]; 为数组分配内存. 还可以用如下的方法: int[] myArray = new in ...

  2. TCP系列41—拥塞控制—4、Linux中的慢启动和拥塞避免（一）

    一.Linux中的慢启动和拥塞避免 Linux中采用了Google论文的建议把IW初始化成了10了.在linux中一般有三种场景会触发慢启动过程 1.连接初始建立发送数据的时候,此时cwnd初始化为1 ...

  3. JS高级 2

    递归:函数自己调用自己 在JavaScript中唯一能产生作用域的东西是 函数!js中只有函数可以创建作用域 词法作用域,也叫做静态作用域 //就是在代码写好的那一刻,变量和函数的作用域就已经确定了, ...

  4. python/django将mysql查询结果转换为字典组

    使用python查询mysql数据库的时候,默认查询结果没有返回表字段名称,不方便使用.为了方便使用一般会选择将查询结果加上字段名称以字典组的方式返回查询结果. 实现如下: def dict_fetc ...

  5. ubuntu 手动apache记录

    1.下载apache tar -xvzf  httpd.xx 解压 2.下载安装pcre Download PCRE from PCRE.org 解压,进入文件夹中 ./configure --pre ...

  6. java 两个数组合并

    需求:两个字符串合并(如果想去重复,参考下一篇--数组去重复及记录重复个数) //方法一 Arrays类 String[] a = {"A","B"," ...

  7. jstack笔记

    遇到java程序跑不动怎么办,jstack是比较容易想到的一个工具,利用jstack来dump出一个线程堆栈快照,然后具体分析. 一般的堆栈大概是由下面的部分组成的: "resin-2212 ...

  8. ARP(Adress Resolution Protocol): 地址解析协议

    地址解析协议(Address Resolution Protoclol),其基本功能为通过目标设备的IP地址,查询目标设备的MAC地址,以保证通信的顺利.它是IPV4中网络层必不可少的协议.不过在IP ...

  9. 【Python】Python对象类型及其运算

    Python对象类型及其运算 基本要点: 程序中储存的所有数据都是对象(可变对象:值可以修改 不可变对象:值不可修改) 每个对象都有一个身份.一个类型.一个值 例: >>> a1 = ...

  10. 转---秒杀多线程第八篇 经典线程同步 信号量Semaphore

    阅读本篇之前推荐阅读以下姊妹篇: <秒杀多线程第四篇一个经典的多线程同步问题> <秒杀多线程第五篇经典线程同步关键段CS> <秒杀多线程第六篇经典线程同步事件Event& ...