Sass和Less的总结

Sass的安装 及编译

1
2
3
4
5
6
7
8
9
10
11
12
13
# 安装
brew install ruby
brew install sass
# 编译(sass提供4种编译风格)
# nested: 嵌套缩进,默认值
# expanded: 没有缩进的扩展的 css 代码
# compact: 简洁格式的 css 代码
# compressed: 压缩后的 css 代码
sass --style compressed test.sass  test.css
# 监控某个文件,一旦变动,自动生成编译后的版本
sass --watch input.scss:output.css
# 监控某个文件夹
sass --watch app/sass:publc/stylesheets

Sass 的使用

  1. 使用变量

    sass 使用$符号来标识变量,因为它不会导致现存和未来的 css 语法冲突,且深受程序员喜爱.

    1. 变量声明

      和 css 属性声明类似:$custom-color:#f90;,声明后的变量只有引用这个变量的时候才会生效.与 css 属性不同,变量可以在 css 规则块定义之外存在.当变量定义在 css 规则块内,那么该变量只有在这个规则块内使用才会生效.声明变量时,变量值还可以引用其他的变量.

    2. 变量引用

      凡是 css 属性的标准值可存在的地方就可以使用变量.background-color: $custom-color;

    3. 变量镶嵌在字符串中必须写在#{}中

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

    4. 变量名用中划线还是下划线分割

      这两种用法相互兼容,但是推荐使用中划线,这也是 compass 使用的方式.

  2. 计算功能

    sass 允许在代码中使用算式

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

  3. 嵌套 css 规则

    sass 可以再规则块中嵌套规则块,使样式可读性更高.且 sass 在输出时会帮你把这些规则处理好,避免你的重复书写.

    1
    2
    3
    4
    5
    6
    7
    .container{
        .header{
            p{
                font-size: $font-size;
            }
        }
    }

    大多数这种简单的嵌套都没有问题,但如果你现在嵌套的选择器中使用类似于:hover的伪类,为了解决这种情况, sass 提供了一个特殊结构&

    1. 父选择器的标识符&

      如果不使用&,下面的 sass 则无法工作

      1
      2
      3
      4
      5
      6
      7
      article a{
          color: blue;
          :hover{
              color: red;
          }
      }
      //他会被编译为 article a :hover{...}

      article 元素内所有的子元素在 hover 都会变成红色.这是不正确的.你想把这条规则应用到超链接自身,而后代选择器的方式无法帮你实现.

      sass 提供&表示父选择器,它不会像后代选择器那样进行拼接,而是直接替换

      1
      2
      3
      4
      5
      6
      7
      article a{
          color: blue;
          &:hover{
              color: red;
          }
      }
      //他会被编译为 article a:hover{...}

    2. 群组选择器的嵌套

      1
      2
      3
      4
      nav, aside{
          a {color: blue}
      }
      //编译为: nav a , aside a {color: blue}

    3. 子组合器和同层组合选择器 >,+,~

      1
      2
      3
      4
      5
      6
      7
      8
      9
      article{
          ~ article{border-top: 1px solid #ccc}
          > section {color: red}
          nav + & {margin: 0}
      }
      //编译为
      article ~ article{...}
      article > section{...}
      nav + article {...}

    4. 嵌套属性

      在 sass 中,除了 css 选择器可以嵌套,属性也可以嵌套,比如 border 的诸多属性反复写比较痛苦,我们可以这样写:

      1
      2
      3
      4
      5
      6
      7
      nav{
          border{
              style: solid;
              width: 1px;
              color: #ccc;
          }
      }

  4. 导入 sass 文件

    css 中有一个@ import规则,允许在一个 css 文件中导入其他 css 文件,然而只有执行到@ import 时,浏览器才回去下载其他 css 文件,导致文件加载特别慢.

    sass也有一个@ import 的规则,不同的是, sass 的@ import 在生成 css 文件时就把相关文件导入进来,在导入时你可以省略. sass 或. scss 的后缀

    1. 使用 sass 的部分文件

      当通过@ import把 sass 的样式分散到多个文件时,你通常只想生成少数几个 css 文件,有些 sass 文件并不需要生成对应的独立 css 文件,这些 sass 文件称为局部文件.sass 约定局部文件名以下划线开头,这样 sass 就不会再编译时单独编译这个文件输出 css, 而只把这个文件用作导入.

    2. 默认变量值

      如果反复声明一个变量,后者会覆盖前者,加入你引入一个他人的 sass 库文件,你可能希望导入者可以定制修改这个文件中的某些值.使用sass 的!default标签可以实现这个目标,它很像 css 的!important的对立面,不同的是!default表示如果这个变量被声明赋值了,则用它的声明,否则就用这个默认值

    3. 嵌套导入

      sass 允许@import可以写在 css 规则中.

      1
      2
      3
      aside{
          @import 'test'
      }

    4. 原生的 css 导入

      由于 sass 兼容原生的 css, 所以支持原生的@ import, 因为 sass 语法完全兼容 css, 所以你可以把原始的 css 文件改名为. scss后缀即可直接导入了.

    5. 静默注释

      sass 提供了一种不同于 css 标准注释格式的/*...*/的注释语法,即静默注释,其内容不会出现在生成的 css 文件中,他的语法和 js ,java 等类 C 的语言中单行注释相同即以//开头,注释内容到行末

      1
      2
      3
      body{
          color: #333;//不会出现在生成的 css 中
      }

  5. 高级用法

    1. 条件语句@if ... @else ...

      1
      2
      3
      4
      5
      @if $color == 'red'{
          background-color: red;
      }@else{
          background-color: yellow;
      }

    2. 循环语句

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      /*for 循环*/
      @for $i from 1 to 10{
          .border-#{$i}{
              border: #{$i}px solid blue; 
          }
      }
      /*while 循环*/
      $i: 10;
      @while $i > 0 {
          .item-#{$i}{
              width: 2px * $i;
          }
          $i: $i -2;
      }
      /**each 命令,作用和 for 类似*/
      @each $member in a,b,c,d {
          .#{$member}{
              background-image: url("/image/#{$member}.jpg");
          }
      }

    3. 自定义函数

      sass 允许用户编写自己的函数.

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

  6. 混合器

    1. 当你的样式越来越复杂时,大量使用变量并不是一个很好的方式,你可以通过混合器来实现大段样式的重用.混合器使用@ mixin标识符定义.这看上去很像 css 的标识符,比如@media或@font-face.混合器标识符可以把混合器中所有的样式提取出来放在@include中被调用的部分.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      @mixin custorm{
          border: 1px solid #ccc;
          font-size: 16px;
      }
      notice{
          color: #eee;
          @include custorm
      }
      //编译为
      notice{
          color: #eee;
          border: 1px solid #ccc;
          font-size: 16px;
      }

      如果你发现在很多地方都在使用同一样式,则应该把它改造为混合器.

    2. 给混合器传参

      混合器并不一定总是生成相同的样式,可以给混合器传参来定制精确的样式,这种方式和 JS 中的function很像.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      @mixin link-color($normal,$hover){
          color: $normal;
          &:hover {color: $hover}
      }
      a{
          @include link-color(blue,red)
      }
      //混合器支持默认参数值
      @mixin color(
      	$normal,
      	$hover: $normal
      ){
          color: $normal;
          &:hover {color: $hover}
      }

  7. 继承

    1. 使用选择器继承来精简 css

      使用 sass 时,最后一个减少重复的主要特征就是选择器继承.就是说一个选择器可以继承另一个选择器的所有样式,这个通过@extend语法实现.

      1
      2
      3
      4
      5
      6
      7
      8
      .error{
          border: 1px solid #ccc;
          color: red;
      }
      .seriousError{
          font-size: 14px;
          @extend .error
      }

      @extend不仅会继承它自身的所有属性,任何跟它有关的组合选择器样式也会以组合选择器的形式继承.比如:

      1
      2
      3
      4
      .error a{
          font-weight: 100;
      }
      //同样应用到 .seriousError a{...}

    2. 何时使用继承

      继承是基于类的,所以继承应该建立于语义化的关系上,当一个元素拥有类,表明它属于另一个类,这时使用继承再适合不过了.使用继承时的最好方法就是不要在后代选择器的时候去继承 css 规则,因为这样被继承的 css规则通过后代选择器修饰的样式,生成 css 中选择器的数量很快就会失控.

    3. 继承与混合器的比较

      继承比混合器生成的 css 代码更少,因为继承仅仅是重复选择器,而不会像混合器那样重复书写,所以继承会提升站点的速度.继承遵从 css 的层叠规则,同一属性根数层叠的权重高低而选择权重高的胜出,而混合器本身不会引起 css 层叠的问题,因为混合器把样式直接放到 css 规则块中.

