一 什么是sass sass是一種css開發工具。提供了很多便利的寫法，使得css開發變得簡單 ?易維護 sass有兩種后綴名文件：一種后綴名為sass，不使用大括號和分號；另一種就是我們這里使用的scss文件，這種和我們平時寫的css文件格式差不多，使用大括號和分號，所以一般都是用第二種寫法 二 官網 ：http://sass-lang.com/documentation/file.SASS_REFERENCE.html 阮一峰博客（sass部分）：http://www.ruanyifeng.com/blog/2012/06/sass.html 三 ruby安裝

因為sass依賴于ruby環境，所以裝sass之前先確認裝了ruby。先導官網下載個ruby

在安裝的時候，請勾選Add Ruby executables to your PATH這個選項，添加環境變量，不然以后使用編譯軟件的時候會提示找不到ruby環境

四 sass安裝

然后直接在命令行中輸入

gem install sass

　　

按回車鍵確認，等待一段時間就會提示你sass安裝成功。最近因為墻的比較厲害，如果你沒有安裝成功，那么請參考下面的淘寶的RubyGems鏡像安裝sass，如果成功則忽略。

如果要安裝beta版本的，可以在命令行中輸入

gem install sass --pre

　　

你還可以從sass的Git repository來安裝，git的命令行為

git clone git://github.com/nex3/sass.git cd sass rake install

　　

升級sass版本的命令行為

gem update sass

　　

查看sass版本的命令行為

sass -v

　　

你也可以運行幫助命令行來查看你需要的命令

sass -h

　　

淘寶RubyGems鏡像安裝?sass 由于國內網絡原因，導致 rubygems.org 存放在 Amazon S3 上面的資源文件間歇性連接失敗。這時候我們可以通過gem sources命令來配置源，先移除默認的https://rubygems.org源，然后添加淘寶的源https://ruby.taobao.org/，然后查看下當前使用的源是哪個，如果是淘寶的，則表示可以輸入sass安裝命令gem install sass了，關于常用gem source命令可參看：常用的gem source $ gem sources --remove https://rubygems.org/ $ gem sources -a https://ruby.taobao.org/ $ gem sources -l *** CURRENT SOURCES ***
https://ruby.taobao.org # 請確保只有 ruby.taobao.org $ gem install sass 淘寶鏡像也不好用了 gem sources --remove https://rubygems.org/gem sources -a http://gems.ruby-china.org/gem sources -l 五 使用 ?? sass文件就是普通的文本文件 ? 里面可以直接使用css語法。后綴名為.scss?? ? （Sassy ?css） 下面的命令，可以在屏幕上顯示.scss文件轉化的css代碼。（假設文件名為test。） sass test.scss

　

如果要將顯示結果保存成文件，后面再跟一個.css文件名。 sass?test.scss test.css sass?提供4種編譯風格的選項 nested ?嵌套縮進的css代碼。是默認值 expanded ?沒有縮進 擴展的css代碼 compact ?簡潔格式的css代碼 compressed ?壓縮后的css代碼 生產環境中，一般使用最后一個選項：?sass?--style compressed test.scss test.css sass官方的在線轉換器：http://www.sassmeister.com/ sass?也可以監聽文件，一旦文件被改動，就自動生成編輯后的版本 sass --watch test.scss:test.css

　　

監聽文件夾： sass --watch sassFileDirectory:cssFileDirectory

　　

六 基本用法 ? ? ?6.1 變量(在選擇器中聲明的變量會覆蓋全局聲明的變量) ? ? ? ? ??任何可以用作css屬性值的賦值都 可以用作sass的變量值，甚至是以空格分割的多個屬性值，如$basic-border: 1px solid black;，或以逗號分割的多個屬性值，如$plain-font: "Myriad Pro"、Myriad、"Helvetica Neue"、Helvetica、"Liberation Sans"、Arial和sans-serif; sans-serif;變量聲明后被引用才算生效。
?6.1.1 sass所以的變量以$開頭 ?變量名中的中劃線和下劃線相互兼容 $blue:#1875e7;div{color:$blue;} 6.1.2 如果變量需要鑲嵌在字符串之中 ? 就必須寫在#{}之中 $left:left;.rounded {border-#{$left}-radius:5px;}

　　

