CSS不是一种编程语言。它开发网页样式,但是没法用它编程。也就是说,CSS基本上是设计师的工具,它没有变量,也没有条件语句,只是一行行单纯的描述。有人就开始为CSS加入编程元素,这被叫做"CSS预处理器"(css preprocessor)。它的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件。
一、Less
LESS 包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性,更不是用来取代 CSS 的,而是在现有 CSS 语法的基础上,为 CSS 加入程序式语言的特性。在语法方面,LESS与CSS较为接近,一个合法的CSS代码段本身也是一段合法的LESS代码段。LESS提供变量、嵌套、混合、操作符、函数等一般编程所需的抽象机制。
1.变量允许我们在一个地方定义一系列通用的值,然后在整个样式表中调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。

//LESS源码
@color:#4D926F;
#header{
color:@color;
}
h2{
color:@color;
} /*编译后的CSS*/
#header{
color:#4D926F;
}
h2{
color:#4D926F;
}

2.混合:指在一个 CLASS 中引入另外一个已经定义好的的 CLASS,就像在当前 CLASS 中增加一个属性一样。Less实现了这种嵌套。我们还可以使用参数,就好像我们再用一个函数一样。

//LESS源码
rounded-corners(@radius:5px){
border-radius:@radius;
-webkit-border-radius:@radius;
-moz-border-radius:@radius;
}
#header{
.rounded-corners;
}
#footer{
.rounded-corners(10px);
} /*生成的CSS*/
#header{
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
}
#footer{
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}

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

//LESS源码
#header{
h1{
font-size:26px;
font-weight:bold;
}
p{
font-size:12px;
a{
text-decoration:none;
&:hover{border-width:1px}
}
}
}
/*编译后的CSS*/
#header h1{
font-size:26px;
font-weight:bold;
}
#header p{
font-size:12px;
}
#header p a{
text-decoration:none;
}
#header p a:hover{
border-width:1px;
}

4.函数与运算:运算提供了对属性值和颜色的加、减、乘、除操作,赋予你创建属性之间复杂关系的能力。运算应当只出现在圆括号中,这样能确保与CSS的兼容。

//LESS
@the-border:1px;
@base-color:#;
@red:#;
#header{
color:(@base-color*);
border-left:@the-border;
border-right:(@the-border*);
}
#footer{
color:(@base-color+#);
border-color:desaturate(@red,%);
} /*编译后的CSS*/
#header{
color:#;
border-left:1px;
border-right:2px;
}
#footer{
color:#;
border-color:#7d2717;
}

二、Sass

1.变量:所有变量以$开头。
$blue : #1875e7; 
div {
color : $blue;
}

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

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

2. 计算功能

body {
    margin: (14px/);
    top: 50px + 100px;
    right: $var * %;
  }

3. 嵌套

 div h1 {
    color : red;
  } //可以写成:
div {
    hi {
      color:red;
    }
  }

属性也可以嵌套,比如border-color属性,可以写成:

p {
    border: {
      color: red;
    }
  }

注意,border后面必须加上冒号。在嵌套的代码块内,可以使用&引用父元素。比如a:hover伪类,可以写成:

a {
    &:hover { color: #ffb3ff; }
  }

4. 注释

标准的CSS注释 /* comment */ ,会保留到编译后的文件。

单行注释 // comment,只保留在SASS源文件中,编译后被省略。

在/*后面加一个感叹号,表示这是"重要注释"。即使是压缩模式编译,也会保留这行注释,通常可以用于声明版权信息。

/*!
    重要注释!
  */

5. 继承

//SASS允许一个选择器,继承另一个选择器。比如,现有class1:
.class1 {
    border: 1px solid #ddd;
  } //class2要继承class1,就要使用@extend命令:
.class2 {
    @extend .class1;
    font-size:%;
  }

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); }

4.3 颜色函数

SASS提供了一些内置的颜色函数,以便生成系列颜色。

  lighten(#cc3, 10%) // #d6d65c
  darken(#cc3, 10%) // #a3a329
  grayscale(#cc3) // #808080
  complement(#cc3) // #33c

4.4 插入文件

@import命令,用来插入外部文件。

  @import "path/filename.scss";

如果插入的是.css文件,则等同于css的import命令。

  @import "foo.css";

五、高级用法

5.1 条件语句

@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;
  }

5.2 循环语句

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");
    }
  }

5.3 自定义函数

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

@function double($n) {
    @return $n * ;
  }
#sidebar {
    width: double(5px);
  }

三、两者区别

相同点:两者都是CSS预处理器,都具有相同的功能,可以帮助我们快速编译代码,帮助我们更好的维护我们的样式代码或者说维护项目吧。
不同点:语法规则不同,当然功能或许略有差别;
LESS和Sass的主要不同就是他们的实现方式,LESS是基于JavaScript,所以,是在客户端处理的。另一方面,Sass是基于Ruby的,然后是在服务器端处理的。很多开发者不会选择LESS因为JavaScript引擎需要额外的时间来处理代码然后输出修改过的CSS到浏览器。关于这个有很多种方式,我选择的是只在开发环节使用LESS。一旦我完成了开发,我就复制然后粘贴LESS输出的到一个压缩器,然后到一个单独的CSS文件来替代LESS文件。另一个选择是使用LESS.app来编译和压缩你的LESS文件。两个选择都将最小化你的样式输出,从而避免由于用户的浏览器不支持JavaScript而可能引起的任何问题。尽管这不大可能,但终归是有可能的。

