熱門文章 (Popular Post)

顯示具有 「Sass on Visual Studio 學習系列」 標籤的文章。 顯示所有文章

[Sass][Visual Studio] SASS 進階使用 (Media, color function, If condition, loop(@for, @each), key-value mapping )

By : Duran Hsieh

目錄

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


前言

本篇介紹的內容中 Media queries 比較特別,為CSS3的模組。個人在執行
專案的時候發現網站樣式中使用Media queries,進行了研究並在此篇做一個紀錄,讓自己印
象深刻,也提供大家參考。以下是這次介紹的內容:
  1. Media queries 
  2. Color function
  3. If condition
  4. Loop(@for, @each)
  5. Key-value mapping
此篇文章將同步發佈於點部落與個人部落格,如果有錯誤希望前輩們不吝指教,謝謝!


內容

  • Media Queries

CSS3模組,為響應式網站(Responsive web design)設計技術,目的為了提高網頁可用性,
讓網頁顯示能符合行動裝置銀幕與一般電腦銀幕,依據目前裝置或銀幕大小,調整網頁
顯式樣式。目前不支援IE8。
在CSS2稱為Media type,在CSS3稱為Media Queries。


Media Queries 使用方法如下(Usage):
Html embed:

CSS usage:
@media screen and (min-width: 670px)  {
      // css content
}



Media Queries 語法如下(Syntax):
@media [media type] and [media feature]

[media type] : braille | embossed | handheld | print | projection | screen | speech | tty | tv
[media feature] :  詳細請參考 -> Media queries
    - Can use Max/Min prefix:
        color | color-index | device-aspect-ratio | device-height  | device-width  | height |
        monochrome | resolution | width

    - Cannot use Max/Min prefix:
        grid | scan

@media screen and (min-width: 1000px)
{
    //....
}

 

Media Queries Example

@media screen and (min-width: 1000px) {
    //當寬度 >= 1000px,這段程式碼會重新載入
    //when width >= 1000px, this section will be reload
}
@media screen and (min-width: 670px) and (max-width: 1000px){
    //當 寬度 在670px ~ 1000px 之間,這段程式碼會重新載入
    //when width between 670px and 1000px, this section will be reload
}
@media screen and (max-width: 670px){
    //當寬度 <= 670px,這段程式碼會重新載入
    //when width <= 670px, this section will be reload
}


[Sass][Visual Studio] SASS 進階使用 (Mathematical calculations, Selector(%), Parent selectors, List)

By : Duran Hsieh

目錄

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


前言

二月份是一個神奇的月份,在台灣工作,是工作日最少的一個月份。身為一位上
班族,是最能休息到的一個月。

矛盾的是,這個月自己也安排了很多活動,相當充實:

  1. 在二月,微軟MVA的學習挑戰活動也熱烈的展開 https://borntolearn.mslearn.net/knowitproveit/
    只要在MVA註冊帳號,就能接受挑戰。
    每個主題內容非常實用,也提供課後考試的服務,但每個主題動輒29小時
    以上,讓人難以在短時間內消化。
  2. 自己安排農曆年後進行證照考試
(有時候都會覺得這樣自己搞自己好嗎....?)
回歸正題,這篇將會說明SASS進階的使用,像是Mathematical calculations,
 Selector(%), Parent selectors, List等簡單使用方法。

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



實作

1.Mathematical calculations

  在scss檔案內,我們可以運用數學計算,這讓我們開發過程更有便利。
   In scss file, We can use Mathematical calculations. Development would be more flexible.

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

By : Duran Hsieh

目錄

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".

[Sass][Visual Studio] SASS 語法介紹1 (Variable, Mixin, and Nest structure)

By : Duran Hsieh

目錄

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


前言

這一篇我們簡單介紹VariableMixinNest structure
程式碼如下:

Sass Demo

$div-width : 150px;
$div-padding :10px 10px 10px 10px;

body {

}



.first-div{
    width: $div-width;
    padding: $div-padding ;
    background-color: #b6ff00;
}

.second-div{
    width: $div-width;
    padding: $div-padding ;
    background-color: #ff6a00;
}


Variable

有別於CSS,您可以在.scss中使用變數,增加程式可讀性。變數的方法是加上'$',
例如:$button-width 與 $sidebar-padding。
Unlike CSS, you can use variable in .cscc file for increasing code readability.
You can use variable by '$', such as $button-width and $sidebar-padding

範例如下:
我們設定了$div-width 和 $div-padding,提供給.first-div與.second-div使用。
Demo as below:
We added $div-width and $div-padding in ".first-div" and ".second-div"

[Sass][Visual Studio] SASS 基本介紹與安裝 (An introduction to SASS and Using SASS with Visual Studio)

By : Duran Hsieh

前言

上個月因為公司某個專案,需要修改網頁樣式,發現與上一間公司所接觸過的.css
不同(變成.scss),因為不清楚作用如何,沒有理會.scss而直接修改min.css,輕鬆愉
快的完成了工作。
沒想到兩天後的早上,傳來通知信說工作尚未完成,當天早上嚇得冷汗直流....

請教Team Leader與專業的Front End Team後,才發現原來是.scss這傢伙在搞鬼:
SCSS會自動編譯並重新產生css與min.css,下一個前端工程師修改樣式後,理所當
然的將min.css進行覆寫,變成我作了白工。

仔細找了些資料後,才發現.scss檔案已經行之有年,且帶來的便利性超乎想像,因
為了雪恥開始到plurasight找影片、到官方網站找資料,進行學習!

這一系列的文章暫定6個章節,將部分功能一一實作與紀錄,提供未來的自己與大
家參考,若有錯誤歡迎指正與見諒,謝謝。

* 環境: Visual Studio Community 2013 Update 4
* 本篇文章同時發佈於點部落(dotblog)與個人部落格(blogger)


目錄

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


介紹(An introduction to SASS)

簡單來說,SASS可視為CSS的擴充功能,像是變數(variable)、選擇器(selector)、if condition
與計算...等功能,提供開發人員更快速與簡潔的開發過程。這些擴充語法並不是正式的CSS
語法,但SASS編譯器會將內容編譯成為正式的css語法(css與min.css),提供網站使用。

大致上SASS可以分成兩種語法,分別為sass與scss,以檔案副檔名稱作區別為.sass與.scss
,兩著主要差異為在於:scss使用大括號與分號進行程式碼缺塊分割(細部差異不再贅述)
,而在本系列文章,皆使用SCSS進行呈現。


安裝與使用(Using SASS with Visual Studio)

Step 1. 開啟Visual Studio community 2013, 選擇開新專案
             Open  Visual Studio community 2013, then select New Project

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