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

熱門文章 (Popular Post)

Posted by : Duran Hsieh 2016-01-29


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:

    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.呈現結果

  2. Extend:

    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:

    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.



Leave a Reply

Subscribe to Posts | Subscribe to Comments

- Copyright © Duran Hsieh @ Duran 的技術冶煉廠 - Date A Live - Powered by Blogger - Designed by Johanes Djogan -