[Sass][Visual Studio] SASS 語法介紹2 (Import, Extend, Comment, error , and @debug and @warn)

  • 661
  • 0
  • 2016-02-14

簡單介紹使用方法2

目錄

1. SASS 基本介紹與安裝 (An introduction to SASS and Using SASS with Visual Studio) 
2. SASS 語法介紹1 (Variable, Mixin, and Nest structure)
3. SASS 語法介紹2 (Import, Extend, Comment, error , and @debug and @warn)
4. SASS 進階使用 (Mathematical calculations, Selector(%), Parent selectors, List)
5. SASS 進階使用 (Media, color function, If condition, loop(@for, @each), key-value mapping )
6. SASS 實作 : Refactor MVC base website CSS

 

前言

最近因為家裡事務繁忙天氣太冷,拖這麼久才寫第三篇,真是不好意思。

這篇簡單較少ImportExtendErrorCommentdebug/warn Message
其中debug/warn Message部分因為個人安裝 web essentials,還不知道怎麼將
這些訊息放在output window,在這篇沒有成現結果,等之後了解如何在visual studio
呈現訊息後,在補放上來。(或者有強者看到,可以指點一下,謝謝!)

此篇文章同步發布個人部落格與點部落,如果有錯誤希望前輩們不吝指教,謝謝!

 

 

實作

 

  1. Import:
    我們可以使用@import指令,將scss程式從其他檔案進行匯入,方法如下:
    We can use @import to include scss code from other files.
    Step.1 右鍵點選專案,點選Add -> New Item。
                Right click project, select "Add" ->  "New Item".

    Step 2. 選擇SCSS Style Sheet(SASS), 檔名輸入_variable.scss.
                 Select SCSS Style Sheet(SASS), name _variable.scss

    Step 3. 將變數區塊從site.csss移到_variable.scss。
                Move the variable section(as blow) from site.csss to _variable.scss.


    Step4. 在site.scss輸入下列指令          
                Enter code as below at stie.scss.          
                @import '_variable';

    Step 5.呈現結果
               Resutle:
  2. Extend:
    我們可以使用@extend指令進行繼承其他css程式區塊
    We can use @extend command to inheritance other css code section
    Step 1.我們增加一個.div的樣式,.first-div、.second-div與.third-div會需要使用到。
                We add .div style in site.scss file, first-div、.second-div, and .third-div will need that.
  3. Error:
    如果編譯錯誤,css檔案會出現錯誤註解
    When compilation error occur, there are error message in css file.
  4. comment
       多行註解 /**/ 經過編譯後,會呈現在css檔案內
       單行註解 // 經過編譯後,部會呈現在css檔案內
        Multi line comment /**/ will be display in css file after scss compile.
        Single line comment // will not be display in css file after scss compile.
  5. Debug/Warn Message:
       你可以使用@debug 與 @warn 在編譯的時候顯示訊息
       You can use @debug and @warn output message when scss compile.

範例程式下載

https://dl.dropboxusercontent.com/u/13585157/SassDemo3.rar