? ? ? ? ? ? ? ?? 6.1.3?默認變量：sass的默認變量僅需要在值后面加上!default即可。?sass的默認變量一般是用來設置默認值，然后根據需求來覆蓋的，覆蓋的方式也很簡單，只需要在默認變量之前重新聲明下變量即可 ? 6.1.4 多值變量 ?6.1.4.1 ?list類型 list數據可通過空格，逗號或小括號分隔多個值，可用nth($var,$index)取值 $px: 5px 6px 8px 10px;//一維數組 $pxT: 10px 20px , 30px 40px;//二維數組 $trpx:(1px solid #eee ) (16px solid #aaa);//二維數組.class8 {font-size: nth($px,3); } .class9 {border: nth($trpx,1); } .class10 {margin: nth($pxT,2); }

　　

6.1.4.2 ?map類型 map數據以key和value成對出現，其中value又可以是list。格式為：$map: (key1: value1, key2: value2, key3: value3);。可通過map-get($map,$key)取值。 $headings:(h1:2em,h2:1.5em,h3:1em); .class11 {font-size: map-get($headings,h2); }@each $heade , $size in $headings {#{$heade} {font-size: $size;} }

　　

6.2 可使用算術 $var:10;body{margin:(14px/2);top:50px+100px;right:$var*10%;}

　　

6.3 嵌套 ? 6.3.1選擇器嵌套：
div{color:$blue;h1 {color:red;}}

　　

?6.3.2屬性嵌套： p {border:{color:red;}}}

　　

此時 ?border后面的冒號必須加
??6.3.3&引用父元素 a {&:hover {color:red;}} #content aside { color: red;body.ie & { color: green }}

　　

6.3.4 群組選擇器的嵌套 ? ? ? ? ? ? ? ? ? ? ? ? .container { h1, h2, h3 {margin-bottom: .8em} }nav, aside { a {color: blue} }

　　

? ???6.4注釋 中文注釋的報錯，亂碼的問題解決： 步驟：1、找到下面這個文件C:\Ruby22-x64\lib\ruby\gems\2.2.0\gems\sass-3.4.22\lib\sass\engine.rb ? ???即自己的安裝目錄路徑 2、找到require 'sass/supports'這一行，在下面一行添加Encoding.default_external = Encoding.find('utf-8')

標準的CSS注釋 /* comment */ ，會保留到編譯后的文件。

單行注釋 // comment，只保留在SASS源文件中，編譯后被省略。

在/*后面加一個感嘆號，表示這是"重要注釋"。即使是壓縮模式編譯，也會保留這行注釋，通常可以用于聲明版權信息。

　/*! 重要注釋！*/

　　

七 ?代碼的重用 ? ? ?7.1繼承 sass可以實現選擇器的繼承 .class1 {border: 1px solid #ddd;}.calss2 {@extend .class1;font-size: 20px;}

　　

結果截圖： 7.2 sass代碼塊的重用 使用@mixin命令 ? 定義一個代碼塊 ? 例如下面的left @mixin left {float: left;margin-left: 10px;}

　　

使用@include命令 ?調用這個mixin .class3 {@include left;}

　　

@mixin 還可以指定參數和缺省值 @mixin right($value:10px) {float: right;margin-right: $value;}

　　

使用的時候，根據需要加入參數： .class5 {@include right() }

　　

如果不傳參數，就是默認值 .class4 {@include right(40px) }

　　

常用于：生產瀏覽器前綴 @mixin rounded ($vert,$horz,$radius:10px) {border-#{$vert}-#{$horz}-radius:$radius;-moz-border-#{$vert}-#{$horz}-radius:$radius;-webkit-border-#{$vert}-#{$horz}-radius:$radius; } .nav {@include rounded(top,left) } .footer {@include rounded(top,left,5px) }

　　

多組值參數mixin

如果一個參數可以有多組值，如box-shadow、transition等，那么參數則需要在變量后加三個點表示，如$variables...。 @mixin box-shadow ($shadow...) {-webkit-box-shadow:$shadow;box-shadow: $shadow; }

　　

@content: 使@mixin接受一整塊樣式，接受的樣式從@content開始 @mixin max-screen ($res) {@media only screen and (max-width: $res) {@content;} } @include max-screen(480px) {body {color:red;} }

　　

7.3 顏色函數 lighten(#cc3, 10%) // #d6d65cdarken(#cc3, 10%) // #a3a329grayscale(#cc3) // #808080complement(#cc3) // #33c

　　

7.4 插入文件 @import?命令可以插入外部文件 scss文件：@import 'path/name.scss' css文件：@import 'name.css'? 8 高級用法 ? ????8.1 條件語句 @if ?可以用來判斷 ? ? 配套的還有@else命令 .class6 {@if 1+1 == 2 {color:red}@if 5 < 3 {color:blue}@else {background-color: #FFF} }

　　

8.2循環語句 8.2.1 for循環 ??for循環有兩種形式，分別為：@for $var from <start> through <end>和@for $var from <start> to <end>。$i表示變量，start表示起始值，end表示結束值，這兩個的區別是關鍵字through表示包括end這個數，而to則不包括end這個數。 @for $i from 1 to 10 {.border-#{$i} {border: #{$i}px solid red;} }

　　

8.2.2 while $i:6; @while $i > 0 {.item-#{$i} {width:20px;}$i:$i - 2; }

　　

8.2.3 each? @each $member in a,b,c,d {.#{$member} {background-image: url("/image/#{$member}.jpg");} }

　　

8.3 自定義函數 @function ?@return @function double($n) {@return $n * 2; } .class7 {width: double(5px); }

　　

8.4 @at-root ?為了跳出選擇器嵌套的。默認所以得嵌套，繼承所有上級選擇器。但有了這個就可以跳出所有上級選擇器。 //單個選擇器跳出 .parent {color:red;@at-root .child {width: 100px;} } //多個選擇器跳出 .parent2 {color:blue;@at-root {.child1 {width: 100px;}.child2 {width: 200px;}} }

　　

??8.4.1默認@at-root只會跳出選擇器嵌套，而不能跳出@media或@support，如果要跳出這兩種，則需使用@at-root (without: media)，@at-root (without: support) //跳出父級元素嵌套 @media print {.parent2 {color: red;@at-root .child3 {color: blue;}} }//跳出media嵌套 父級有效 @media print4 {.parent4 {color: red;@at-root (without: media) {.child4 {width: 200px;}}} }//跳出media和父級 @media print5 {.parent5 {color:red;@at-root (without:all) {.child5{height: 200px;}}} }

　　

8.4.2 ?@at-root 于 & 配合使用 .child6 {@at-root .parent6 & {height: 300px;} }

　　

8.4.3占位選擇器% 從sass 3.2.0以后就可以定義占位選擇器%。這種選擇器的優勢在于：如果不調用則不會有任何多余的css文件，避免了以前在一些基礎的文件中預定義了很多基礎的樣式，然后實際應用中不管是否使用了@extend去繼承相應的樣式，都會解析出來所有的樣式。占位選擇器以%標識定義，通過@extend調用。 %ir {color:transparent;text-shadow:none;background-color: transparent;border:0; } %clearfix {@if $ie7 {*zoom :1;}&:before,&:after {content: "";display: table;font: 0/0;}&:after {clear: both;} } #header {width: 2100px; @extend %ir; } .ir {@extend %ir; }

　　

九 編譯? ? ? ?? ? 9.1?sublime裝SASS build插件，可以在sublime的packages文件夾下打開終端從github的https://github.com/jaumefontal/SASS-Build-SublimeText2.git上clone。然后編輯.scss直接保存即可編譯 9.2?官方的在線轉換器：http://www.sassmeister.com/ ?9.3??在項目的scss文件夾下用終端命令 9.4 ?據說webstorm內置了sass的編譯 9.5??圖形化工具 koala 9.6 ?gulp

?

轉載于:https://www.cnblogs.com/lhy-93/p/5473377.html

總結

以上是生活随笔為你收集整理的sass安装 使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。