亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

scss語法格式：

body?{
??font:?100%?Helvetica,?sans-serif;
??color:?#333;
}

我們使用 SCSS 語法格式將按下面這樣來書寫：

$font-stack:?Helvetica,?sans-serif;
$primary-color:?#333;

body?{
??font:?100%?$font-stack;
??color:?$primary-color;
}

gem?uninstall?sass

sass -v

gem update sass

一、安裝Ruby

1.http://rubyinstaller.org/downloads下載對應需要的 Ruby 版本

2.建議安裝在C盤下，選中添加ruby到環境變量path（不選中就會出現編譯找不到Ruby環境的情況）。

3.Ruby安裝完成后，開始菜單找到新安裝的Ruby，并啟動Ruby的 Command 控制面板

二、安裝Sass

1. 打開電腦命令終端：gem install sass

2. Compass安裝Sass：Commpass是基于 Sass 開發的一個框架，即安裝了Compass，也就同時安裝好了Sass。終端：sudo gem install sass【Compass是成熟的、基于Sass開發的一個框架，繼承了很多寫好的mixins和Sass函數】

3. 本地安裝Sass：下載http://rubygems.org/gems/sass安裝包

4. 淘寶鏡像

   第一步：移動默認的源

5. gem?sources?--remove?https://rubygems.org/

   第二步：指定淘寶的源

6. gem?sources?-a?https://ruby.taobao.org/

   第三步：查看指定的源是不是淘寶源

7. gem?sources?-l

   返回結果如下：

8. ***?CURRENT?SOURCES?***
   https://ruby.taobao.org

   請確保只有 ruby.taobao.org。如果無誤之后，執行下面的命令：

9. gem?install?sass

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

改淘寶鏡像為：gem sources --add?https://gems.ruby-china.com/

gem sources -l

gem install sass

sass -v:返回Ruby Sass 3.7.4

重新觀看，勞資的筆記就沒了！??！

SCSS 和 CSS 寫法無差別：

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

Sass 語法

$font-stack:?Helvetica,?sans-serif??//定義變量
$primary-color:?#333?//定義變量

body
??font:?100%?$font-stack
??color:?$primary-color

SCSS 語法

$font-stack:?Helvetica,?sans-serif;
$primary-color:?#333;

body?{
??font:?100%?$font-stack;
??color:?$primary-color;}

-----------------------------------------------------

編寫第一個".scss"文件，在編輯器的第一行和第二行定義一個變量，并在body中調用對應變量來設置body大小尺寸？

body {

? ?width: 200px;

? height: 300px;

}

Sass 是最早的 CSS 預處理語言，不過其一開始的縮進式語法（Sass 老版本語法，后面課程會詳細介紹 ）并不能被大眾接受，不過由于其強大的功能和 Ruby on Rails 的大力推動，還是有很多開發者選擇了 Sass。

因此有著和 HTML 一樣的縮進式風格。

雖然縮進式風格可以有效縮減代碼量，強制規范編碼風格，但它一方面并不為大多數程序接受，另一方面無法兼容已有的 CSS 代碼。

$side : left;

.rounded {

? ? border-#{$side}-radius: 5px;

}

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

Sass、LESS?和?Stylus?最優秀

$color: red;

.test {

? ? color: $color;

}

1. 嵌套輸出方式 nested

2. 展開輸出方式 expanded ?

3. 緊湊輸出方式 compact?

4. 壓縮輸出方式 compressed

sass -v查看版本號

gem update sass更新sass

使用繼承后，編譯出來的 CSS 會將使用繼承的代碼塊合并到一起，通過組合選擇器的方式向大家展現，比如 .mt, .block, .block span, .header, .header span。這樣編譯出來的代碼相對于混合宏來說要干凈的多，也是 CSSer 期望看到。但是他不能傳變量參數。

個人建議：如果你的代碼塊不需要專任何變量參數，而且有一個基類已在文件中存在，那么建議使用 Sass 的繼承。

Sass 中的混合宏使用編譯出來的 CSS 清晰告訴了大家，他不會自動合并相同的樣式代碼，如果在樣式文件中調用同一個混合宏，會產生多個對應的樣式代碼，造成代碼的冗余，這也是 CSSer 無法忍受的一件事情。不過他并不是一無事處，他可以傳參數。

個人建議：如果你的代碼塊中涉及到變量，建議使用混合宏來創建相同的代碼塊。

繼承和占位符可以用取值方式調用，混合宏不可以

當你想設置屬性值的時候你可以使用字符串插入進來。另一個有用的用法是構建一個選擇器?？梢赃@樣使用：