寫在前面的話

本文所有語法格式是基于SCSS格式的

scss 和 sass語法的相互轉換

# Convert Sass to SCSS
$ sass-convert style.sass style.scss

# Convert SCSS to Sass
$ sass-convert style.scss style.sass

編譯

命令行編譯

#單文件
sass --watch input.scss:output.css
#多文件
sass --watch app/sass:public/stylesheets

# --wacth 自動編譯

GUI 界面工具編譯

Koala
Compass.app
Scout
CodeKit
Prepros

自動化編譯

Grunt 配置 Sass 編譯的示例代碼

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        sass: {
            dist: {
                files: {
                    'style/style.css' : 'sass/style.scss'
                }
            }
        },
        watch: {
            css: {
                files: '**/*.scss',
                tasks: ['sass']
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.registerTask('default',['watch']);
}

Gulp 配置 Sass 編譯的示例代碼

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function () {
    gulp.src('./scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('./css'));
});

gulp.task('watch', function() {
    gulp.watch('scss/*.scss', ['sass']);
});

gulp.task('default', ['sass','watch']);

編譯錯誤

1.要用UTF-8
2.文件路徑及文件名不要用中文

輸出方式

1.嵌套輸出方式 nested

$ sass --watch test.scss:test.css --style nested

編譯出來的CSS風格

 nav ul {
  margin: 0;
  padding: 0;
  list-style: none; }
nav li {
  display: inline-block; }
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none; }

2.展開輸出方式 expanded（默認樣式）

$ sass --watch test.scss:test.css --style expanded

編譯出來的CSS風格

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

3.緊湊輸出方式 compact

sass --watch test.scss:test.css --style compact

編譯出來的CSS風格

nav ul { margin: 0; padding: 0; list-style: none; }
nav li { display: inline-block; }
nav a { display: block; padding: 6px 12px; text-decoration: none; }

4.壓縮輸出方式 compressed

sass --watch test.scss:test.css --style compressed

編譯出來的CSS風格

nav ul{margin:0;padding:0;list-style:none}nav li{display:inline-block}nav a{display:block;padding:6px 12px;text-decoration:none}

基礎

變量

聲明變量

sass離不開$

$width : 300px;

普通變量 & 默認變量

$fontSize: 12px;
body{
    font-size:$fontSize;
}

$baseLineHeight:1.5 !default;
body{
    line-height: $baseLineHeight; 
}

局部變量 & 全局變量（3.4+）

//SCSS
$color: orange !default;//定義全局變量
.block {
  color: $color;//調用全局變量
}
em {
  $color: red;//定義局部變量（全局變量 $color 的影子）
  a {
    color: $color;//調用局部變量
  }
}

嵌套

選擇器嵌套

nav {
  a {
    color: red;

    header & {
      color:green;
    }
  }  
}

nav a {
  color:red;
}

header nav a {
  color:green;
}

其中&代表其所在位置的所有長輩元素

屬性嵌套

主要用于padding ，margin，font等屬性

.box {
  border: {
   top: 1px solid red;
   bottom: 1px solid green;
  }
}

.box {
    border-top: 1px solid red;
    border-bottom: 1px solid green;
}

偽類嵌套

.clearfix{
&:before,
&:after {
    content:"";
    display: table;
  }
}

clearfix:before, .clearfix:after {
  content: "";
  display: table;
}

混合宏

聲明混合宏@mixin

1.不帶參數的混合宏

