sass學習筆記--摘錄

//$a: Helvetica, sans-serif

//$b: #333

//

//body

//font: 100% $a

//color: $b

//$a: red

//body

//color: $a

$a : red

.box

  color :   $a

 

color前的空格必須，red和$a前的空格必須

 

能夠用koala快速執行編譯輸出

--- http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html

 

嵌套輸出方式 nested

一、嵌套輸出方式 nested

Sass 提供了一種嵌套顯示 CSS 文件的方式。例如

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

在編譯的時候帶上參數「 --style 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; }

以下圖所示：

 

 

 

 

先安裝ruby默認c盤。而後add path 勾選--接着gem install sass 安裝sass或者使用淘寶ruby gems鏡像安裝sass

 

gem soureces -r https://rubygems.org/

 

gem soureces -a https://ruby.taobao.org/

 

gem sources -l

 

gem list 查看安裝列表-----------------

 

gem sources 查看安裝源

 

 

compass 安裝

 

 

gem sources -a https://gems.ruby-china.org  安裝會報錯  協議錯誤什麼的：解決方法：

關於 Windows 下證書沒法驗證問題 (certificate verify failed)

ruby 沒有包含 SSL 證書，因此 https 的連接被服務器拒絕。

解決方法很簡單，首先在這裏下載證書 http://curl.haxx.se/ca/cacert.pem, 而後再環境變量裏設置 SSL_CERT_FILE 這個環境變量，並指向 cacert.pem 文件。

set SSL_CERT_FILE=C:\path\to\cacert.pem

 若是不會協議證書之類的話能夠： gem sources -a  http://gems.ruby-china.org

 

 

---

compass create sassDemo  建立sass環境

 

compass clean刪除環境部份內容

 

compass compile 新建

 

require 'compass/import-once/activate'

# Require any additional compass plugins here.

 

# Set this to the root of your project when deployed:

http_path = "/"     

 # 服務器路徑

css_dir = "stylesheets"

# css路徑

sass_dir = "sass"

# sass路徑

images_dir = "images"

# 圖片路徑

javascripts_dir = "javascripts"

# js路徑

 

compass watch  同步監測

 

npm install --global gulp  安裝gulp

 

 

1. 全局安裝 gulp：

$ npm install --global gulp

2. 做爲項目的開發依賴（devDependencies）安裝：

$ npm install --save-dev gulp

3. 在項目根目錄下建立一個名爲 gulpfile.js 的文件：

var gulp = require('gulp');

gulp.task('default', function() {
  // 將你的默認的任務代碼放在這
});

4. 運行 gulp：

$ gulp

安裝Sass和Compass

sass基於Ruby語言開發而成，所以安裝sass前須要安裝Ruby。（注:mac下自帶Ruby無需在安裝Ruby!）

window下安裝SASS首先須要安裝Ruby，先從官網下載Ruby並安裝。安裝過程當中請注意勾選Add Ruby executables to your PATH添加到系統環境變量。以下圖：

安裝完成後需測試安裝有沒有成功,運行CMD輸入如下命令：

ruby -v
//如安裝成功會打印ruby 2.2.2p95 (2015-04-13 revision 50295) [i386-mingw32]

如上已經安裝成功。但由於國內網絡的問題致使gem源間歇性中斷所以咱們須要更換gem源。（使用淘寶的gem源https://ruby.taobao.org/）以下：

//1.刪除原gem源
gem sources --remove https://rubygems.org/

//2.添加國內淘寶源
gem sources -a https://ruby.taobao.org/

//3.打印是否替換成功
gem sources -l

//4.更換成功後打印以下
*** CURRENT SOURCES ***
https://ruby.taobao.org/

Ruby自帶一個叫作RubyGems的系統，用來安裝基於Ruby的軟件。咱們可使用這個系統來 輕鬆地安裝Sass和Compass。要安裝最新版本的Sass和Compass，你須要輸入下面的命令：

//安裝以下(如mac安裝遇到權限問題需加 sudo gem install sass)gem install sass
gem install compass

在每個安裝過程當中，你都會看到以下輸出：

Fetching: sass-3.x.x.gem (100%)
Successfully installed sass-3.x.x
Parsing documentation for sass-3.x.x
Installing ri documentation for sass-3.x.x
Done installing documentation for sass after 6 secon
1 gem installed

安裝完成以後，你應該經過運行下面的命令來確認應用已經正確地安裝到了電腦中：

sass -v
Sass 3.x.x (Selective Steve)

compass -v
Compass 1.x.x (Polaris)
Copyright (c) 2008-2015 Chris Eppstein
Released under the MIT License.
Compass is charityware.
Please make a tax deductable donation for a worthy cause: http://umdf.org/compass

以下sass經常使用更新、查看版本、sass命令幫助等命令：

//更新sassgem update sass

//查看sass版本sass -v

//查看sass幫助sass -h

編譯SASS

sass編譯有不少種方式，如命令行編譯模式、sublime插件 SASS-Build、編譯軟件 koala、前端自動化軟件 codekit、Grunt打造前端自動化工做流 grunt-sass、Gulp打造前端自動化工做流 gulp-ruby-sass等。

2. 命令行編譯;

//單文件轉換命令sass input.scss output.css

//單文件監聽命令sass --watch input.scss:output.css

//若是你有不少的sass文件的目錄，你也能夠告訴sass監聽整個目錄：sass --watch app/sass:public/stylesheets

2-1. 命令行編譯配置選項;

命令行編譯sass有配置選項，如編譯事後css排版、生成調試map、開啓debug信息等，可經過使用命令sass -v查看詳細。咱們通常經常使用兩種--style--sourcemap。

//編譯格式sass --watch input.scss:output.css --style compact

//編譯添加調試mapsass --watch input.scss:output.css --sourcemap

//選擇編譯格式並添加調試mapsass --watch input.scss:output.css --style expanded --sourcemap

//開啓debug信息sass --watch input.scss:output.css --debug-info

• --style表示解析後的css是什麼排版格式;
  sass內置有四種編譯格式:nestedexpandedcompactcompressed。
• --sourcemap表示開啓sourcemap調試。開啓sourcemap調試後，會生成一個後綴名爲.css.map文件。

2-2. 四種編譯排版演示;

//未編譯樣式.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}

3. 軟件方式編譯;

這裏推薦koala&codekit,它們是優秀的編譯器，界面清晰簡潔，操做起來也很是簡單。鑑於koala是免費編譯器，簡單操做以下圖: