前端工程化之路：初探 Sass 技术

对于 CSS 来说这门语言就如同是写给设计者们的。语言本身是不需要编译的。而且写起来简单明了，但是对于程序员来说没有一种编程的感觉。对于一些重复冗余的代码，无力提高编写效率。现在推出了两个工具 Sass 和 Less，决定尝试一下，慢慢的适应用编程的方式来写 css。因此写了这篇入门的博客，以便以后忘记了的地方能很快捡起来。

Sass 语法

变量

// 普通变量：全局使用属性值$mainColor: #666666;$color: #ff0000;body {background-color: $mainColor; color: $  color;}// 默认变量$color: #ff0000;$color: #000 !default; // 组件化开发时有用// 特殊变量：名字属性或者其他的$borderDire = top;.border-#{$borderDire} {    border-#{$borderDire}: $color 1px solid;}// 多值变量$pList = 5px 10px 15px 20px;p {margin: $pList;}$hSize = (h1: 10px, h2: 15px, h3: 20px);// 全局变量(将新增)$color: #333333;$color: #666666 !global;

嵌套

// 选择器嵌套body {    .main {        color: $color;    }}// 等同于body .main {color: $color;}// 属性嵌套.main {    border: {        left: {            width: 2px;        }        top: {            width: 3px;        }    }}// 等同于.main {border-left-width: 2px; border-top-width: 3px;}

导入

// file: _reset.scss* {margin: 0; padding: 0;}// file: test.scss@import 'reset';body {    .main {        color: $color;    }}//等同于* {margin: 0; padding 0;}body .main {color: #color;}

混合

// 无参@mixin center-block {    margin: 0 auto;}.main {    width: 600px;    height: 300px;    @include center-block;}// 有参@mixin box-sizing ($sizing) {    -webkit-box-sizing: $sizing;       -moz-bix-sizing: $sizing;                sizing: $sizing;}.box-border {    border: 1px $color solid;    @include box-sizing(border-box);}// 多参@mixin border-default($borderWidth: 1px, $borderStyle: dashed) {    border: $borderWidth $borderStyle #666;}div p {@include border-default;}// media问题@mixin screen-max($res) {    @media only screen and (max-width: $res) {        @content;    }}@include screen-max(600px) {    body {        color: red;    }}

函数

$baseFontSize: 10px !default;$greyColor: #cccccc !default;@function pxToRem($px) {    @return $px / $baseFontSize * 1rem;}p {    font-size: pxToRem(20px); // 自定义    color: darken($greyColor, 20%); // 内置函数}

继承

.main {height: $height; width: $width;}.left {@extend .main; color: $color;}.right {@extend .main; color: #777777;}

运算

.main {width: 500px;}.left {width: 200px;}.right {width: 500px - 200px - 30px;}

条件

// 双目判断$size = 10;$color = red;p {    @if $size < 10 {        font-size: 10px;    }}p div {    @if $color == yellow {        color: darken(yellow, 20%);    } @else if $color == green {        color: darken(green, 30%);    } @else {        color: $color;    }}// 三目判断if(true, 1px, 2px) // 1px

循环

// 1-10@for $i from 1 through 10 {    .item-#{$i}: {        display: none;    }}// 1-10@for $i from 1 to 11 {    .item-#{$i}: {        display: none;    }}

Sass 安装

1.安装 Ruby
2.安装 Sass

gem install sass

Sass 编译

# 单文件编译sass test.scss test.css# 文件夹监听编译sass --watch scssDir:cssDir # 逆向转换sass-convert test.css test.scss

Sass 调试

# 开启调试sass --watch scssDir:cssDir --debug-infosass --watch scssDir:cssDir --sourcemap