一緒に SASS を学ぼう

前置き

SASS は約 4 年前（2011 年）の新技术で、SASS 公式サイトに詳細な紹介があります。インストールガイド、学習チュートリアル、構文詳細ドキュメントなど、非常に包括的で明確です

なぜ SASS を学ぶ必要があるのか？多くのフロントエンド自動化ツールが SASS を使用しているからです。例えば京東の JDF、淘宝の KISSY はすべて SASS をサポートしています。実際の製品開発において SASS は非常に多く使用されており、しかも SASS 構文は非常に簡単で、学習コストは高くありません

SASS と less については、実際には差異は大きくなく、機能は類似しており、構文詳細に違いがあるだけです。しかも機能而言、SASS の方が less よりわずかに優れているため、SASS を見ることは確実に損ではありません

一.SASS とは何か？

公式の説明によると、SASS（Syntactically Awesome Style Sheets）は CSS 拡張言語です

私たちが知っている CSS は単なるマークアップ言語で、プログラミング可能な特性をサポートしてい��せん。例えば変数、関数、ロジックフロー制御などをサポートしておらず、これらの特性の欠如により CSS コードは保守や変更が困難になります。SASS はまさに CSS にこれらのプログラミング可能な特性を拡張しようとするものです

類似のものに less と stylus があり、三つの違いについては开源中国社区：为您详细比较三个 CSS 预处理器（框架）：Sass、LESS 和 Stylus をご覧ください

二.SASS と SCSS の違い

SCSS（Sassy CSS）は新版 SASS で、実際には差異は大きくなく、主に構文形式に違いがあります：SASS は中括弧とセミコロンを必要とせず、インデントでネスト関係を表します。それだけです

P.S. 一般的に SCSS 形式を使用します。おそらく CSS 形式から移行しやすいためでしょう

三.SASS 具体的な構文

P.S. ここに完全なテストコードを示します。詳細はすべてコメントにあります。SASS オンラインエディタを開いて、以下のコードを貼り付け、生成された CSS コードと比較して理解することをお勧めします

// 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

このようなコードで説明する方式が気に入らない場合は、W3CPlus：SASS 構文をご覧ください。図文豊富な解説を提供しています

P.S. 個人的にはコードで説明する方式の方が好きです。コードはシンプルで明確で、無駄な言葉がないためです。コード例が適切であればなお良いでしょう

四.オンラインリソース

SASS 公式サイト：最も標準的で権威がある
W3CPlus：非常に詳細な入門記事があり、図文豊富（上記でも言及）
SASS オンラインエディタ：Ruby をインストールしたくない、でも SASS を使いたい場合に最適
RubyInstaller：Windows で Ruby がインストールできない？ここに使いやすい exe があります

前置き

一.SASS とは何か？

二.SASS と SCSS の違い

三.SASS 具体的な構文

四.オンラインリソース

参考資料

コメント

コメントを書く