Sass學習筆記

版權聲明：本文爲博主原創文章，未經博主允許不得轉載。 https://blog.csdn.net/FKCSSS/article/details/50402322

安裝：

1.依賴ruby開發環境,下載ruby安裝並且配置ruby環境變量。

2.打開ruby的命令窗口（Start Command Prompt with Ruby)

輸入gem install sass

@gem install sass --pre(要安裝beta版本的)

@gem update sass 升級

sass -v 

sass -h

Git安裝：

git clone git://github.com/nex3/sass.git

cd sass

rake install

淘寶鏡像安裝：

$ gem sources --remove https://rubygems.org/

$ gem sources -a https://ruby.taobao.org/

$ gem sources

>> https://ruby.taobao.org

$ gem install sass

編譯：(當前文件目錄cmd命令窗口)

單文件轉換命令 sass style.scss style.css
單文件監聽命令 sass --watch style.scss:style.css
文件夾監聽命令 sass --watch sassFileDirectory:cssFileDirectory
css文件轉成sass/scss文件： sass-convert style.css style.scss
css格式類型：nested(默認的)，expanded(喜歡)，compact(多行)，compressed(壓縮)
sass --watch style.scss:style.css --style compact
編譯類型：--sourcemap(推薦生成後綴名.css.map文件)，--debug-info
sass --watch style.scss:style.css --sourcemap
sass --watch style.scss:style.css --style expanded --sourcemap
sass --watch style.scss:style.css --debug-info

sublime:

1. shift+ctrl+p:選擇install Package
2. 再輸入Sass 選擇安裝
3. 再輸入Sass build 選擇安裝
4. ctrl+b 編譯
5. 打開tools >> Build system >> SASS 或者 SASS Compressed(css壓縮格式)

   
語法：

文件後綴名：sass(沒有大括號和分號)和scss(推薦)。
文件導入：@import 'reset' 不要加.scss後綴名。
註釋：/**/或者//(不會顯示在css文件裏面)。
變量：$fontSixe: 12px。
默認變量: $fontSize: 14px !default; 可以被普通變量覆蓋掉。
特殊變量：#{$fontSize}相當於字符串。

多值變量：

list:

$linkColor: #08c #333;

a{

 color:nth($linkColor,1);

 &:hover{

   color:nth($linkColor,2);

 }

}

  Map:
    $headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
嵌套：

選擇器嵌套（常用）&表示父類選擇器

屬性嵌套

.fakeshadow {

border: {

style: solid;

left: {

 width: 4px;

 color: #888;

}

right: {

 width: 2px;

 color: #ccc;

}

}

}

跳出嵌套：@at-root

混合：@mixin @include

 示例：

 @mixin opacity($opacity:50) {

 opacity: $opacity / 100;

 filter: alpha(opacity=$opacity);

 }

 .opacity{

 @include opacity; //參數使用默認值

 }

 .opacity-80{

   @include opacity(80); //傳遞參數

 }

 @content：解決@media的問題

 @mixin max-screen($res){

 @media only screen and ( max-width: $res )

 {

   @content;

 }

 }

@include max-screen(480px) {

 body { color: red }

}

//-------------------------------

@media only screen and (max-width: 480px) {

 body { color: red }

} 

繼承:

@extend

h1{

 border: 4px solid #ff9aa9;

}

.speaker{

 @extend h1;

 border-width: 2px;

}

//---------------------------------

h1,.speaker{

 border: 4px solid #ff9aa9;

}

函數：

$baseFontSize:      10px !default;

$gray:              #ccc !defualt;        

// pixels to rems 

@function pxToRem($px) {

 @return $px / $baseFontSize * 1rem;

}

body{

 font-size:$baseFontSize;

 color:lighten($gray,10%);

}

.test{

 font-size:pxToRem(16px);

 color:darken($gray,10%);

}

運算，條件判斷(@if),三目判斷(if)，循環(@for,@each)