Less & Sass的更多相关文章

  1. wepack+sass+vue 入门教程(三)

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  2. wepack+sass+vue 入门教程(二)

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  3. wepack+sass+vue 入门教程(一)

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

  4. 前端CSS预处理器Sass

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

  5. SASS教程sass超详细教程

    SASS安装及使用(sass教程.详细教程) 采用SASS开发CSS,可以提高开发效率. SASS建立在Ruby的基础之上,所以得先安装Ruby. Ruby的安装: 安装 rubyinstaller- ...

  6. Sass之坑Compass编译报错

    前段时间在使用Compass时遇到了其为难处理的一个坑,现记录到博客希望能帮助到各位. 一.问题: 利用Koala或者是gulp编译提示如下,截图为koala编译提示错误: 二.解决办法 从问题截图上 ...

  7. emmet,jade,haml, slim,less,sass,coffeescript等的实战优缺点

    摘要: 文章背景,来自于群内周五晚上的一次头脑风暴式的思维碰撞交流活动. 随着前端技术的蓬勃发展, 各种新技术随着生产力的需要不断的涌入我们的视野, 那今天探讨的话题是这些新时代的前端兵器谱: 一. ...

  8. Sass用法指南

    写在前面的话:随着CSS文件越来越大,内容越来越复杂,对其进行很好的维护将变的很困难.这时CSS预处理器就能够帮上大忙了,它们往往拥有变量.嵌套.继承等许多CSS不具备的特性.有很多CSS预处理器,这 ...

  9. PostCSS深入学习: PostCSS和Sass、Stylus或LESS一起使用

    如果你喜欢使用PostCSS,但又不想抛弃你最喜欢的预处理器.不用担心,你不需要作出二选一的选择,你可以把PostCSS和预处理器(Sass.Stylus或LESS)结合起来使用. 有几个PostCS ...

  10. Sass:初识Sass与Koala工具的使用

    一.下载Koala(找到合适的系统版本)并安装 二.先新建一个css文件夹,并在里面新建一个文本文档(.txt),将其命名为demo.scss 三.打开Koala,将css文件夹拽进来,可以修改一下输 ...

随机推荐

  1. linux svn apache

    借助apache运行的svn服务器 一:安装Apache HTTP Server 1.安装Apache HTTP Server yum install httpd httpd-devel -y 2.修 ...

  2. BZOJ 1305 跳舞(二分+网络流)

    无法直接构造最大流来解决这个问题,因为题目要求每首舞曲都需要n对男女进行跳舞. 答案又满足单调性,这启发我们二分答案,判断是否满流验证答案. 假设舞曲数目为x时满足条件,那么每个男生和女生都需要跳x次 ...

  3. CodeForces 632E Thief in a Shop

    题意:给你n种物品,每种无限个,问恰好取k个物品能组成哪些重量.n<=1000,k<=1000,每种物品的重量<=1000. 我们搞出选取一种物品时的生成函数,那么只要对这个生成函数 ...

  4. linux系统环境代理设置

    系统上网代理设置: 1.编辑文件/etc/profile,增加如下两行 export http_proxy=http://ip:port export https_proxy=http://ip:po ...

  5. NOIP2002 提高组

    [NOIP2002] 提高组 T1.均分纸牌 算法:贪心(模拟) [分析]: 1.简化 2.过滤 3.辩证法  详见课件的例7 还有一种类似的思路是:求出平均值后,i←1 to n-1扫描,若a[i] ...

  6. [BZOJ5339] [TJOI2018]教科书般的亵渎

    题目链接 BZOJ题面. 洛谷题面. Solution 随便推一推,可以发现瓶颈在求\(\sum_{i=1}^n i^k\),关于这个可以看看拉格朗日插值法. 复杂度\(O(Tm^2)\). #inc ...

  7. ZOJ3496:Assignment——题解

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3496 题目大意:A公司从S到T运货,每条路都有一个运货上限,而B公司则有p ...

  8. CF1073E Segment Sum 自闭了

    CF1073E Segment Sum 题意翻译 给定\(K,L,R\),求\(L\)~\(R\)之间最多不包含超过\(K\)个数码的数的和. \(K<=10,L,R<=1e18\) 我 ...

  9. bzoj2588: Spoj 10628. Count on a tree(树上第k大)(主席树)

    每个节点继承父节点的树,则答案为query(root[x]+root[y]-root[lca(x,y)]-root[fa[lca(x,y)]]) #include<iostream> #i ...

  10. 【初级算法】6. 两个数组的交集 II

    题目如下: 给定两个数组,写一个方法来计算它们的交集. 例如: 给定 nums1 = [, , , ], nums2 = [, ], 返回 [, ]. 注意: 输出结果中每个元素出现的次数,应与元素在 ...