<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>
          

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>
          

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>
          

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>
                <ruby id="bdb3f"></ruby>
                
    


                
  
                                            
                                                                      
        
                
          ThinkChat2.0新版上線，更智能更精彩，支持會話、畫圖、視頻、閱讀、搜索等，送10W Token，即刻開啟你的AI之旅
          廣告
        
                        
                              
  

                

                
    
                
        
                
                            
[TOC]

****

# Sass 介紹
英文官網：http://sass-lang.com/
中文官網：https://www.sasscss.com/sass-guidelines/

因為你已經使用了 Node.js 來運行 Gulp 或 Grunt 和 PostCSS，所以使用 Sass 最簡單的方法就是使用`LibSass`。**而且LibSass編譯速度也要比Ruby Sass快很多**。在下面的教程中，將通過`gulp-sass`模塊來部署LibSass。


## 在線書寫
[SassMeister | The Sass Playground!](https://www.sassmeister.com/)
[an online Playground for Sass.js](http://sass.js.org/)

## RubyGems （gems）
RubyGems（簡稱 gems）是一個用于對 Ruby組件進行打包的 Ruby 打包系統。 它提供一個分發 Ruby 程序和庫的標準格式，還提供一個管理程序包安裝的工具。

其包含包信息，以及用于安裝的文件。
Gem通常是依照`.gemspec`文件構建的，包含了有關Gem信息的YAML文件。
Ruby代碼也可以直接建立Gem，這種情況下通常利用Rake來進行。

RubyGems 旨在方便地管理 gem 安裝的工具，以及用于分發 gem 的服務器。

RubyGems 大約創建于2003年11月，從Ruby 1.9版起成為Ruby標準庫的一部分。

如果你的 Ruby 低于 1.9 版本，也可以通過手動安裝:
首先下載安裝包：https://rubygems.org/pages/download 。
解壓并進入目錄，執行命令：
~~~
ruby setup.rb
~~~

## 更新 RubyGems 命令：
~~~
$ gem update --system          # 需要管理員或root用戶
~~~

## gem命令
`gem`命令用于構建、上傳、下載以及安裝Gem包。

## gem用法
RubyGems 在功能上與 Python 的 `pip`、Ubuntu 下的`apt-get`、Centos 的 `yum` 、`portage`和 `npm `非常相似。

# 教程
## `@import` 導入:
sass的導入(`@import`)規則和 CSS 的有所不同，編譯時會將`@import`的 scss 文件合并進來只生成一個 CSS 文件。

但是如果你在 sass 文件中，導入時有以下情況：
1. 導入 css 文件如`@import 'reset.css'`
2. 文件名以 http 開頭；
3. 文件名 是 url()；
4. 帶有任何媒體查詢（screen，media queries）

那效果**跟普通CSS導入樣式文件一樣**，導入的css文件不會合并到編譯后的文件中，而是以`@import`方式存在。

所有的sass導入文件都可以忽略后綴名`.scss`。一般來說基礎的文件命名方法以`_`開頭，如`_mixin.scss`(不會被編譯出單獨文件）這種文件在導入的時候可以不寫下劃線，可寫成`@import "mixin"`。

## 注釋
sass有兩種注釋方式，一種是標準的css注釋方式`/* */`，另一種則是`//`雙斜桿形式的單行注釋，不過這種單行注釋不會被轉譯出來。

## 變量
sass的變量必須是`$`開頭，后面緊跟變量名，而變量值和變量名之間就需要使用冒號 `:` 分隔開（就像 CSS 屬性設置一樣），如果值后面加上`!default`則表示默認值。?sass 的默認變量一般是用來設置默認值，然后根據需求來覆蓋的，覆蓋的方式也很簡單，只需要在默認變量之前重新聲明下變量即可。




# 其他實現
## [LibSass](https://github.com/sass/libsass)

libsass 是一個用 C 語言實現的 Sass 解析器。特點是簡單、速度快而且易于集成。

## [node-sass](https://github.com/sass/node-sass)

node-sass 是綁定了 libsass 的為 node.js 實現的 庫，可以極快的自動將 `.scss` 文件編譯為 `.css` 文件。

## [gulp-sass](https://github.com/dlmanning/gulp-sass)
輕巧的包裹了 `node-sass` 來實現相應的功能，如果使用時你遇到問題，那么問題可能來自：`libsass`或者`Sass`。

## [Susy](http://oddbird.net/susy/)

Susy 是一款用來為網站創建柵格布局的工具，它所帶來的靈活和灑脫超乎想象。無論是 5 列，14 列，還是 48 列，一切都不是問題。不等寬列？So easy。

## [precss](https://github.com/jonathantneal/precss)
precss 囊括了許多插件來通過 PostCSS 支持類似 Sass 的特性，比如 CSS 變量，套嵌，mixins 等。

## [scss-lint](https://github.com/brigade/scss-lint)
可配置的工具，用于編寫干凈和一致的SCSS


# 工具
隨著sass的發展也越來越成熟，以及autoprefixer這樣的后處理的出現。好像也使得`compass`,`bourbon`這樣的庫地位越來越尷尬。而 `compass` 也早在2015年就停止了維護。
需不需要使用 `bourbon` 這樣的工具庫，每個人的需求也都不相同，大家可以自行選擇。

## [Compass](https://github.com/Compass/compass)
`Sass`本身只是一個編譯器，`Compass`在它的基礎上，封裝了一系列有用的模塊和模板，補充`Sass`的功能。它們之間的關系，有點像`Javascript`和`jQuery`、`Ruby`和`Rails`、`python`和`Django`的關系。
對我來說，Compass一個最大的特性是，解決了瀏覽器前綴的問題。不用擔心沒輸入瀏覽器前綴而引起的瀏覽器渲染問題。
（！！！已經停止維護）
[Compass用法指南](http://www.ruanyifeng.com/blog/2012/11/compass.html)
[Sass Frameworks: Compass or Bourbon?](https://www.sitepoint.com/compass-or-bourbon-sass-frameworks/)
[我為什么不再用Compass寫CSS（缺點分析）](http://ourjs.com/detail/54ed5397232227083e000035)

## Bourbon
類似于`compass`，[Bourbon](http://bourbon.io/)  是一個輕量級的`SASS mixin`庫。官方介紹說`bourbon`有以下三個優勢：
*   沒有第三方依賴，是純凈的sass
*   文檔簡潔明了，清晰易讀
*   輕量級

[bourbon使用](https://www.jianshu.com/p/667ecffec802)

## Bitters
http://bitters.bourbon.io/

## Susy

http://susy.oddbird.net/

## [jeet](http://jeet.gs/)

## Rucksack
[Rucksack](https://github.com/seaneking/rucksack) 是一款有趣的CSS工具，讓CSS的開發過程更加有趣了。Rucksack 是基于PostCSS構建的，模塊化設計，沒有冗余，運行起來飛快。將Rucksack融入到你的開發流程是很簡單的，Rucksack對絕大多數的工具都有相應的插件。由于它是基于PostCSS來構建的，所以它同其他的CSS處理工具都能很好的兼容，甚至能夠同Stylus直接協同。


[25 Essential Sass and Compass Tools](https://mashable.com/2013/06/11/sass-compass-tools/)
codepen 上還有css有趣插件

# 編寫規范
[編寫穩健、可維護和可擴展的 Sass](https://sass-guidelin.es/zh/)
[rscss 的中文翻譯](https://github.com/suhaotian/rscss-zh-cn)
這篇文檔適合有一定 sass 經驗的人閱讀 ：)


# 參考
[sass在線玩耍](https://www.sassmeister.com/)
[使用Susy構建Web布局更簡單](http://cdn1.w3cplus.com/node/1509)

                    
                
        
                
            
        
                
    
                
    
                
        
                
    
                

                







                  <ruby id="bdb3f"></ruby>
                  <p id="bdb3f"><cite id="bdb3f"></cite></p>
                    

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>
                        

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>
                        

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>
                        

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>
                              <ruby id="bdb3f"></ruby>
                              

哎呀哎呀视频在线观看