Sass簡介,安裝環境，Sass的語法格式及編譯調試_html/css_WEB-ITnose

定義：CSS 預處理器定義了一種新的語言，其基本思想是，用一種專門的編程語言，為 CSS 增加了一些編程的特性，將 CSS 作為目標生成文件，然后開發者就只要使用這種語言進行編碼工作。

在 CSS 中使用變量、簡單的邏輯程序、函數等等在編程語言中的一些基本特性，可以讓你的 CSS 更加簡潔、適應性更強、可讀性更佳，更易于代碼的維護等諸多好處。

CSS 預處理器語言，比如說：
Sass（SCSS）
LESS
Stylus
Turbine
Swithch CSS
CSS Cacheer
DT CSS

到目前為止，在眾多優秀的 CSS 預處理器語言中就屬 Sass、LESS和 Stylus 最優秀

什么是 Sass？
Sass 是一門高于 CSS 的元語言，它能用來清晰地、結構化地描述文件樣式，有著比普通 CSS 更加強大的功能。
Sass 能夠提供更簡潔、更優雅的語法，同時提供多種功能來創建可維護和管理的樣式表。

Sass 和 SCSS 有什么區別？
Sass 和 SCSS 其實是同一種東西，我們平時都稱之為 Sass，兩者之間不同之處有以下兩點：
1、文件擴展名不同，Sass 是以“.sass”后綴為擴展名，而 SCSS 是以“.scss”后綴為擴展名
2、語法書寫方式不同，Sass 是以嚴格的縮進式語法規則來書寫，不帶大括號({})和分號(;)，而 SCSS 的語法書寫和我們的 CSS 語法書寫方式非常類似。
Sass 語法

1 $font-stack: Helvetica, sans-serif //定義變量2 $primary-color: #333 //定義變量3 body4 　　font: 100% $font-stack5 　　color: $primary-color

SCSS 語法

1 $font-stack: Helvetica, sans-serif;2 $primary-color: #333;3 body {4 font: 100% $font-stack;5 color: $primary-color;6 }

編譯出來的 CSS

