SASS初次会话

日期:2015-7-23 14:23 | 标签: SASS | 阅读:411

关于sass,w3cplus上有比较完整的介绍: http://www.w3cplus.com/sassguide/
此外,阮博士的分析也非常精辟:SASS用法指南

步骤

  1. 安装
    此中发现一个问题,sass被墙了,未装vpn者可用淘宝的资源。
  2. 入门
    入门非常简单,只要你有编程基础,理解其变量、运算与拓展/继承是分分钟的事情,相比css其写法也更友好,其支持嵌套,层级关系一目了然,从css衍生出的@import经过编译后放在一个文件里边,这也是一个非常人性化的做法。
  3. 调试编译技巧
    这个没好说的,熟悉下工具和命令,多试几次。
  4. sass库与api
    这个是经验和积累的过程,多实践才能出成果。

以上是与sass初次会话的感觉,此文会不定时更新,添加一些我对sass的理解。

语法纪要

变量

变量以$开头,使用变量必须放在#{}中,变量可参与计算,计算方式如:$var \ 10%,可以在变量名后加上!default*表示默认值。

注释

分简单注释与重要注释

// 简单注释
/*! 
重要注释!
*/

@mixin

可以重用的代码模块,使用方式如:

// 定义
@mixin left {
  float: left;
  margin-left: 10px;
}
// 参数缺省
@mixin left($value: 10px) {
  float: left;
  margin-right: $value;
}
// 使用
div {
  @include left;
      // @include left(20px);

}

@import

// 插入scss文件
@import "path/filename.scss";
// 直接插入css:类似css原生import
@import "foo.css";

高级语法

//  if/else
@if lightness($color) > 30% {
  background-color: #000;
} @else {
  background-color: #fff;
}
// 循环
@for $i from 1 to 10 {
    .border-#{$i} {
      border: #{$i}px solid blue;
    }
}

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

@each $member in a, b, c, d {
  .#{$member} {
    background-image: url("/image/#{$member}.jpg");
  }
}

// 自定义函数
@function double($n) {
  @return $n * 2;
}
#sidebar {
  width: double(5px);
}

其它

// 生成系列颜色
lighten(#cc3, 10%)

// 继承
.class1 {
  border: 1px solid #ddd;
}
.class2 {
  @extend .class1;
  font-size:120%;
}

// 使用多类选择器,.mod.on可以省略为&.on
.mod.on {
    color: green;
}
.mod {
    &.on{
        color: green;
    }
}

@update 2015-07-06

其实与sass类似的一个技术有一个叫:less,其与sass的区别是它的变量名是使用@开头,另外less是使用JavaScript进行解析。环境要求不如sass苛刻,但是功能也没有sass那么强大。
sass的mixin非常强大,可以使用函数方式指定缺省值,使用include引用其定义的函数,参考阮博士中的案例:

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

可以在html中嵌入一个less.js文件或则使用node工具lessc,也可以用gulp,grunt插件在部署之前编译。

版权声明: 署名-非商业性使用-禁止演绎 4.0 国际(CC BY-NC-ND 4.0
Copyright ©2013-2017 | 粤ICP备14081691号 | yipeng手工打造 | 联系方式