Less 的安装及编译

1
2
3
4
# 通过 node 环境全局安装 less
npm install -g less
# 编译 less 文件
lessc styles.less styles.css

Less 的使用

​ 和 Sass一样,Less 作为一种 css 扩展,它同样兼容 css, 且学习成本比 Sass 要小一些,这使得学习 Less 更轻松.

  1. 变量

    1
    2
    3
    4
    5
    @nice-blue : #5B83AD;
    color: @nice-blue;
    /*变量插值*/
    @dicretion: left;
    margin-@{dicretion}: 20px;

    注意: 变量只能定义一次,实际上它们就是常量.

  2. mixin( 混合)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    .nice-color{
        color: #5B83AD;
    }
    /*只需要在规则中访问我们定义的类名即可*/
    p{
        .nice-color
    }
    /*带默认参数的混合*/
    .nice-color(@beauty:#5B83AD){
        color: @beauty;
    }
    p{
        .nice-color();
    }

  3. 嵌套规则

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    p{
        color: #5B83AD;
        /*配合媒体查询*/
        @media (min-width:768px) {
        	color: red;
        }
        /*&为当前选择器的父选择器*/
        &:after{
            content: '';
            clear:both;
        }
    }

  4. 运算

    1
    2
    3
    /**Less 能够推断颜色和单位之间的区别*/
    color: #888 / 4;
    width: 1px + 5;

  5. 继承

    1
    2
    3
    4
    .inline{
        color: red;
    }
    p:extend(.inline)

    ​

  6. 函数

    1
    2
    3
    4
    5
    6
    7
    .a(@color,@size){
        color: @color;
        font-size: @size;
    }
    p{
        .a(#ccc,16px)
    }

  7. 作用域

    1
    2
    3
    4
    5
    6
    7
    8
    9
    /**Less 中的作用域与编程语言中的作用域概念非常相似。首先会在局部查找变量和混合，如果没找到，编译器就会在父作用域中查找，依次类推。*/
    @var: red;

    #page {
      @var: white;
      #header {
        color: @var; // white
      }
    }

  8. 注释

    1
    2
    3
    4
    5
    /* 可以使用块注释 */
    @var: red;

    //也可以使用行注释
    @var: white;

  9. 导入

    1
    2
    3
    /**导入工作与你预期的一样。你可以导入一个 .less 文件，然后这个文件中的所有变量都可以使用了。对于 .less 文件而言，其扩展名是可选的。*/
    @import "library"; // library.less
    @import "typo.css";// css import

Sass 和 Less 的区别

  1. 扩展名

    Sass 以.sass和.scss后缀结尾,而 Less 以less后缀结尾.

  2. 变量声明

    Sass变量必须是以$开头的，然后变量和值之间使用冒号（：）隔开.而 Less变量以@开头.

  3. 变量嵌入字符串

    Sass 使用${xx}使变量嵌入字符串,而 Less 使用@{xx}

  4. 继承

    Sass 以@extend继承,而 Less 以:extend继承.

  5. 混入

    Sass 的混入

    1
    2
    3
    4
    5
    6
    @mixin error($borderWidth: 2px) {
      border: $borderWidth solid #F00;
    }
    div{
        @ include error(); 
    }

    Less 的混入

    1
    2
    3
    4
    5
    6
    .error(@borderWidth: 2px) {
      border: @borderWidth solid #F00;
    }
    div{
        .error();
    }

  6. 高级语法

    Sass 支持很多高级语法,而 Less 对高级语法的支持比较少.