1 body {2 font: 100% Helvetica, sans-serif;3 color: #333;4 }

Sass/SCSS 和純 CSS 寫法差很多嗎？
Sass 和 CSS 寫法有差別：
Sass 和 CSS 寫法的確存在一定的差異，由于 Sass 是基于 Ruby 寫出來，所以其延續了 Ruby 的書寫規范。在書寫 Sass 時不帶有大括號和分號，其主要是依靠嚴格的縮進方式來控制的。如：
Sass寫法：

body color: #fff background: #f36

而在 CSS 我們是這樣書寫：

body{ color:#fff; background:#f36;}

SCSS 和 CSS 寫法無差別：
SCSS 和 CSS 寫法無差別，這也是 Sass 后來越來越受大眾喜歡原因之一。簡單點說，把你現有的“.css”文件直接修改成“.scss”即可使用。

Sass安裝（windows版）

在 Windows 平臺下安裝 Ruby 需要先有 Ruby 安裝包，Ruby 的官網（http://rubyinstaller.org/downloads）下載對應需要的 Ruby 版本。

Ruby 安裝文件下載好后，可以按應用軟件安裝步驟進行安裝 Ruby。在安裝過程中，建議將其安裝在 C 盤下，在安裝過程中選擇第二個選項（不選中，就會出現編譯時找不到Ruby環境的情況），如下圖所示：

Ruby 安裝完成后，在開始菜單中找到新安裝的 Ruby，并啟動 Ruby 的 Command 控制面板，如下圖所示：

當你的電腦中安裝好 Ruby 之后，接下來就可以安裝 Sass 了。

通過命令安裝 Sass

打開電腦的命令終端，輸入下面的命令：

gem install sass

提醒一下，在使用 Mac 的同學，可能需要在上面的命令前加上"sudo"，才能正常安裝：

sudo gem install sass

查測 Sass 及更新

如何確認自己是否安裝 Sass 成功了呢？

sass -v

更新 Sass

gem update sass

卸載（刪除）Sass

gem uninstall sass

Sass 編譯

使用 Sass 進行開發在項目中還是引用“.css”文件，Sass 只不過是做為一個預處理工具，提前幫你做事情，只有你需要時候，他才有攻效。

Sass 的編譯有多種方法：

命令編譯

命令編譯是指使用你電腦中的命令終端，通過輸入 Sass 指令來編譯 Sass。這種編譯方式是最直接也是最簡單的一種方式。因為只需要在你的命令終端輸入：

單文件編譯：

sass <要編譯的Sass文件路徑>/style.scss:<要

多文件編譯：

sass sass/:css/

缺點及解決方法：

在實際編譯過程中，你會發現上面的命令，只能一次性編譯。每次個性保存“.scss”文件之后，都得重新執行一次這樣的命令。如此操作太麻煩，其實還有一種方法，就是在編譯 Sass 時，開啟“watch”功能，這樣只要你的代碼進行任保修改，都能自動監測到代碼的變化，并且給你直接編譯出來：

sass --watch <要編譯的Sass文件路徑>/style.scss:<要

例：

單文件轉換命令

sass style.scss style.css

單文件監聽命令

sass --watch style.scss:style.css

文件夾監聽命令

sass --watch sassstyle:stylesheets

我們一般常用的有 --style ， --sourcemap ， --debug-info 等。

sass --watch style.scss:style.css --style compactsass --watch style.scss:style.css --sourcemapsass --watch style.scss:style.css --style expanded --sourcemapsass --watch style.scss:style.css --debug-info

--style 表示解析后的css是什么格式，有四種取值分別為： nested 嵌套輸出方式， expanded 展開輸出方式， compact 緊湊輸出方式， compressed 壓縮輸出方式。

--sourcemap 表示開啟sourcemap調試。開啟sourcemap調試后，會生成一個后綴名為.css.map文件。

--debug-info 表示開啟debug信息，升級到3.3.0之后因為sourcemap更高級，這個debug-info就不太用了。

四種style生成后的css：

 1 // nested 2 #main { 3 color: #fff; 4 background-color: #000; 5 } 6 #main p { 7 width: 10em; 8 } 9 .huge {10 font-size: 10em;11 font-weight: bold;12 text-decoration: underline;13 }14 // expanded15 #main {16 color: #fff;17 background-color: #000;18 }19 #main p {20 width: 10em;21 }22 .huge {23 font-size: 10em;24 font-weight: bold;25 text-decoration: underline;26 }27 // compact28 #main { color: #fff; background-color: #000; }29 #main p { width: 10em; }30 .huge { font-size: 10em; font-weight: bold; text-decoration: underline; }31 // compressed32 #main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}

GUI編譯Sass，我用的是koala。

1. Koala (http://koala-app.com/)
2. Compass.app（http://compass.kkbox.com/）
3. Scout（http://mhs.github.io/scout-app/）
4. CodeKit（https://incident57.com/codekit/index.html）
5. Prepros（https://prepros.io/）

相比之下推薦使用以下兩個：

koala工具 http://koala-app.com/index-zh.html

sass文件需要以.scss來結尾。創建完成需要

把css文件拖到軟件中去，這樣就可以將sass轉化成css了

sass不支持中文

需要在 koala => rubygems => sass => lib => sass => engine.rb

engine.rb打開加入一句Encoding.default_external = Encoding.find('UTF-8')

sass配置，輸出一般用展開的形式就可以

自動化編譯

1、Grunt 配置 Sass 編譯的示例代碼

 1 module.exports = function(grunt) { 2 grunt.initConfig({ 3  pkg: grunt.file.readJSON('package.json'), 4  sass: { 5  dist: { 6   files: { 7   'style/style.css' : 'sass/style.scss' 8   } 9  }10  },11  watch: {12  css: {13   files: '**/*.scss',14   tasks: ['sass']15  }16  }17 });18 grunt.loadNpmTasks('grunt-contrib-sass');19 grunt.loadNpmTasks('grunt-contrib-watch');20 grunt.registerTask('default',['watch']);21 }

2、Gulp 配置 Sass 編譯的示例代碼

 1 var gulp = require('gulp'); 2 var sass = require('gulp-sass'); 3 4 gulp.task('sass', function () { 5 gulp.src('./scss/*.scss') 6  .pipe(sass()) 7  .pipe(gulp.dest('./css')); 8 }); 9 10 gulp.task('watch', function() {11 gulp.watch('scss/*.scss', ['sass']);12 });13 14 gulp.task('default', ['sass','watch']);

沒用過Grunt 、Gulp ，放兩個案例在這慢慢研究

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com