함께 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 구체적 문법

사.온라인 리소스

참고 자료

댓글

댓글 작성