Let's Learn SASS Together

Preface

SASS is approximately a new technology from 4 years ago (2011), SASS official website has detailed introduction, including installation guide, learning tutorial, syntax detail documentation, etc., very comprehensive and clear

Why is it necessary to learn SASS? Because many frontend automation tools use SASS, for example JD's JDF, Taobao's KISSY both support SASS, in actual product development, SASS is used a lot, and SASS syntax is very simple, learning cost is not high

As for SASS vs LESS, actually the difference is not very large, functions are similar, just have differences in syntax details. And in terms of functionality, SASS is slightly stronger than LESS, so looking at SASS is definitely not a loss

1. What is SASS?

According to official statement, SASS (Syntactically Awesome Style Sheets) is a CSS extension language

We know CSS is just a markup language, lacks programmable features, for example does not support variables, functions, logic flow control, etc., lacking these features makes CSS code difficult to maintain and modify, and SASS is to extend these programmable features to CSS

Similar things include LESS and Stylus, for differences between the three please check Open Source China Community: Detailed Comparison of Three CSS Preprocessors (Frameworks): Sass, LESS and Stylus

2. Difference Between SASS and SCSS

SCSS (Sassy CSS) is new version SASS, actually the difference is not large, mainly has differences in syntax format: SASS does not need curly braces and semicolons, uses indentation to represent nesting relationships, that's all

P.S. Generally use SCSS format, probably because it's easier to transition from CSS format

3. SASS Specific Syntax

P.S. Here gives complete test code, details are in comments, suggest opening SASS online editor, paste the code below, compare with generated CSS code to understand

// 1.这个注释编译后就没了
/* 2.这个注释编译后还在，但压缩后就没了 */
/*!
 * 3.这个注释压缩后都在，用来说明重要信息，比如版权声明
 */
 
/* 引用 a.scss 文件，合并编译结果 */
// @import "path/a";  // 因为没有 a.scss，所以会报错
/* 引用普通 css 文件，编译为 @import url(...) */
@import "path/a.css";

/* 
 * 可以用嵌套结构表示后代
 * 可以用 @at-root 跳出所有嵌套，感觉没什么用，只会把代码变得更混乱
 */
div {
  h2 {
    color: white;
    // 属性也可以嵌套，但要注意属性名后面的冒号
    border: {
      color: red;
      width: 1px;
    };
  }
}
/* 可以用&引用外层元素 */
a {
  span {
    &:hover {
      color: red;
    }
    span {
      // 无法引用外外层元素
      // 直接用&&会报错，若用空格隔开则生成 a span span a span span
      // 没什么意义
      & &:hover{
        color : red;
      }
    }
  }
}

/* 变量的声明及使用 */
$myFontSize : 14px;
$attr : color;
$arr : 3 2 1; // 一维数组
$arr2 : 10 20,
        30 40;  // 二维数组
$map : (myWidth : 30px, myHeight : 50px); // 映射
// 使用变量
h1 {
  font-size : $myFontSize;  // 属性值替换
  border-#{$attr} : red;  // 属性名替换
  border-width : nth($arr, 3);  // 取第 3 个元素
  width : nth(nth($arr2, 2), 1);  // 取 arr[1][0]
  height : map-get($map, myHeight);
}

/* 变量作用域 */
$myValue : 1;
$gValue : 1;
// 测试变量作用域
.test {
  $myValue : 2;
  $gValue : 2 !global; // 全局变量
  width : $myValue;
  height : $gValue;
}
.test2 {
  width : $myValue;
  height : $gValue;
}

/* 混合的声明及使用 */
@mixin m_noArgs {
  width : 100px;
  height : 100px;
}
@mixin m_hasArgs($w, $h) {
  width : $w;
  height : $h;
}
@mixin m_hasDefaultArgs($w, $h : 100px) {
  width : $w;
  height : $h;
}
@mixin m_hasManyArgs($m, $p, $w : 100px, $h : 100px) {
  margin : $m;
  padding : $p;
  width : $w;
  height : $h;
}
@mixin m_hasGroupArgs($ts...) { // 参数个数不确定，比如渐变，阴影
  text-shadow : $ts;
}
// 使用
h1 {
  /* 传入参数多了少了都报错 */
  @include m_noArgs;
  @include m_hasArgs(100px, 200px);
  @include m_hasDefaultArgs(50px);
  @include m_hasDefaultArgs(50px, 50px);
  @include m_hasManyArgs($p : 3px, $m : 5px); // 带名传参，不用管顺序
  @include m_hasGroupArgs(0 1px 0 #777, 0 -1px 0 #000);
}


/* 继承 */
// 父类
.super {
  color : red;
}
// 子类
.sub {
  // 继承父类属性
  @extend .super;
  // 子类属性
  background-color : white;
}
/* 占位符选择器%，不调用就不编译生成 css，避免继承产生多余的 css */
%header { // 不会生成 css
  color : red;
}
%footer {
  color : red;
}
// 调用
.myFooter {
  @extend %footer;
}

/* 函数 */
/* 调用库函数 */
$myColor1 : darken(#00f, 20%);  // 加深 20%
$myColor2 : lighten(#00f, 20%);  // 减淡 20%
p {
  color : $myColor1;
  background : $myColor2;
}
/* 自定义函数 */
@function add($arg1, $arg2) {
  @return $arg1 + $arg2;  // 注意 return 前面要有 @
}
h1 {
  font-size : add(10px, 20px);
}

/* 运算 */
// 支持+、-、*、/、()
.test {
  //width : 12px + 1em; //报错，单位不匹配
  color : #000 - #fff;
  color : #ccc + #eee;
}

/* 条件语句 */
$color : true;
h1 {
  @if ($color == true){ //没有===操作符，和 js 不一样
    color : red;
  }
  @else if ($color){  //if 前不加 @，加了报错
    //...
  }
  @else {
    //...
  }
}
// 还有三目判断 if($condition, $if_true, $if_false) 但意义不大

/* for 循环 */
@for $i from 1 to 3 { // 注意：to 表示 [1, 3)，through 表示 [1, 3]
  .item-#{$i} {
    width: 20px * $i;
  }
}
/* each 循环 */
$arr : top, right, bottom, left;
$arr2 : 10 20,
        20 30;
$map : (h1 : 3em, h2 : 2em, h3 : 1em);
div {
  @each $item in $arr { // 遍历一维数组
    border-#{$item} : 1px solid red;
  }
}
p {
  @each $tb, $lr in $arr2 { // 遍历二维数组
    outline : $tb, $lr;
    border : $tb, $lr;
  }
}
@each $h, $em in $map { // 遍历 map
  #{$h} {
    font-size : $em;
  }
}
// 参考资料：http://www.w3cplus.com/sassguide/syntax.html

If you don't like this way of reading code to understand, can check W3CPlus: SASS Syntax, provides illustrated explanation

P.S. Personally prefer reading code to understand, because code is simple and clear, no nonsense, if code examples are just right then even better

4. Online Resources

SASS Official Website: Most standard, most authoritative
W3CPlus: Has a very detailed introductory article, illustrated (mentioned above)
SASS Online Editor: Don't want to install ruby, still want to use SASS, this is the right choice
RubyInstaller: Can't install ruby under Windows? Has good exe here

Preface

1. What is SASS?

2. Difference Between SASS and SCSS

3. SASS Specific Syntax

4. Online Resources

References

Comments

Leave a comment