熱門文章 (Popular Post)

顯示具有 Sass 標籤的文章。 顯示所有文章

By :

目錄

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

前言

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

許多前端開發者沒有習慣Visual Studio進行開發,而開發完成後,將 scss, css, 與 min.css直
接放置專案相對應的資料夾下(如:Content\css),再進行匯入(Include to project)或加入現有
項目(Add exist item)方式加入專案。


By :

目錄

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
}


By :

目錄

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.

By :

目錄

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

By :

目錄

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"

By :

前言

上個月因為公司某個專案,需要修改網頁樣式,發現與上一間公司所接觸過的.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 @ Duran 的技術冶煉廠 - Date A Live - Powered by Blogger - Designed by Johanes Djogan -