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

熱門文章 (Popular Post)

Posted by : Duran Hsieh 1月 29, 2016

目錄

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 問題 : Web essentials 2015 does not compile automatically


前言

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

這篇簡單較少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







Leave a Reply

Subscribe to Posts | Subscribe to Comments

- Copyright © Duran Hsieh @ Matsurigoto - Date A Live - Powered by Blogger - Designed by Johanes Djogan -