SCSS 编译与使用

sass 命令行的编译、监听与四种排版格式，以及百分比 / rem 计算函数。

##编译sass

sass编译有很多种方式，如命令行编译模式、sublime插件SASS-Build、编译软件koala、前端自动化软件codekit、Grunt打造前端自动化工作流grunt-sass、Gulp打造前端自动化工作流gulp-ruby-sass等。

###命令行编译;

    //单文件转换命令(scss 目标scss文件  生成的css文件)
    sass input.scss output.css

    //单文件监听命令
    sass --watch input.scss:output.css

    //如果你有很多的sass文件的目录，你也可以告诉sass监听整个目录(scss --watch 监测目录:生成目录)：
    sass --watch app/sass:public/stylesheets

####** 注意：监测的目录不宜过深，最好可以用相对路径作为监测目录路径，有效的加快监测效率。**

###命令行编译配置选项;

命令行编译sass有配置选项，如编译过后css排版、生成调试map、开启debug信息等，可通过使用命令sass -v查看详细。我们一般常用两种--style'' --sourcemap。

    //编译格式
    sass --watch input.scss:output.css --style compact

    //编译添加调试map
    sass --watch input.scss:output.css --sourcemap

    //选择编译格式并添加调试map
    sass --watch input.scss:output.css --style expanded --sourcemap

    //开启debug信息
    sass --watch input.scss:output.css --debug-info

--style表示解析后的css是什么排版格式;
sass内置有四种编译格式: nested、expanded、compact、compressed。
--sourcemap表示开启sourcemap调试。开启sourcemap调试后，会生成一个后缀名为.css.map文件。

##四种编译排版演示;

###未编译样式


.box {
  width: 300px;
  height: 400px;
  &-title {
    height: 30px;
    line-height: 30px;
  }
}

nested 编译排版格式


/*命令行内容*/
sass style.scss:style.css --style nested

/*编译过后样式*/
.box {
  width: 300px;
  height: 400px; }
  .box-title {
    height: 30px;
    line-height: 30px; }

expanded 编译排版格式


/*命令行内容*/
sass style.scss:style.css --style expanded

/*编译过后样式*/
.box {
  width: 300px;
  height: 400px;
}
.box-title {
  height: 30px;
  line-height: 30px;
}

compact 编译排版格式


/*命令行内容*/
sass style.scss:style.css --style compact

/*编译过后样式*/
.box { width: 300px; height: 400px; }
.box-title { height: 30px; line-height: 30px; }

compressed 编译排版格式


/*命令行内容*/
sass style.scss:style.css --style compressed

/*编译过后样式*/
.box{width:300px;height:400px}.box-title{height:30px;line-height:30px}

##简单计算公式

动态计算百分比


    $dw:750;            //设计图的宽度

    @function percent($px){
        @return $px/$dw*100%;
    }
    
    .logo {
        width: percent(100);  //动态计算百分比宽
    }

设计图尺寸除2，求出移动端的尺寸


    @function d($px){
        @return $px/2;
    }

    .logo {
        width: d(100px);  //动态计算宽
    }

动态计算rem


    $font-size : 20px;  //页面的根字体大小

    @function r($px){
        @return $px/$font-size*1rem;
    }

附上：scss官方文档

速查

# 单文件编译：input.scss -> output.css
sass input.scss output.css

# 单文件监听
sass --watch input.scss:output.css

# 目录监听：app/sass -> public/stylesheets
sass --watch app/sass:public/stylesheets

# 指定排版格式（nested / expanded / compact / compressed）
sass --watch input.scss:output.css --style compact

# 生成 sourcemap 调试文件（.css.map）
sass --watch input.scss:output.css --sourcemap

# 同时指定格式与 sourcemap
sass --watch input.scss:output.css --style expanded --sourcemap

# 输出 debug 信息
sass --watch input.scss:output.css --debug-info

场景	结论
开发阶段改样式	用 `--watch` 监听，保存即生成 css
上线要体积小	用 `--style compressed`

SCSS 编译与使用

速查

相关