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

  1. //LESS源码
  2. @color:#4D926F;
  3. #header{
  4. color:@color;
  5. }
  6. h2{
  7. color:@color;
  8. }
  9.  
  10. /*编译后的CSS*/
  11. #header{
  12. color:#4D926F;
  13. }
  14. h2{
  15. color:#4D926F;
  16. }

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

  1. //LESS源码
  2. rounded-corners(@radius:5px){
  3. border-radius:@radius;
  4. -webkit-border-radius:@radius;
  5. -moz-border-radius:@radius;
  6. }
  7. #header{
  8. .rounded-corners;
  9. }
  10. #footer{
  11. .rounded-corners(10px);
  12. }
  13.  
  14. /*生成的CSS*/
  15. #header{
  16. border-radius:5px;
  17. -webkit-border-radius:5px;
  18. -moz-border-radius:5px;
  19. }
  20. #footer{
  21. border-radius:10px;
  22. -webkit-border-radius:10px;
  23. -moz-border-radius:10px;
  24. }

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

  1. //LESS源码
  2. #header{
  3. h1{
  4. font-size:26px;
  5. font-weight:bold;
  6. }
  7. p{
  8. font-size:12px;
  9. a{
  10. text-decoration:none;
  11. &:hover{border-width:1px}
  12. }
  13. }
  14. }
  15. /*编译后的CSS*/
  16. #header h1{
  17. font-size:26px;
  18. font-weight:bold;
  19. }
  20. #header p{
  21. font-size:12px;
  22. }
  23. #header p a{
  24. text-decoration:none;
  25. }
  26. #header p a:hover{
  27. border-width:1px;
  28. }

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

  1. //LESS
  2. @the-border:1px;
  3. @base-color:#;
  4. @red:#;
  5. #header{
  6. color:(@base-color*);
  7. border-left:@the-border;
  8. border-right:(@the-border*);
  9. }
  10. #footer{
  11. color:(@base-color+#);
  12. border-color:desaturate(@red,%);
  13. }
  14.  
  15. /*编译后的CSS*/
  16. #header{
  17. color:#;
  18. border-left:1px;
  19. border-right:2px;
  20. }
  21. #footer{
  22. color:#;
  23. border-color:#7d2717;
  24. }

二、Sass

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

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

  1. $side : left;
  2. .rounded {
  3.   border-#{$side}-radius: 5px;
  4. }

2. 计算功能

  1. body {
  2.     margin: (14px/);
  3.     top: 50px + 100px;
  4.     right: $var * %;
  5.   }

3. 嵌套

  1.  div h1 {
  2.     color : red;
  3.   }
  4.  
  5. //可以写成:
  6. div {
  7.     hi {
  8.       color:red;
  9.     }
  10.   }

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

  1. p {
  2.     border: {
  3.       color: red;
  4.     }
  5.   }

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

  1. a {
  2.     &:hover { color: #ffb3ff; }
  3.   }

4. 注释

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

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

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

  1. /*!
  2.     重要注释!
  3.   */

5. 继承

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

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允许用户编写自己的函数。

  1. @function double($n) {
  2.     @return $n * ;
  3.   }
  4. #sidebar {
  5.     width: double(5px);
  6.   }

三、两者区别

相同点:两者都是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. 3dContactPointAnnotationTool开发日志(十八)

      今天实现了tab效果,按tab键可以在status面板的各个输入框内来回切换,参考Unity3D - UGUI实现Tab键切换输入框.按钮(按Tab键切换高亮显示的UI)

  2. ipython matplotlib

    matplotlib实际上是一套面向对象的绘图库,它所绘制的图表中的每个绘图元素,例如线条Line2D.文字Text.刻度等在内存中都有一个对象与之对应.为了方便快速绘图matplotlib通过pyp ...

  3. BER-TLV数据结构

    本文是自身在研究学习过程中碰到的问题,整理而成. 为了便于后文的引用说明,先列出一段TLV结构的数据: [6F] 4D │ ├─[] A0000003330101 │ ├─[A5] │ │ ├─[] ...

  4. Spring MVC 之@Controller@RequestMapping详解

    一:配置web.xml 1)问题:spring项目中有多个配置文件mvc.xml   dao.xml 2)解决:在web.xml中 <init-param> <param-name& ...

  5. ASP.NET MVC4中使用bootstrip模态框时弹不出的问题

    最近发现使用在MVC中使用bootstrip的模态框时弹不出来,但单独建立一HTML文件时可以弹出,说明代码没有问题,经过多次测试发现,在MVC的cshtml文件中添加上以下语句就能正常 @{ Lay ...

  6. 《转》'autocomplete="off"'在Chrome中不起作用解决方案

    最近项目中遇到一个令人头疼的问题,查阅各种资料,尝试各种方法,最终得以解决:哎···下面就说说这心酸的历程吧. 大家都知道autocomplete属性是表单字段中的HTML5新属性,该属性有两种状态值 ...

  7. 【题解】Atcoder ARC#83 E-Bichrome Tree

    哈哈~自己做出来的E题!(虽然这题被机房大佬强D极水).最开始神经错乱,写了个完全不对的贪心,竟然只错了4个点(。•ˇ‸ˇ•。) 可以发现,一个节点的子树内部和他颜色相同的节点权值和 是固定的,那么不 ...

  8. [NOIP2012]疫情控制 贪心 二分

    题面:[NOIP2012]疫情控制 题解: 大体思路很好想,但是有个细节很难想QAQ 首先要求最大时间最小,这种一般都是二分,于是我们二分一个时间,得到一个log. 然后发现一个军队,越往上走肯定可以 ...

  9. POJ3525:Most Distant Point from the Sea——题解

    http://poj.org/problem?id=3525 题目大意:给一个逆时针序列的多边形点集,求其中可以画的最大半径的圆的半径. —————————————————————— 二分枚举半径长度 ...

  10. Codevs1169:传纸条——题解

    题目描述 Description 小渊和小轩是好朋友也是同班同学,他们在一起总有谈不完的话题.一次素质拓展活动中,班上同学安排做成一个m行n列的矩阵,而小渊和小轩被安排在矩阵对角线的两端,因此,他们就 ...