❶ 動態樣式語言Scss&Less介紹與區別
一. Sass/Scss&Less是什麼？
Sass (Syntactically Awesome Stylesheets)是一種動態樣式語言，語法跟css一樣(但多了些功能)，比芹悶談css好寫，而且更容易閱讀。Sass語法類似與Haml，屬於縮排語法（makeup），用意就是為了快速寫Html和Css。
Less一種動態樣式語言. 將CSS賦予了動態語言的特性，如變數，繼承罩肆，運算， 函數. LESS 既可以在客戶端上運行 (支持IE 6+, Webkit, Firefox)，也可一在服務端運行 (藉助 Node.js)。less英文站需要翻牆，也可以訪問中文站
Sass與Scss有什麼差別
Sass原先跟Haml一樣的縮排語法，對於寫慣Css的前端來說是很不直觀的，也不能將原來的Css加到Sass裡面，因此Sass改良了語法，Sass 3就變成了Scss(Sassy CSS)。與原來的語法兼容，只是用{}取代了原來的縮進。
二. Sass/Scss&Less區別？
1.Sass是基於Ruby的，是在服務端處理的，而Less是需要引入嫌碰less.js來處理Less代碼輸出Css到瀏覽器，也可以在開發環節使用Less，然後編譯成Css文件，直接放到項目中，也有Less.app、SimpleLess、CodeKit.app這樣的工具，也有在線編譯地址。
2.變數符不一樣，less是@，而Scss是$，而且變數的作用域也不一樣，後面會講到。
3.輸出設置，Less沒有輸出設置，Sass提供4中輸出選項：nested, compact, compressed 和 expanded。
4.Sass支持條件語句，可以使用if{}else{},for{}循環等等。而Less不支持。
❷ react+webpack+scss 怎麼編譯css獨立文件
處理scss文件需要 sass-loader
npm install sass-loader node-sass --save-dev
【注】 以下配置中需豎鬧要用到的模塊，請自行安裝旅拆
extract-text-webpack-plugin
postcss-loader
precss
autoprefixer
然後在webpack.config.js文件做以下配置
/拆纖棗/css文件提取器需要的插件var ExtractTextPlugin=require('extract-text-webpack-plugin');//postcss-loader 需要的配置項var precss = require('precss');var autoprefixer = require('autoprefixer');mole.exports = { ... mole: { loaders: [ { test: /\.scss$/, loader: ExtractTextPlugin.extract('style','css!postcss-loader','sass')} ] }, postcss: function () { return [precss, autoprefixer]; }}
❸ webstorm 編譯 scss 文件報錯
打開webstorm創建空項目，點擊「File」菜單選擇「Setting」，搜索「watcher」關鍵字，
點擊右邊綠色加號，選擇「SCSS」文件類型。
輸入監視文件類型名稱(隨便寫)，關鍵第二個選項，一定要選擇ruby安裝目錄bin文件下的scss.bat文件
最後，創建.scss文件輸入scss css代碼，保存後會生成後綴.css文件，就可以了。
❹ windows7怎麼編譯scss
Sass 是對 CSS 的擴展備鉛散，讓 CSS 語言更強仿氏大、優雅。 它允許你使用變數、嵌套規則激宴、 mixins、導入等眾多功能， 並且完全兼容 CSS 語法：
http://jingyan..com/article/86f4a73e83654a37d752696c.html
❺ 如何安裝並編譯sass為css文件
Ruby安裝
由於sass依賴於ruby環渣唯境，所乎褲以在安裝sass之前必須安裝ruby。可以去官網下載一個。網路環境不好的，可以用我提供的這個文件：點擊下載
安裝完成後可以在開始菜單找到ruby命令行，打開輸入ruby -v查看版本號，出現版本信息則安裝成功
clipboard.png-6.6kB
QQ截圖20160917210342.png-1.6kB
Sass安裝
安裝完ruby後，可以直接在命令行裡面輸入gem install sass安裝Sass，不過由於牆的厲害，建議使用淘寶的ruby源來安裝，步驟如下：
gem sources --remove https://rubygems.org/
https://rubygems.org/ removed from sources
gem sources -a https://ruby.taobao.org/
https://ruby.taobao.org/ added to sources
這一步有可能會出錯，windows下證書無法驗證。
解決方法：下載證書（右鍵另存為即可），放到ruby安裝目錄下，然後再設置環境變數SSL_CERT_FILE為該文件路徑，再重新輸入該命令
QQ截圖20160917211759.png-8.6kB
gem source -l
*** CURRENT SOURCES ***
https://ruby.taobao.org/
gem install sass
Fetching: sass-3.4.13.gem (100%)
Successfully installed sass-3.4.13
Parsing documentation for sass-3.4.13
Installing ri documentation for sass-3.4.13
Done installing documentation for sass after 12 seconds
1 gem installed
//如果你在安裝時出現如下提示，歲梁簡則表明網路不佳或源沒有切換到 ruby.taobao.org
ERROR: Could not find a valid gem 'sass' (>= 0), here is why:
Unable to download data from https://rubygems.org/ - SSL_connect returned=1 errno=0 state=SSLv3 read server certificate B: certificate verify failed (
https://api.rubygems.org/latest_specs.4.8.gz)
sass -v
Sass 3.4.13 (Selective Steve)
到此，所有的安裝都結束了。接下來我們就可以直接編譯sass文件了
Sass編譯
打開ruby命令行，切換到scss文件所在目錄，執行sass style.scss style.css,就可以將style.scss文件編譯成style.css文件
❻ 用compass編譯sass,進入目錄後執行compass watch 後然後書寫scss文件卻沒有進行編譯，這是怎麼回事呢
您好，這樣的：
Sass的安裝:
1.安裝：SASS是Ruby語言寫的，但是兩者的語法沒有關系。不懂Ruby，照樣使用。只是必須先安裝Ruby，然後再安裝SASS。
假定你已經安裝好了Ruby，接著在命令行輸入下面的命令：
gem install sass
然後，就可以使用了。
2：使用：
SASS文件就是普通的文本文件，裡面可以直接使用CSS語法。文件後綴名是.scss，意思為Sassy CSS。SASS提供兩種編譯方式，一種是手動編譯，一種是監視編譯(–watch)，手動編譯就是當你撰寫好CSS時下指令去做編譯，監視編譯則是你指令一個目錄，當此目錄裡面的*.scss檔案有改變時（新增、覆寫等等），就會自動去做編譯的動作。先來講手動編譯方式：
下面的命令，可以在屏幕上顯示.scss文件轉化的css代碼。（假設文件名為test。）
sass test.scss
如果要將顯示結果保存成文件，後面再跟一個.css文件名。
sass test.scss test.css
SASS提供四個編譯風格的選項：
* nested：嵌套縮進的css代碼，它是默認值。
* expanded：沒有縮進的、擴展的css代碼。
* compact：簡潔格式的css代碼。
* compressed：壓縮後的css代碼。
生產環境當中，一般使用最後一個選項。
sass –style compressed test.sass test.css
還有一種監視的方式做編譯，在命令行中切換到當前sass或者scss文件所在的目錄，然後運行
sass –watch scss:css
SASS的官方網站，提供了一個在線轉換器。你可以在那裡，試運行下面的各種例子。
Compass的安裝:
1.安裝：安裝ruby之後，輸入命令
gem install compass
2.使用：創建一個 COMPASS 項目
在命令行中切換到你需要創建項目的目錄，運行：
compass create "projectname"
這個命令會創建一個包含一系列文件的目錄，其中最重要的是配置文件 config.rb，其他文件如果你不需要都可以刪除。
在 config.rb 中你可以修改 SASS 和 CSS 的目錄及其它一些基礎設置。
實時編譯 SASS 文件
COMPASS 提供的默認方法是：
在命令行下切換到項目目錄，運行
compass watch
COMPASS 將會實時監控 SASS 目錄的文件變化，只要你一保存文件，立即將相應文件編譯為 CSS 文件。
❼ 用koala編譯scss失敗，出錯是怎麼回事
我櫻飢最近也在學sass，之前用的是sublime test2，這個編譯器有個好處就是轉譯成css的時候方便，但是終究還是和項目分離，也很麻煩。後來發現只要通過命令行一直監視整個目錄或者念橋文件就方便多了，只要保存，sass就脊高返會自動編譯，