@mixin border-radius{
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

2.帶參數的混合宏

//一個參數時，可以指定默認值
@mixin border-radius($radius:5px){//此時的5px為默認參數，傳入其他值時覆蓋該值
    -webkit-border-radius: $radius;
    border-radius: $radius;
}
//傳2個參數
@mixin center($width, $height){
...
}
//參數過多 ，一個特別的參數 （...）
@mixin box-shadow($shadows...){
  @if length($shadows) >= 1 {
    -webkit-box-shadow: $shadows;
    box-shadow: $shadows;
  } @else {
    $shadows: 0 0 2px rgba(#000,.25);
    -webkit-box-shadow: $shadow;
    box-shadow: $shadow;
  }
}

3.復雜的混合宏

@maxin box-shadow($shadow..){
    @if length($shadow) >= 1{
        @include prefixer(box-shadow, $shadow);
    } @else {
        $shadow:0 0 4px rgba(0,0,0,.3);
        @include prefixer(box-shadow, $shadow);
    }
}

調用混合宏@include

button{
    @include border-radius;
}

不足之處

會產生冗余的代碼塊，如：

@mixin border-radius{
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

.box {
  @include border-radius;
  margin-bottom: 5px;
}

.btn {
  @include border-radius;
}

編譯生成的CSS為

.box {
  -webkit-border-radius: 3px;
  border-radius: 3px;
  margin-bottom: 5px;
}

.btn {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

而理想的CSS為

.box, .btn{
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
.box{
    margin-bottom: 5px;
}

占位符%placeholder

通過%placeholder聲明的代碼，如果不被@extend調用的話，不會產生任何代碼

%mt5 {
  margin-top: 5px;
}
%pt5{
  padding-top: 5px;
}

.btn {
  @extend %mt5;
  @extend %pt5;
}

.block {
  @extend %mt5;

  span {
    @extend %pt5;
  }
}

編譯出來的CSS

.btn, .block {
  margin-top: 5px;
}

.btn, .block span {
  padding-top: 5px;
}

<a name="extend">拓展/繼承@extend</a>

通過關鍵詞 @extend來繼承已經存在的樣式塊

.btn {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

.btn-primary {
  background-color: #f36;
  color: #fff;
  @extend .btn;
}

.btn-second {
  background-color: orange;
  color: #fff;
  @extend .btn;
}

生成的CSS

.btn, .btn-primary, .btn-second {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}
//代碼進行了合并

.btn-primary {
  background-color: #f36;
  color: #fff;
}

.btn-second {
  background-clor: orange;
  color: #fff;
}

中途小結

插值#{}

少廢話，先看例子

$properties: (margin, padding);
@mixin set-value($side, $value) {
    @each $prop in $properties {
        #{$prop}-#{$side}: $value;
    }
}
.login-box {
    @include set-value(top, 14px);
}

編譯出的CSS

.login-box {
    margin-top: 14px;
    padding-top: 14px;
}

不對的例子

$margin-big: 40px;
$margin-medium: 20px;
$margin-small: 12px;
@mixin set-value($size) {
    margin-top: $margin-#{$size};
}
.login-box {
    @include set-value(big);
}

@mixin updated-status {
    margin-top: 20px;
    background: #F00;
}
$flag: "status";
.navigation {
    @include updated-#{$flag};
}

注釋

數據類型

數字

1，10px

字符串

• 有引號字符串 (quoted strings)，如 "Lucida Grande" 、'http://sass-lang.com'；
• 無引號字符串 (unquoted strings)，如 sans-serifbold。

在編譯 CSS 文件時不會改變其類型。只有一種情況例外，使用 #{ }插值語句 (interpolation) 時，有引號字符串將被編譯為無引號字符串，這樣方便了在混合指令 (mixin) 中引用選擇器名。

@mixin firefox-message($selector) {
    body.firefox #{$selector}:before {
        content: "Hi, Firefox users!";
    }
}
@include firefox-message(".header");

編譯出來的CSS為

body.firefox .header:before {
    content: "Hi, Firefox users!";
}

另外 當 deprecated = property syntax 時 （暫時不理解是怎樣的情況），所有的字符串都將被編譯為無引號字符串，不論是否使用了引號。

顏色

blue、 #04a3f9、 rgba(255,0,0,0.5)；

布爾

true,false

空值

null；

值列表

用空格或者逗號分開，如，1.5em 1em 0 2em 、 Helvetica, Arial, sans-serif
更多用法：

nth函數（nth function） 可以直接訪問值列表中的某一項；
join函數（join function） 可以將多個值列表連結在一起；
append函數（append function） 可以在值列表中添加值；
@each規(guī)則（@each rule） 則能夠給值列表中的每個項目添加樣式。

運算

加、減、乘、除

• 加減注意單位一致，
• 乘除注意單位不能同時存在，
• 運算符和變量，數值中間用空格分開

變量計算

數字運算

顏色計算

每兩位進行運算

字符運算

用 + 串聯

如果有引號的字符串被添加了一個沒有引號的字符串 （也就是，帶引號的字符串在 + 符號左側）， 結果會是一個有引號的字符串。 同樣的，如果一個沒有引號的字符串被添加了一個有引號的字符串 （沒有引號的字符串在 + 符號左側）， 結果將是一個沒有引號的字符串。以等號左邊的為準

p:before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
}

編譯結果

p:before {
  content: "Foo Bar";
  font-family: sans-serif; 
}

進階

控制命令

@if @else @else if

@mixin blockOrHidden($boolean:true) {
  @if $boolean {
      @debug "$boolean is #{$boolean}";
      display: block;
    }
  @else {
      @debug "$boolean is #{$boolean}";
      display: none;
    }
}

.block {
  @include blockOrHidden;
}

.hidden{
  @include blockOrHidden(false);
}

編譯出來的CSS

.block {
  display: block;
}

.hidden {
  display: none;
}

@for

//2種方式
@for $i from <start> through <end> //包括 end 這個值
@for $i from <start> to <end> //不包括 end 這個數

//$i 表示變量
//start 表示起始值
//end 表示結束值

看個例子

$grid-prefix: span !default;
$grid-width: 60px !default;
$grid-gutter: 20px !default;

%grid {
  float: left;
  margin-left: $grid-gutter / 2;
  margin-right: $grid-gutter / 2;
}
@for $i from 1 through 12 {
  .#{$grid-prefix}#{$i}{
    width: $grid-width * $i + $grid-gutter * ($i - 1);
    @extend %grid;
  }
}

編譯出來的CSS

.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 {
  float: left;
  margin-left: 10px;
  margin-right: 10px;
}

.span1 {
  width: 60px;
}
.
.
.

@while

$types: 4;
$type-width: 20px;

@while $types > 0 {
    .while-#{$types} {
        width: $type-width + $types;
    }
    $types: $types - 1;
}

編譯出來的CSS

.while-4 {
  width: 24px;
}

.while-3 {
  width: 23px;
}

.while-2 {
  width: 22px;
}

.while-1 {
  width: 21px;
}

@each

@each $var in <list>

//$var 就是一個變量名，
//<list> 是一個 SassScript 表達式，他將返回一個列表值。

舉個例子

$list: adam john wynn mason kuroir;//$list 就是一個列表

@mixin author-images {
    @each $author in $list {
        .photo-#{$author} {
            background: url("/images/avatars/#{$author}.png") no-repeat;
        }
    }
}

.author-bio {
    @include author-images;
}

編譯出來的CSS

.author-bio .photo-adam {
  background: url("/images/avatars/adam.png") no-repeat; }
.author-bio .photo-john {
  background: url("/images/avatars/john.png") no-repeat; }
.author-bio .photo-wynn {
  background: url("/images/avatars/wynn.png") no-repeat; }
.author-bio .photo-mason {
  background: url("/images/avatars/mason.png") no-repeat; }
.author-bio .photo-kuroir {
  background: url("/images/avatars/kuroir.png") no-repeat; }

字符串函數

unquote($string)：刪除字符串中的引號

unquote() 函數主要是用來刪除一個字符串中的引號，如果這個字符串沒有帶有引號，將返回原始的字符串。
只能刪除字符串最前和最后的引號（雙引號或單引號），而無法刪除字符串中間的引號

quote($string)：給字符串添加引號

使用 quote() 函數只能給字符串增加雙引號，而且字符串中間有單引號或者空格時，需要用單引號或雙引號括起，否則編譯的時候將會報錯。
同時 quote() 碰到特殊符號，比如： !、?、> 等，除中折號 - 和 下劃線_ 都需要使用雙引號括起，否則編譯器在進行編譯的時候同樣會報錯

To-upper-case()

To-lower-case()

數字函數

列表函數

Introspection函數

Miscellaneous函數

在這里把 Miscellaneous 函數稱為三元條件函數，主要因為他和 JavaScript 中的三元判斷非常的相似。他有兩個值，當條件成立返回一種值，當條件不成立時返回另一種值：

if($condition,$if-true,$if-false)

>> if(true,1px,2px)
1px
>> if(false,1px,2px)
2px

Map函數

顏色函數

RGB顏色函數

HSL函數

Opacity函數

@規(guī)則/指令(directive)

@import

默認情況是sass的@import，以下情況會用CSS的@import

• 如果文件的擴展名是 .css。
• 如果文件名以 http:// 開頭。
• 如果文件名是 url()。
• 如果 @import 包含了任何媒體查詢（media queries）

@import "foo.scss";
@import "foo"
//都會引入foo.scss文件
@import "rounded-corners", "text-shadow";
//引入多個文件
//如果你有一個 SCSS 或 Sass 文件需要引入， 但是你又不希望它被編譯為一個 CSS 文件， 這時，你就可以在文件名前面加一個下劃線，就能避免被編譯。你就可以像往常一樣引入這個文件了，而且還可以省略掉文件名前面的下劃線
在同一個目錄不能同時存在帶下劃線和不帶下劃線的同名文件。 例如， _colors.scss 不能與 colors.scss 并存

嵌套 @import
雖然大部分時間只需在頂層文件使用 @import 就行了， 但是，你還可以把他們包含在 CSS 規(guī)則 和 @media 規(guī)則中。

@media

Sass 中的 @media 指令和 CSS 的使用規(guī)則一樣的簡單，但它有另外一個功能，可以嵌套在 CSS 規(guī)則中。有點類似 JS 的冒泡功能一樣，如果在樣式中使用 @media 指令，它將冒泡到外面。

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}

