sass之scss心得

#### 前言
sass在前端并不是一个新东西，网上教程却不算太多，毕竟算是一个偏小众的产品，早在两年前就想写这个文章了，因为懒拖到现在。想写的东西不写，旷日累时，心灵犹如镣铐着持续负重的枷锁。

没用前：写个css而已，干嘛要这么麻烦的用sass?
用之后：再也不想直接写css了！

sass是什么？为什么又有个scss？

很久很久以前，css第一版标准推出11年了，互联网样式愈发复杂，编写静态已捉襟见肘，2007年sass诞生，只需要安装ruby即可把ruby类语法的.sass样式文件编译成css，随后2009年less、2010年stylus等雨后春笋般涌现，此时sass发现它的ruby语法对于css编写者来说，不能即拿即用，于是在2010年推出类似于css写法的.scss形式，css无需转化，直接复制至.scss中即可使用，[西法](http://www.boatsky.com "太空船博客" rel="nofollow")也是用该推荐的方式。

#### 安装

1.在ruby官网 <a href="http://rubyinstaller.org/downloads/" title="http://rubyinstaller.org/downloads/" target="_blank" rel="nofollow">http://rubyinstaller.org/downloads/</a> 下载一个稳定版ruby，安装成功后，在dos下使用ruby -v可看到当前安装版本

2.gem install sass 安装sass,使用sass -v可看到安装版本，如果失败了，则多试几次

3.如果国外被墙了，则可以使用国内镜像<a href="http://gems.ruby-china.org/" title="http://gems.ruby-china.org/" target="_blank" rel="nofollow">http://gems.ruby-china.org/</a> ，即
gem sources --add https://gems.ruby-china.org/ --remove https://rubygems.org/
gem sources -l

4.如果国内镜像也被墙了，可以手动安装它，这时需要下载下面三个包(或者其他地方下载这些包)
SASS.gem: http://rubygems.org/downloads/sass-3.2.13.gem
Chunky_png.gem: http://rubygems.org/downloads/chunky_png-1.2.9.gem
Fssm.gem: http://rubygems.org/downloads/fssm-0.2.10.gem
Compass.gem: http://rubygems.org/downloads/compass-0.12.2.gem
然后把这些包放到ruby安装目录下，在dos下进入该目录，分别使用gem install sass,gem install compass安装这些包，其他两个包会在compass安装时自动安装，使用sass –v与compass –v查看这它们是否安装成功

#### 使用及工具

1.建立一个后缀名为test.scss的文件，里面写一行@charset "UTF-8";设置统一的编码方式，建议每个scss都加

2.进入该文件目录下，sass test.scss test.css，在同目录下会编码一个同名的css文件及map映射文件

3.sass --watch test.scss:test.css 监听该文件，每次修改保存后，自动编译成css

4.sass --watch scss:scss 监听test所在的文件夹

5.本人使用的是idea编辑器，如果不想每次重启电脑后都做上述设置

5.1 安装File Watchers插件   File->Settings->Plugins->Install JetBrains plugin->搜索File Watchers 安装成功后，重启idea编辑器
5.2 File->Settings->File Watchers    Add scss编译规则
5.3 在Program处选择ruby的scss编译命令，比如[cifer](http://www.boatsky.com "太空船博客")电脑的目录是C:\Ruby22\bin\scss.bat
5.4 在Arguments 处填写命令
--no-cache --update $FileName$:$FileNameWithoutExtension$.css
相当于
--no-cache --update --style expanded  $FileName$:$FileNameWithoutExtension$.css

当然也可以用一起工具像考拉,gulp,fis3等
这里以gulp配置为例：
```javascript
'use strict';
//引入gulp
var gulp = require('gulp');
//sass编译
var sass = require('gulp-sass');
//css增加自动加前缀，兼容各浏览器
var autoprefixer = require('gulp-autoprefixer');
//编译scss成css，并压缩，如果编译错误则打印错误
gulp.task('sass', function(){
    gulp.src('src/css/**/*.scss')
        .pipe(changed('public/dist/css/',{extension: '.css'}))
        .pipe(sass({outputStyle:'compressed'}).on('error', sass.logError))
        .pipe(autoprefixer({
            browsers: ['>= 0.1%']
        }))
        .pipe(gulp.dest('public/dist/css/'));
});
//监听sass修改
gulp.task('watch', function(){
    //sass修改
    gulp.watch('src/css/**/*.scss', ['sass']);
});
```

格式有以下4种（由宽松至紧凑），demo我们一般用默认的expanded，正式环境一般使用compressed
展开输出方式 expanded
嵌套输出方式 nested
紧凑输出方式 compact
压缩输出方式 compressed

#### 语法
#####注释(expanded情况，如果是compressed则不会编译至css)
scss
```sass
/*
会被编译到css的段注释
*/
//不会被编译到css的行注释
```
css
```css
/*
会被编译到css的段注释
*/
```
在注释里，如果有变量，则该变量不能被注释
#####嵌套
scss
```sass
.wrap {
  .btn {
    color: #00d586;
    &:hover {
      color: #f00;
    }
    &-hover {
      color: #ff0;
    }
  }
}
```
css
```css
.wrap .btn {
  color: #00d586;
}
.wrap .btn:hover {
  color: #f00;
}
.wrap .btn-hover {
  color: #ff0;
}
```
嵌套给我们写代码提供便利，但嵌套层次不宜超过3层
##### 变量$
scss
```sass
$bgColor: #00d586;
$btnPrimary: primary;
.btn-#{$btnPrimary} {
  color: $bgColor;
}
```
css
 ```css
.btn-primary {
  color: #00d586;
}
```
很多人喜欢命名一大堆的变量，最后却很难维护，其实完全没有必要的。
##### 计算
scss
```sass
$var1: 20px;//如像素，需带单位
$var2: 10px;
.news {
  padding-top: $var1 + 5;//5可不带单位，但推荐带
  padding-right: $var1 - $var2;
  padding-bottom: $var1 * 10;//乘除，不可都带单位
  margin-bottom: $var2 / 10;
  margin-left: $var1 % 8;
  background-color: #333 + #aaa;
}
```
css
```css
.news {
  padding-top: 25px;
  padding-right: 10px;
  padding-bottom: 200px;
  margin-bottom: 1px;
  margin-left: 4px;
  background-color: #dddddd;
}
```
注意单位以及运算符优先级
##### @for循环
scss
```sass
@for $i from 1 to 3 {
  .for-#{$i} {
    width: $i + px;
    height: $i + px;
  }
}
```
css
```css
.for-1 {
  width: 1px;
  height: 1px;
}
 
.for-2 {
  width: 2px;
  height: 2px;
}
```
##### @while循环
scss
```sass
$j: 1;
@while $j < 3 
{ .while-#{$j} 
  { width: $j + px; height: $j + px; }
  $j: $j + 1; 
}
```
css
```css
.while-1 {
  width: 1px;
  height: 1px;
}
.while-2 {
  width: 2px;
  height: 2px;
}
```
##### @each循环
scss
```sass
@each $k in (1,2){
  .each-#{$k} {
    width: $k + px;
    height: $k + px;
  }
}
@each $m, $n in (primary: #00d586,important: #f00){
  .btn-#{$m}{
    background-color: $n;
  }
}
```
css
```css
.each-1 {
  width: 1px;
  height: 1px;
}
.each-2 {
  width: 2px;
  height: 2px;
}
.btn-primary {
  background-color: #00d586;
}
.btn-important {
  background-color: #f00;
}
```
##### 继承@extend .class,(!optional非必须，表示如果.farther-1不存在则，不报错)
scss
```sass
.father-1 {
  cursor: pointer;
}
.child-1 {
  @extend .father-1 !optional;
  z-index: 1;
}
```
css
```css
.father-1, .child-1 {
  cursor: pointer;
}
.child-1 {
  z-index: 1;
}
```
sass作为css预处理工具，如果在开发阶段报错则更佳
##### 继承@extend %class,
%开头的不会生成在css,只是一个占位变量
scss
```sass
%father-2 {
  cursor: pointer;
}
.child-2 {
  @extend %father-2;
  z-index: 2;
}
```
css
```css
.child-2 {
  cursor: pointer;
}
.child-2 {
  z-index: 2;
}
```
##### 代码块@mixin
scss
```sass
@mixin elli {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.name {
  width: 200px;
  @include elli;
}
```
css
```css
.name {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
```
必须谨慎的是，如果在媒体查询@media下使用@include 代码块，会报错，需在@media外@include。
##### @extend %class会在每个子元素都复制父类的代码，而@extend .class与@mixin则会合并各子元素的引入
scss
```sass
.inline-block {
  display: inline-block;
}
%inline-block {
  display: inline-block;
}
@mixin inline-block{
  display: inline-block;
}
 
@for $i from 1 to 3 {
  .i-#{$i}{
    @extend .inline-block;
    z-index: $i;
  }
}
@for $j from 1 to 3 {
  .j-#{$j}{
    @extend %inline-block;
    z-index: $j;
  }
}
@for $k from 1 to 3 {
  .k-#{$k}{
    @include inline-block;
    z-index: $k;
  }
}
```
css
```css
.inline-block, .i-1, .i-2 {
  display: inline-block;
}
.j-1, .j-2 {
  display: inline-block;
}
.i-1 {
  z-index: 1;
}
.i-2 {
  z-index: 2;
}
.j-1 {
  z-index: 1;
}
.j-2 {
  z-index: 2;
}
.k-1 {
  display: inline-block;
  z-index: 1;
}
.k-2 {
  display: inline-block;
  z-index: 2;
}
```
##### 函数@function
（其中!default表示如果为空，则设置默认值）
scss
```sass
@function max($a, $b){
  @if($a >= $b){
    @return $a;
  }
  @else {
    @return $b;
  }
}
.content {
  $a: 80px !default;
  $b: 40px !default;
  width: max($a,$b);
}
```
css
```css
.content {
  width: 80px;
}
```
##### @import 引入其他样式文件
scss
```sass
@import "list";
@import "list.scss";
@import "list_v2";
@import "_list_v2";
@import "list.css";
@import "http://www.boatsky.com/static/css/common/_function.scss";
@import url("http://www.boatsky.com/static/css/common/_function.scss");
```
css
```css
@import url(list.css);
@import "http://www.boatsky.com/static/css/common/_function.scss";
@import url("http://www.boatsky.com/static/css/common/_function.scss");
.list {
  width: 100px;
}
.list {
  width: 100px;
}
._list_v2 {
  width: 300px;
}
._list_v2 {
  width: 300px;
}
```
1. 如果是引入css或者使用链接引入，会编译成css2的import引入，低浏览器不支持
2. 如果使用_开头的scss，不会生成相应的css，适合当作模块使用
3. 同一个目录，不可有同名文件存在 ，_list.scss与list.scss认为是同名
4. 如果样式重复，不会合并，而是按出现顺序出现多次
##### 作用域
scss
```sass
.animal {
  font-size: 14px;
  $width: 100px;
  .person-1 {
    width: $width;
  }
}
.person-2 {
  width: $width;
}
```
这时报错，因为在.person-2中，拿不到.animal作用域里变量，如果想实现上述功能，可以改成
```sass
.animal {
  font-size: 14px;
  $width: 100px;
  .person-1 {
    width: $width;
  }
  @at-root {
    .person-2 {
      width: $width;
    }
  }
}
```
css
```css
.animal {
  font-size: 14px;
}
.animal .person-1 {
  width: 100px;
}
.person-2 {
  width: 100px;
}
```
##### @content 内容注入
当mixin里使用时，可以使用@include mixin一次性注入相应内容，其他再引入时不再生效
scss
```sass
@mixin mixin {
  a {
    color: #333;
    @content;
  }
}
@include mixin {
  font-size: 16px;
}
.title {
  @include mixin {
    font-weight: normal;
  }
}
.content {
  @include mixin;
}
```
css
```css
a {
  color: #333;
  font-size: 16px;
}
.title a {
  color: #333;
  font-weight: normal;
}
.content a {
  color: #333;
}
```
以上就是常用的一些sass功能了，更多的功能请参考：[官方文档](http://sass-lang.com/documentation/file.SASS_REFERENCE.html "http://sass-lang.com/documentation/file.SASS_REFERENCE.html")
，当一些复杂css编写时，它大大的提高我们的效率，但学会了这些功能，有时需扪心自问，我们真的非需不可吗？倘若为了使用功能而使用，反而适得其反，得不偿失！

最后贴个狗皮膏药
```sass
@charset "utf-8";
// mixin
@mixin elli{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

// class
%clearfix{
  zoom:1;
  &:after {
    visibility:hidden;
    display:block;
    font-size:0;
    content:" ";
    clear:both;
    height:0;
  }
}

%indent{ text-indent: -100%; overflow: hidden;}
%border_box{ -webkit-box-sizing: border-box; box-sizing: border-box; }

//增加前缀
@mixin add-prefix($key, $value) {
  -webkit-#{$key}: $value;
  -moz-#{$key}: $value;
  -ms-#{$key}: $value;
  -o-#{$key}: $value;
  #{$key}: $value;
}

//禁止选中
@mixin user-select-none {
  @include add-prefix(user-select,none);
}
```

如果觉得有帮忙，您可以在本页底部留言。

sass之scss心得

全部留言

我要留言