編譯出來的CSS

.sidebar {
    width: 300px;
}
@media screen and (orientation: landscape) {
    .sidebar {
        width: 500px;
    }
}

支持嵌套

@extend

@at-root

@at-root 從字面上解釋就是跳出根元素。當你選擇器嵌套多層之后，想讓某個選擇器跳出，此時就可以使用 @at-root。

.a {
  color: red;

  .b {
    color: orange;

    .c {
      color: yellow;

      @at-root .d {
        color: green;
      }
    }
  }
}

編譯出來的CSS

.a {
  color: red;
}

.a .b {
  color: orange;
}

.a .b .c {
  color: yellow;
}

.d {
  color: green;
}

@debug

@debug 在 Sass 中是用來調試的，當你的在 Sass 的源碼中使用了 @debug 指令之后，Sass 代碼在編譯出錯時，在命令終端會輸出你設置的提示 Bug:

@debug 10em + 12em;

輸出

Line 1 DEBUG: 22em

@warn

@warn 和 @debug 功能類似，用來幫助我們更好的調試 Sass。如：

@mixin adjust-location($x, $y) {
  @if unitless($x) {
    @warn "Assuming #{$x} to be in pixels";
    $x: 1px * $x;
  }
  @if unitless($y) {
    @warn "Assuming #{$y} to be in pixels";
    $y: 1px * $y;
  }
  position: relative; left: $x; top: $y;
}

@error

@error 和 @warn、@debug 功能是如出一轍。

@mixin error($x){
  @if $x < 10 {
    width: $x * 10px;
  } @else if $x == 10 {
    width: $x;
  } @else {
    @error "你需要將#{$x}值設置在10以內的數";
  }

}

.test {
  @include error(15);
}

編譯時

你需要將15值設置在10以內的數 on line 7 at column 5

本文根據慕課網相關課程原創(chuàng)整理，轉載請注明出處